Improve the look and feel of the picker

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-16 21:16:07 +02:00
parent 77c8425c3c
commit 31f5d012b8
No known key found for this signature in database
GPG key ID: CC823428E9B582FB
2 changed files with 40 additions and 56 deletions

View file

@ -51,22 +51,22 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
};
render() {
const classes = classNames({
mx_desktopCapturerSourcePicker_stream_button: true,
mx_desktopCapturerSourcePicker_stream_button_selected: this.props.selected,
const thumbnailClasses = classNames({
mx_desktopCapturerSourcePicker_source_thumbnail: true,
mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
});
return (
<AccessibleButton
className={classes}
className="mx_desktopCapturerSourcePicker_source"
title={this.props.source.name}
onClick={this.onClick}
>
<img
className="mx_desktopCapturerSourcePicker_stream_thumbnail"
className={thumbnailClasses}
src={this.props.source.thumbnailURL}
/>
<span className="mx_desktopCapturerSourcePicker_stream_name">{this.props.source.name}</span>
<span className="mx_desktopCapturerSourcePicker_source_name">{this.props.source.name}</span>
</AccessibleButton>
);
}
@ -147,7 +147,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
});
return new Tab(type, label, null, (
<div className="mx_desktopCapturerSourcePicker_panel">
<div className="mx_desktopCapturerSourcePicker_tab">
{ sources }
</div>
));