From b76cec7eabb4e2f733bc7457ecae8636cba27212 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 4 Dec 2021 09:52:05 +0100 Subject: [PATCH 1/3] Make settings use only compound colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- 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/_JoinRuleSettings.scss | 2 +- res/css/views/settings/_LayoutSwitcher.scss | 8 ++----- res/css/views/settings/_ProfileSettings.scss | 2 +- res/css/views/settings/_ThemeChoicePanel.scss | 23 +------------------ res/css/views/settings/tabs/_SettingsTab.scss | 4 ++-- .../tabs/room/_SecurityRoomSettingsTab.scss | 2 +- .../tabs/user/_HelpUserSettingsTab.scss | 4 ++-- res/css/views/spaces/_SpaceBasicSettings.scss | 2 +- res/themes/light/css/_light.scss | 2 -- .../tabs/user/SecurityUserSettingsTab.tsx | 2 +- 13 files changed, 20 insertions(+), 48 deletions(-) diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index ab5afbcd3f1..a3b2e1f2ee9 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; // hardcoded to contrast with background 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/_JoinRuleSettings.scss b/res/css/views/settings/_JoinRuleSettings.scss index 76b1b6333af..30d6b6b678c 100644 --- a/res/css/views/settings/_JoinRuleSettings.scss +++ b/res/css/views/settings/_JoinRuleSettings.scss @@ -77,7 +77,7 @@ limitations under the License. color: $secondary-content; & + .mx_StyledRadioButton { - border-top: 1px solid $menu-border-color; + border-top: 1px solid $quinary-content; } } } diff --git a/res/css/views/settings/_LayoutSwitcher.scss b/res/css/views/settings/_LayoutSwitcher.scss index 78362190852..843b5f108a9 100644 --- a/res/css/views/settings/_LayoutSwitcher.scss +++ b/res/css/views/settings/_LayoutSwitcher.scss @@ -31,7 +31,7 @@ limitations under the License. width: 300px; - border: 1px solid $appearance-tab-border-color; + border: 1px solid $quinary-content; border-radius: 10px; .mx_EventTile_msgOption, @@ -62,11 +62,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 35e517b5acd..5614c344562 100644 --- a/res/css/views/settings/_ProfileSettings.scss +++ b/res/css/views/settings/_ProfileSettings.scss @@ -58,7 +58,7 @@ limitations under the License. .mx_ProfileSettings_profileForm { @mixin mx_Settings_fullWidthField; - border-bottom: 1px solid $menu-border-color; + 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 684935152ca..bd5a78754c7 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -43,7 +43,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 @@ -96,5 +96,5 @@ limitations under the License. } .mx_SettingsTab a { - color: $accent-alt; + color: $links; } 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/settings/tabs/user/_HelpUserSettingsTab.scss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss index 3e61e80a9d3..755b3b08868 100644 --- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss +++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss @@ -31,7 +31,7 @@ limitations under the License. .mx_HelpUserSettingsTab_copy { display: flex; border-radius: 5px; - border: solid 1px $light-fg-color; + border: solid 1px $quinary-content; margin-bottom: 10px; margin-top: 10px; padding: 10px; @@ -50,7 +50,7 @@ limitations under the License. content: ""; mask-image: url($copy-button-url); - background-color: $message-action-bar-fg-color; + background-color: $secondary-content; width: 20px; height: 20px; display: block; diff --git a/res/css/views/spaces/_SpaceBasicSettings.scss b/res/css/views/spaces/_SpaceBasicSettings.scss index a8e0e0e2f25..1f040532626 100644 --- a/res/css/views/spaces/_SpaceBasicSettings.scss +++ b/res/css/views/spaces/_SpaceBasicSettings.scss @@ -65,7 +65,7 @@ limitations under the License. display: inline-block; padding: 0; margin: auto 16px; - color: #368bd6; + color: $links; } > .mx_SpaceBasicSettings_avatar_remove { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 20fb2591424..7d87a635cbe 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -113,8 +113,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 ed560b8929f..48e646e0588 100644 --- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx @@ -357,7 +357,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.", From a7df138b322eaf1358942f20bc4a76a6e9a1f809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 4 Dec 2021 17:29:31 +0100 Subject: [PATCH 2/3] Remove outdated comment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/settings/_AvatarSetting.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss index a3b2e1f2ee9..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: $primary-content; // 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; } From f317b60f4cb38a541321dd7d4ed802fbaa59d7c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 4 Dec 2021 17:30:14 +0100 Subject: [PATCH 3/3] Remove $settings-profile-overlay-placeholder-fg-color and $settings-profile-button-bg-color from all themes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 1 - res/themes/legacy-dark/css/_legacy-dark.scss | 2 -- res/themes/legacy-light/css/_legacy-light.scss | 2 -- res/themes/light-custom/css/_custom.scss | 1 - 4 files changed, 6 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index cdb64086822..88a7bb4379c 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -74,7 +74,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 73f9206f77a..0b1cbefdc7d 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -75,8 +75,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 881b98a2ee1..a5352b6e29b 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -110,8 +110,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 c3a726dffa0..3faf401a070 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -73,7 +73,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