Break ThemeChoicePanel into a separate component (#6998)

* Break ThemeChoicePanel into a separate component

* Tests for ThemeChoicePanel

* i18n fixes

* Fix copyright for ThemeChoicePanel
This commit is contained in:
Andy Balaam 2021-10-20 15:58:27 +01:00 committed by GitHub
parent d188d32423
commit 4b903b9fbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 508 additions and 230 deletions

View file

@ -24,78 +24,6 @@ limitations under the License.
}
}
.mx_AppearanceUserSettingsTab_themeSection {
$radio-bg-color: $input-darker-bg-color;
color: $primary-content;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 4px;
margin-bottom: 30px;
> .mx_RadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
background: $radio-bg-color;
opacity: 0.4;
flex-shrink: 1;
flex-grow: 0;
margin-right: 15px;
margin-top: 10px;
font-weight: 600;
color: $muted-fg-color;
> span {
justify-content: center;
}
}
> .mx_RadioButton_enabled {
opacity: 1;
// These colors need to be hardcoded because they don't change with the theme
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
&.mx_ThemeSelector_dark {
// 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;
}
}
}
}
}
}
.mx_AppearanceUserSettingsTab_Advanced {
color: $primary-content;