Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve colors in settings #7283

Merged
10 changes: 5 additions & 5 deletions res/css/views/settings/_AvatarSetting.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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');
}
}
Expand Down
3 changes: 1 addition & 2 deletions res/css/views/settings/_DevicesPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
4 changes: 2 additions & 2 deletions res/css/views/settings/_FontScalingPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 2 additions & 6 deletions res/css/views/settings/_LayoutSwitcher.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions res/css/views/settings/_ProfileSettings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ limitations under the License.

.mx_ProfileSettings_profileForm {
@mixin mx_Settings_fullWidthField;
border-bottom: 1px solid $quinary-content;
}

.mx_ProfileSettings_buttons {
Expand Down
23 changes: 1 addition & 22 deletions res/css/views/settings/_ThemeChoicePanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ limitations under the License.
*/

.mx_ThemeChoicePanel {
$radio-bg-color: $input-darker-bg-color;
color: $primary-content;

> .mx_ThemeSelectors {
Expand All @@ -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;
Expand All @@ -42,7 +41,6 @@ limitations under the License.
margin-top: 10px;

font-weight: 600;
color: $muted-fg-color;

> span {
justify-content: center;
Expand All @@ -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;
}
}
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/settings/tabs/_SettingsTab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -96,7 +96,7 @@ limitations under the License.
}

.mx_SettingsTab a {
color: $accent-alt;
color: $links;
}

.mx_SettingsTab_toggleWithDescription {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion res/css/views/spaces/_SpaceBasicSettings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand Down
1 change: 0 additions & 1 deletion res/themes/dark/css/_dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// ********************
Expand Down
2 changes: 0 additions & 2 deletions res/themes/legacy-dark/css/_legacy-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 0 additions & 2 deletions res/themes/legacy-light/css/_legacy-light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,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;
Expand Down
1 change: 0 additions & 1 deletion res/themes/light-custom/css/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions res/themes/light/css/_light.scss
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,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;
SimonBrandner marked this conversation as resolved.
Show resolved Hide resolved
$settings-subsection-fg-color: $muted-fg-color;
// ********************

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,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">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this class is applied to divs elsewhere

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a quick look, it seems to be applied in most places. The only place where I see it not being applied is User settings -> Preferences -> Communities though I think that was intentional?

{ _t(
"Manage your signed-in devices below. " +
"A device's name is visible to people you communicate with.",
Expand Down