Use semantic headings in user settings Appearance (#10827)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

* semantic heading in labs settings

* semantic headings in keyboard settings tab

* semantic heading in preferencesusersettingstab

* tidying

* use new settings components in eventindexpanel

* findByTestId

* prettier

* semantic headings and style refresh for crypto settings

* e2e panel

* use semantic headings in User settings appearance tab

* update selectors in tests

* tidy
This commit is contained in:
Kerry
2023-05-21 21:12:11 +00:00
committed by GitHub
parent e652177706
commit b3b03e5dcb
18 changed files with 760 additions and 765 deletions
+30 -36
View File
@@ -14,53 +14,47 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_ThemeChoicePanel {
.mx_ThemeChoicePanel_themeSelectors {
color: $primary-content;
display: flex;
flex-direction: row;
flex-wrap: wrap;
> .mx_ThemeSelectors {
display: flex;
flex-direction: row;
flex-wrap: wrap;
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
margin-top: 4px;
margin-bottom: 30px;
background: $quinary-content;
opacity: 0.4;
> .mx_StyledRadioButton {
padding: $font-16px;
box-sizing: border-box;
border-radius: 10px;
width: 180px;
flex-shrink: 1;
flex-grow: 0;
background: $quinary-content;
opacity: 0.4;
margin-right: 15px;
margin-top: 10px;
flex-shrink: 1;
flex-grow: 0;
font-weight: var(--font-semi-bold);
margin-right: 15px;
margin-top: 10px;
> span {
justify-content: center;
}
}
font-weight: var(--font-semi-bold);
> .mx_StyledRadioButton_enabled {
opacity: 1;
> span {
justify-content: center;
}
/* These colors need to be hardcoded because they don't change with the theme */
&.mx_ThemeSelector_light {
background-color: #f3f8fd;
color: #2e2f32;
}
> .mx_StyledRadioButton_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;
}
&.mx_ThemeSelector_dark {
/* 5% lightened version of 181b21 */
background-color: #25282e;
color: #f3f8fd;
}
}
}