mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-03 20:36:57 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4801 from matrix-org/joriks/appearance-tab-nits

Browse source 
Fix some appearance tab crash and implement style nits
This commit is contained in:
Jorik Schellekens 2020-06-22 15:19:20 +01:00 committed by GitHub
commit 13282bddad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
background: $font-slider-bg-color; background: rgba($appearance-tab-border-color, 0.2);
border-radius: 10px; border-radius: 10px;
font-size: 10px; font-size: 10px;
margin-top: 24px; margin-top: 24px;
@ -38,7 +38,7 @@ limitations under the License.
} }
.mx_AppearanceUserSettingsTab_fontSlider_preview { .mx_AppearanceUserSettingsTab_fontSlider_preview {
border: 1px solid $input-darker-bg-color; border: 1px solid $appearance-tab-border-color;
border-radius: 10px; border-radius: 10px;
padding: 0 16px 9px 16px; padding: 0 16px 9px 16px;
pointer-events: none; pointer-events: none;
@ -56,12 +56,14 @@ limitations under the License.
font-size: 15px; font-size: 15px;
padding-right: 20px; padding-right: 20px;
padding-left: 5px; padding-left: 5px;
font-weight: 500;
} }
.mx_AppearanceUserSettingsTab_fontSlider_largeText { .mx_AppearanceUserSettingsTab_fontSlider_largeText {
font-size: 18px; font-size: 18px;
padding-left: 20px; padding-left: 20px;
padding-right: 5px; padding-right: 5px;
font-weight: 500;
} }
.mx_AppearanceUserSettingsTab { .mx_AppearanceUserSettingsTab {
@ -115,7 +117,8 @@ limitations under the License.
} }
&.mx_ThemeSelector_dark { &.mx_ThemeSelector_dark {
background-color: #181b21; // 5% lightened version of 181b21
background-color: #25282e;
color: #f3f8fd; color: #f3f8fd;
> input > div { > input > div {
@ -163,10 +166,11 @@ limitations under the License.
width: 300px; width: 300px;
border: 1px solid $input-darker-bg-color; border: 1px solid $appearance-tab-border-color;
border-radius: 10px; border-radius: 10px;
.mx_EventTile_msgOption { .mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none; display: none;
} }
@ -175,6 +179,7 @@ limitations under the License.
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
pointer-events: none;
} }
.mx_RadioButton { .mx_RadioButton {
@ -188,7 +193,7 @@ limitations under the License.
} }
.mx_RadioButton { .mx_RadioButton {
border-top: 1px solid $input-darker-bg-color; border-top: 1px solid $appearance-tab-border-color;
> input + div { > input + div {
border-color: rgba($muted-fg-color, 0.2); border-color: rgba($muted-fg-color, 0.2);

4
res/themes/dark/css/_dark.scss
View file

@ -198,8 +198,8 @@ $breadcrumb-placeholder-bg-color: #272c35;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
// FontSlider colors // Appearance tab colors
$font-slider-bg-color: $room-highlight-color; $appearance-tab-border-color: $room-highlight-color;
// ***** Mixins! ***** // ***** Mixins! *****

2
res/themes/light/css/_light.scss
View file

@ -327,7 +327,7 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
$user-tile-hover-bg-color: $header-panel-bg-color; $user-tile-hover-bg-color: $header-panel-bg-color;
// FontSlider colors // FontSlider colors
$font-slider-bg-color: rgba($input-darker-bg-color, 0.2); $appearance-tab-border-color: $input-darker-bg-color;
// ***** Mixins! ***** // ***** Mixins! *****

2
src/components/views/elements/EventTilePreview.tsx
View file

@ -108,7 +108,7 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
}, },
}; };
return event;
} }
public render() { public render() {