Update Apperance settings to use toggle switches.

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

@@ -8,6 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
     width: 256px;
-    /* matches checkbox box + padding to align with checkbox label */
-    margin-inline-start: calc($font-16px + 10px);
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
 }

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -48,7 +48,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
     private renderAdvancedSection(): ReactNode {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
-        const brand = SdkConfig.get().brand;
         const toggle = (
             <AccessibleButton
                 kind="link"
@@ -62,21 +61,18 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
         let advanced: React.ReactNode;
 
         if (this.state.showAdvanced) {
-            const tooltipContent = _t("settings|appearance|custom_font_description", { brand });
             advanced = (
                 <>
-                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} useCheckbox={true} />
+                    <SettingsFlag name="useCompactLayout" level={SettingLevel.DEVICE} />
 
                     <SettingsFlag
                         name="useBundledEmojiFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useBundledEmojiFont: checked })}
                     />
                     <SettingsFlag
                         name="useSystemFont"
                         level={SettingLevel.DEVICE}
-                        useCheckbox={true}
                         onChange={(checked) => this.setState({ useSystemFont: checked })}
                     />
                     <Field
@@ -89,8 +85,6 @@ export default class AppearanceUserSettingsTab extends React.Component<EmptyObje
 
                             SettingsStore.setValue("systemFont", null, SettingLevel.DEVICE, value.target.value);
                         }}
-                        tooltipContent={tooltipContent}
-                        forceTooltipVisible={true}
                         disabled={!this.state.useSystemFont}
                         value={this.state.systemFont}
                     />

src/settings/Settings.tsx

@@ -906,6 +906,10 @@ export const SETTINGS: Settings = {
         default: false,
         displayName: _td("settings|appearance|custom_font"),
         controller: new SystemFontController(),
+        description: () =>
+            _t("settings|appearance|custom_font_description", {
+                brand: SdkConfig.get().brand,
+            }),
     },
     "systemFont": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,