From 7da8c51c6b1b2e82f392552565ff517d1f5aee86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 14 Jun 2022 20:17:10 +0200 Subject: [PATCH] Improve colors in settings (#7283) --- res/css/views/settings/_AvatarSetting.scss | 10 ++++---- res/css/views/settings/_DevicesPanel.scss | 3 +-- res/css/views/settings/_FontScalingPanel.scss | 4 ++-- res/css/views/settings/_LayoutSwitcher.scss | 8 ++----- res/css/views/settings/_ProfileSettings.scss | 1 + res/css/views/settings/_ThemeChoicePanel.scss | 23 +------------------ res/css/views/settings/tabs/_SettingsTab.scss | 4 ++-- .../tabs/room/_SecurityRoomSettingsTab.scss | 2 +- res/css/views/spaces/_SpaceBasicSettings.scss | 2 +- res/themes/dark/css/_dark.scss | 1 - res/themes/legacy-dark/css/_legacy-dark.scss | 2 -- .../legacy-light/css/_legacy-light.scss | 2 -- res/themes/light-custom/css/_custom.scss | 1 - res/themes/light/css/_light.scss | 2 -- .../tabs/user/SecurityUserSettingsTab.tsx | 2 +- 15 files changed, 17 insertions(+), 50 deletions(-) diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index ab5afbcd3f1..8c63a00aa8a 100644 --- a/res/css/views/settings/_AvatarSetting.scss +++ b/res/css/views/settings/_AvatarSetting.scss @@ -37,7 +37,7 @@ limitations under the License. text-align: center; > span { - color: #fff; // hardcoded to contrast with background + color: $primary-content; position: relative; // tricks the layout engine into putting this on top of the bg font-weight: 500; } @@ -51,7 +51,7 @@ limitations under the License. right: 0; opacity: 0.5; - background-color: $settings-profile-overlay-placeholder-fg-color; + background-color: $quinary-content; border-radius: 90px; } } @@ -91,7 +91,7 @@ limitations under the License. } .mx_AvatarSetting_avatarPlaceholder::before { - background-color: $settings-profile-overlay-placeholder-fg-color; + background-color: $quinary-content; mask: url("$(res)/img/feather-customised/user.svg"); mask-repeat: no-repeat; mask-size: 36px; @@ -108,7 +108,7 @@ limitations under the License. width: 32px; height: 32px; border-radius: 32px; - background-color: $settings-profile-button-bg-color; + background-color: $secondary-content; position: absolute; bottom: 0; @@ -123,7 +123,7 @@ limitations under the License. mask-repeat: no-repeat; mask-position: center; mask-size: 55%; - background-color: $settings-profile-overlay-placeholder-fg-color; + background-color: $quinary-content; mask-image: url('$(res)/img/feather-customised/edit.svg'); } } diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss index 1732688cc8b..9cbdb6a2a1b 100644 --- a/res/css/views/settings/_DevicesPanel.scss +++ b/res/css/views/settings/_DevicesPanel.scss @@ -19,9 +19,8 @@ limitations under the License. max-width: 880px; hr { - opacity: 0.2; border: none; - border-bottom: 1px solid $primary-content; + border-bottom: 1px solid $quinary-content; } } diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.scss index ff2e9053208..3132e5f1125 100644 --- a/res/css/views/settings/_FontScalingPanel.scss +++ b/res/css/views/settings/_FontScalingPanel.scss @@ -35,7 +35,7 @@ limitations under the License. flex-direction: row; align-items: center; padding: 15px 15px 35px; - background: rgba($appearance-tab-border-color, 0.2); + background: rgba($quinary-content, 0.2); border-radius: 10px; font-size: 10px; margin-top: 24px; @@ -43,7 +43,7 @@ limitations under the License. } .mx_FontScalingPanel_fontSlider_preview { - border: 1px solid $appearance-tab-border-color; + border: 1px solid $quinary-content; border-radius: 10px; padding: 0 16px 9px 16px; pointer-events: none; diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss index d87b4b2c338..29d1e207f94 100644 --- a/res/css/views/settings/_LayoutSwitcher.scss +++ b/res/css/views/settings/_LayoutSwitcher.scss @@ -32,7 +32,7 @@ limitations under the License. width: 300px; min-width: 0; - border: 1px solid $appearance-tab-border-color; + border: 1px solid $quinary-content; border-radius: 10px; .mx_EventTile_msgOption, @@ -67,11 +67,7 @@ limitations under the License. } .mx_StyledRadioButton { - border-top: 1px solid $appearance-tab-border-color; - - > input + div { - border-color: rgba($muted-fg-color, 0.2); - } + border-top: 1px solid $quinary-content; } .mx_StyledRadioButton_checked { diff --git a/res/css/views/settings/_ProfileSettings.scss b/res/css/views/settings/_ProfileSettings.scss index 6ab13058d40..3a7f66f1278 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -48,6 +48,7 @@ limitations under the License. .mx_ProfileSettings_profileForm { @mixin mx_Settings_fullWidthField; + border-bottom: 1px solid $quinary-content; } .mx_ProfileSettings_buttons { diff --git a/res/css/views/settings/_ThemeChoicePanel.scss b/res/css/views/settings/_ThemeChoicePanel.scss index 4310e509035..d5bd4fa1ec9 100644 --- a/res/css/views/settings/_ThemeChoicePanel.scss +++ b/res/css/views/settings/_ThemeChoicePanel.scss @@ -15,7 +15,6 @@ limitations under the License. */ .mx_ThemeChoicePanel { - $radio-bg-color: $input-darker-bg-color; color: $primary-content; > .mx_ThemeSelectors { @@ -32,7 +31,7 @@ limitations under the License. border-radius: 10px; width: 180px; - background: $radio-bg-color; + background: $quinary-content; opacity: 0.4; flex-shrink: 1; @@ -42,7 +41,6 @@ limitations under the License. margin-top: 10px; font-weight: 600; - color: $muted-fg-color; > span { justify-content: center; @@ -62,25 +60,6 @@ limitations under the License. // 5% lightened version of 181b21 background-color: #25282e; color: #f3f8fd; - - > input > div { - border-color: $input-darker-bg-color; - > div { - border-color: $input-darker-bg-color; - } - } - } - - &.mx_ThemeSelector_black { - background-color: #000000; - color: #f3f8fd; - - > input > div { - border-color: $input-darker-bg-color; - > div { - border-color: $input-darker-bg-color; - } - } } } } diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index 0fe0888e82c..55478193901 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -45,7 +45,7 @@ limitations under the License. } .mx_SettingsTab_subsectionText { - color: $settings-subsection-fg-color; + color: $secondary-content; font-size: $font-14px; display: block; margin: 10px 80px 10px 0; // Align with the rest of the view @@ -98,7 +98,7 @@ limitations under the License. } .mx_SettingsTab a { - color: $accent-alt; + color: $links; } .mx_SettingsTab_toggleWithDescription { diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss index a3b3b17899f..c1426534902 100644 --- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss +++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss @@ -34,6 +34,6 @@ limitations under the License. .mx_SecurityRoomSettingsTab_encryptionSection { padding-bottom: 24px; - border-bottom: 1px solid $menu-border-color; + border-bottom: 1px solid $quinary-content; margin-bottom: 32px; } diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss index 5ed772fa85f..fe768a2978f 100644 --- a/res/css/views/spaces/_SpaceBasicSettings.scss +++ b/res/css/views/spaces/_SpaceBasicSettings.scss @@ -64,7 +64,7 @@ limitations under the License. > .mx_AccessibleButton_kind_link { display: inline-block; margin: auto 18px; - color: #368bd6; + color: $links; font-size: $font-14px; // See _SpaceSettingsDialog.scss } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 4edfa523545..4f36d5979c9 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -76,7 +76,6 @@ $menu-selected-color: $room-highlight-color; // Settings // ******************** -$settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-button-bg-color: #e7e7e7; $settings-subsection-fg-color: $text-secondary-color; // ******************** diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 89db8827a0b..f09f1465234 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -77,8 +77,6 @@ $lightbox-background-bg-color: #000; $lightbox-background-bg-opacity: 0.85; $settings-grey-fg-color: #a2a2a2; -$settings-profile-overlay-placeholder-fg-color: #454545; -$settings-profile-button-bg-color: #e7e7e7; $settings-subsection-fg-color: $text-secondary-color; $topleftmenu-color: $text-primary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 024147cb80e..c028175a088 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -111,8 +111,6 @@ $preview-widget-bar-color: #ddd; $blockquote-bar-color: #ddd; $settings-grey-fg-color: #a2a2a2; -$settings-profile-overlay-placeholder-fg-color: #2e2f32; -$settings-profile-button-bg-color: #e7e7e7; $settings-subsection-fg-color: #61708b; $rte-bg-color: #e9e9e9; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 54d3dfd15e7..ce030634b99 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -75,7 +75,6 @@ $roomlist-bg-color: var(--roomlist-background-color); // --timeline-text-color $message-action-bar-fg-color: var(--timeline-text-color); $primary-content: var(--timeline-text-color); -$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color); $roomtopic-color: var(--timeline-text-color-50pct); $tab-label-fg-color: var(--timeline-text-color); // was #212121 diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e5b1382893d..0ed91eed838 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -133,8 +133,6 @@ $menu-selected-color: #f5f8fa; // Settings // ******************** $settings-grey-fg-color: #a2a2a2; -$settings-profile-overlay-placeholder-fg-color: #2e2f32; -$settings-profile-button-bg-color: $menu-border-color; $settings-subsection-fg-color: $muted-fg-color; // ******************** diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx index f92edb0715a..a0ae47b8c6f 100644 --- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx @@ -344,7 +344,7 @@ export default class SecurityUserSettingsTab extends React.Component{ _t("Where you're signed in") }
- + { _t( "Manage your signed-in devices below. " + "A device's name is visible to people you communicate with.",