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

Improve colors in settings #7283

Merged
SimonBrandner merged 10 commits into from
Jun 14, 2022
Merged

Improve colors in settings #7283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b76cec7
Make settings use only compound colors
SimonBrandner Dec 4, 2021
a7df138
Remove outdated comment
SimonBrandner Dec 4, 2021
f317b60
Remove $settings-profile-overlay-placeholder-fg-color and $settings-p…
SimonBrandner Dec 4, 2021
8b0ab2b
Merge remote-tracking branch 'upstream/develop' into feature/colors-s…
SimonBrandner Jan 16, 2022
108174e
Merge remote-tracking branch 'upstream/develop' into feature/colors-s…
SimonBrandner Mar 7, 2022
5792ede
Merge remote-tracking branch 'upstream/develop' into feature/colors-s…
SimonBrandner Mar 26, 2022
129f380
Merge remote-tracking branch 'upstream/develop' into feature/colors-s…
SimonBrandner Apr 6, 2022
b8aa1c6
Merge branch 'develop' into feature/colors-settings
SimonBrandner May 1, 2022
9598679
Merge branch 'develop' into feature/colors-settings
SimonBrandner May 7, 2022
8b1dd35
Merge branch 'develop' into feature/colors-settings
SimonBrandner Jun 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions res/css/views/settings/_AvatarSetting.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -98,7 +98,7 @@ limitations under the License.
}

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

.mx_SettingsTab_toggleWithDescription {
Expand Down
2 changes: 1 addition & 1 deletion res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion res/themes/light-custom/css/_custom.scss
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Comment thread
SimonBrandner marked this conversation as resolved.
$settings-subsection-fg-color: $muted-fg-color;
// ********************

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Copy Markdown
Member

@t3chguy t3chguy Dec 4, 2021

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
Copy Markdown
Contributor Author

@SimonBrandner SimonBrandner Dec 4, 2021

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