use semantic headings for spellcheck and language (#10959)

matrix-org · May 23, 2023 · f491f2f · f491f2f
1 parent 2f2804f
commit f491f2f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 24 deletions.
diff --git a/res/css/views/settings/_SpellCheckLanguages.pcss b/res/css/views/settings/_SpellCheckLanguages.pcss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_ExistingSpellCheckLanguage {
     display: flex;
     align-items: center;
-    margin-bottom: 5px;
 }
 
 .mx_ExistingSpellCheckLanguage_language {
@@ -26,10 +25,5 @@ limitations under the License.
 }
 
 .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
-    margin-top: 1em;
-    margin-bottom: 1em;
-}
-
-.mx_SpellCheckLanguages {
-    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
+    margin-bottom: $spacing-8;
 }
diff --git a/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_GeneralUserSettingsTab.pcss
@@ -41,8 +41,7 @@ limitations under the License.
 
 .mx_GeneralUserSettingsTab_section--account .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_section--account .mx_PhoneNumbers,
-.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing,
-.mx_GeneralUserSettingsTab_section_languageInput {
+.mx_GeneralUserSettingsTab_section--discovery .mx_GeneralUserSettingsTab_section--discovery_existing {
     margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
 }
 
@@ -62,10 +61,6 @@ limitations under the License.
     margin-left: 5px;
 }
 
-.mx_GeneralUserSettingsTab_section--spellcheck .mx_ToggleSwitch {
-    float: right;
-}
-
 .mx_GeneralUserSettingsTab_heading_warningIcon {
     vertical-align: middle;
 }
diff --git a/src/components/views/settings/SpellCheckSettings.tsx b/src/components/views/settings/SpellCheckSettings.tsx
@@ -98,7 +98,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         );
 
         return (
-            <div className="mx_SpellCheckLanguages">
+            <>
                 {existingSpellCheckLanguages}
                 <form onSubmit={this.onAddClick} noValidate={true}>
                     <SpellCheckLanguagesDropdown
@@ -108,7 +108,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
                     />
                     {addButton}
                 </form>
-            </div>
+            </>
         );
     }
 }
diff --git a/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx b/src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx
@@ -57,6 +57,7 @@ import { IS_MAC } from "../../../../../Keyboard";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import SettingsSubsection from "../../shared/SettingsSubsection";
+import { SettingsSubsectionHeading } from "../../shared/SettingsSubsectionHeading";
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -417,31 +418,31 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     private renderLanguageSection(): JSX.Element {
         // TODO: Convert to new-styled Field
         return (
-            <div className="mx_SettingsTab_section">
-                <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
+            <SettingsSubsection heading={_t("Language and region")} stretchContent>
                 <LanguageDropdown
                     className="mx_GeneralUserSettingsTab_section_languageInput"
                     onOptionChange={this.onLanguageChange}
                     value={this.state.language}
                 />
-            </div>
+            </SettingsSubsection>
         );
     }
 
     private renderSpellCheckSection(): JSX.Element {
+        const heading = (
+            <SettingsSubsectionHeading heading={_t("Spell check")}>
+                <ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
+            </SettingsSubsectionHeading>
+        );
         return (
-            <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_section--spellcheck">
-                <span className="mx_SettingsTab_subheading">
-                    {_t("Spell check")}
-                    <ToggleSwitch checked={!!this.state.spellCheckEnabled} onChange={this.onSpellCheckEnabledChange} />
-                </span>
+            <SettingsSubsection heading={heading} stretchContent>
                 {this.state.spellCheckEnabled && !IS_MAC && (
                     <SpellCheckSettings
                         languages={this.state.spellCheckLanguages}
                         onLanguagesChange={this.onSpellCheckLanguagesChange}
                     />
                 )}
-            </div>
+            </SettingsSubsection>
         );
     }