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

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss

@@ -14,25 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AppearanceUserSettingsTab {
-    --AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
-
-    .mx_SettingsTab_subsectionText {
-        margin-block: $spacing-12 $spacing-32;
-        color: $primary-content; /* Same as mx_SettingsTab */
-    }
-
-    .mx_Field {
-        width: 256px;
-    }
-
-    .mx_AppearanceUserSettingsTab_Advanced {
-        .mx_Checkbox {
-            margin-block: $spacing-16;
-        }
-
-        .mx_AppearanceUserSettingsTab_systemFont {
-            margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
-        }
-    }
+.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
+    width: 256px;
+    // matches checkbox box + padding
+    // to align with checkbox label
+    margin-inline-start: calc($font-16px + 10px);
 }