Fix clickable area of advanced toggle on appearance user settings tab (…

…#8820)
matrix-org · Jun 12, 2022 · 89743c9 · 89743c9
1 parent b5e1806
commit 89743c9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -32,11 +32,6 @@ limitations under the License.
         margin-bottom: 16px;
     }
 
-    .mx_AppearanceUserSettingsTab_AdvancedToggle {
-        color: $accent;
-        cursor: pointer;
-    }
-
     .mx_AppearanceUserSettingsTab_systemFont {
         margin-left: calc($font-16px + 10px);
     }

diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx
@@ -23,6 +23,7 @@ import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
+import AccessibleButton from "../../../elements/AccessibleButton";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { Layout } from "../../../../../settings/enums/Layout";
@@ -90,12 +91,12 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
         const brand = SdkConfig.get().brand;
-        const toggle = <div
-            className="mx_AppearanceUserSettingsTab_AdvancedToggle"
+        const toggle = <AccessibleButton
+            kind="link"
             onClick={() => this.setState({ showAdvanced: !this.state.showAdvanced })}
         >
             { this.state.showAdvanced ? _t("Hide advanced") : _t("Show advanced") }
-        </div>;
+        </AccessibleButton>;
 
         let advanced: React.ReactNode;