Improve colors in settings (#7283)

matrix-org · Jun 14, 2022 · 7da8c51 · 7da8c51
1 parent 3c5c2be
commit 7da8c51
Show file tree

Hide file tree

Showing 15 changed files with 17 additions and 50 deletions.
diff --git 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
@@ -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
@@ -35,15 +35,15 @@ 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;
     margin-bottom: 24px;
 }
 
 .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -344,7 +344,7 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
                 { warning }
                 <div className="mx_SettingsTab_heading">{ _t("Where you're signed in") }</div>
                 <div className="mx_SettingsTab_section">
-                    <span>
+                    <span className="mx_SettingsTab_subsectionText">
                         { _t(
                             "Manage your signed-in devices below. " +
                             "A device's name is visible to people you communicate with.",