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
+57 -59
View File
@@ -15,79 +15,77 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_LayoutSwitcher {
.mx_LayoutSwitcher_RadioButtons {
.mx_LayoutSwitcher_RadioButtons {
display: flex;
flex-direction: row;
gap: 24px;
color: $primary-content;
> .mx_LayoutSwitcher_RadioButton {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: row;
gap: 24px;
flex-direction: column;
color: $primary-content;
flex-basis: 33%;
min-width: 0;
> .mx_LayoutSwitcher_RadioButton {
flex-grow: 0;
flex-shrink: 1;
border: 1px solid $quinary-content;
border-radius: 10px;
.mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none;
}
.mx_LayoutSwitcher_RadioButton_preview {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
pointer-events: none;
width: 300px;
min-width: 0;
border: 1px solid $quinary-content;
border-radius: 10px;
.mx_EventTile_msgOption,
.mx_MessageActionBar {
display: none;
}
.mx_LayoutSwitcher_RadioButton_preview {
flex-grow: 1;
display: flex;
align-items: center;
padding: 10px;
pointer-events: none;
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
padding-right: 11px;
}
}
.mx_StyledRadioButton {
flex-grow: 0;
padding: 10px;
}
.mx_EventTile_content {
margin-right: 0;
}
&.mx_LayoutSwitcher_RadioButton_selected {
border-color: $accent;
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
padding-right: 11px;
}
}
.mx_StyledRadioButton {
border-top: 1px solid $quinary-content;
flex-grow: 0;
padding: 10px;
}
.mx_StyledRadioButton_checked {
background-color: rgba($accent, 0.08);
.mx_EventTile_content {
margin-right: 0;
}
.mx_EventTile {
margin: 0;
&[data-layout="bubble"] {
margin-right: 40px;
flex-shrink: 1;
}
&[data-layout="irc"] {
> a {
display: none;
}
}
.mx_EventTile_line {
max-width: 90%;
&.mx_LayoutSwitcher_RadioButton_selected {
border-color: $accent;
}
}
.mx_StyledRadioButton {
border-top: 1px solid $quinary-content;
}
.mx_StyledRadioButton_checked {
background-color: rgba($accent, 0.08);
}
.mx_EventTile {
margin: 0;
&[data-layout="bubble"] {
margin-right: 40px;
flex-shrink: 1;
}
&[data-layout="irc"] {
> a {
display: none;
}
}
.mx_EventTile_line {
max-width: 90%;
}
}
}