Update settings tab icons (#12867)

* Change icon for general/account tab ...and add support for compound design token icons to TabbedView, changing all the other icons over while we're at it. * Update snapshots * Fix responsive mode * Missed one * truthy-check the whole block * Use asset imports * Update snapshots
tchapgouv · Aug 6, 2024 · 6ca4f67 · 6ca4f67
1 parent 5519b81
commit 6ca4f67
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 102 deletions.
diff --git a/...user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/...user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
diff --git a/...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/...ce-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-linux.png
diff --git a/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png b/...pshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png
diff --git a/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/...b.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss
@@ -136,6 +136,12 @@ limitations under the License.
     transition:
         color 0.1s,
         background-color 0.1s;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-3x);
+    }
 }
 
 .mx_TabbedView_maskedIcon {
@@ -184,6 +190,10 @@ limitations under the License.
         }
         .mx_TabbedView_tabLabel {
             padding-inline: 0 0;
+            justify-content: center;
+            svg {
+                margin-right: 0;
+            }
         }
     }
 }
diff --git a/res/css/views/dialogs/_UserSettingsDialog.pcss b/res/css/views/dialogs/_UserSettingsDialog.pcss
@@ -30,54 +30,3 @@ limitations under the License.
         font: var(--cpd-font-heading-md-semibold);
     }
 }
-
-/* ICONS */
-/* ========================================================== */
-
-.mx_UserSettingsDialog_settingsIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings.svg");
-}
-
-.mx_UserSettingsDialog_appearanceIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
-}
-
-.mx_UserSettingsDialog_voiceIcon::before {
-    mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
-}
-
-.mx_UserSettingsDialog_bellIcon::before {
-    mask-image: url("$(res)/img/element-icons/notifications.svg");
-}
-
-.mx_UserSettingsDialog_preferencesIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/preference.svg");
-}
-
-.mx_UserSettingsDialog_keyboardIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/keyboard.svg");
-}
-
-.mx_UserSettingsDialog_sidebarIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/sidebar.svg");
-}
-
-.mx_UserSettingsDialog_securityIcon::before {
-    mask-image: url("$(res)/img/element-icons/security.svg");
-}
-
-.mx_UserSettingsDialog_sessionsIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/devices.svg");
-}
-
-.mx_UserSettingsDialog_helpIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/help.svg");
-}
-
-.mx_UserSettingsDialog_labsIcon::before {
-    mask-image: url("$(res)/img/element-icons/settings/flask.svg");
-}
-
-.mx_UserSettingsDialog_mjolnirIcon::before {
-    mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
-}
diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx
@@ -34,14 +34,14 @@ export class Tab<T extends string> {
      * Creates a new tab.
      * @param {string} id The tab's ID.
      * @param {string} label The untranslated tab label.
-     * @param {string} icon The class for the tab icon. This should be a simple mask.
+     * @param {string|JSX.Element} icon An SVG element to use for the tab icon. Can also be a string for legacy icons, in which case it is the class for the tab icon. This should be a simple mask.
      * @param {React.ReactNode} body The JSX for the tab container.
      * @param {string} screenName The screen name to report to Posthog.
      */
     public constructor(
         public readonly id: T,
         public readonly label: TranslationKey,
-        public readonly icon: string | null,
+        public readonly icon: string | JSX.Element | null,
         public readonly body: React.ReactNode,
         public readonly screenName?: ScreenName,
     ) {}
@@ -99,7 +99,11 @@ function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITab
 
     let tabIcon: JSX.Element | undefined;
     if (tab.icon) {
-        tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
+        if (typeof tab.icon === "object") {
+            tabIcon = tab.icon;
+        } else if (typeof tab.icon === "string") {
+            tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
+        }
     }
 
     const id = domIDForTabID(tab.id);

diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -17,6 +17,18 @@ limitations under the License.
 
 import { Toast } from "@vector-im/compound-web";
 import React, { useState } from "react";
+import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile";
+import DevicesIcon from "@vector-im/compound-design-tokens/assets/web/icons/devices";
+import VisibilityOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/visibility-on";
+import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
+import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
+import KeyboardIcon from "@vector-im/compound-design-tokens/assets/web/icons/keyboard";
+import SidebarIcon from "@vector-im/compound-design-tokens/assets/web/icons/sidebar";
+import MicOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on";
+import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock";
+import LabsIcon from "@vector-im/compound-design-tokens/assets/web/icons/labs";
+import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
+import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
 
 import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
@@ -93,7 +105,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.General,
                 _td("common|general"),
-                "mx_UserSettingsDialog_settingsIcon",
+                <UserProfileIcon />,
                 <GeneralUserSettingsTab closeSettingsFn={props.onFinished} />,
                 "UserSettingsGeneral",
             ),
@@ -102,7 +114,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.SessionManager,
                 _td("settings|sessions|title"),
-                "mx_UserSettingsDialog_sessionsIcon",
+                <DevicesIcon />,
                 <SessionManagerTab showMsc4108QrCode={showMsc4108QrCode} />,
                 undefined,
             ),
@@ -111,7 +123,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Appearance,
                 _td("common|appearance"),
-                "mx_UserSettingsDialog_appearanceIcon",
+                <VisibilityOnIcon />,
                 <AppearanceUserSettingsTab />,
                 "UserSettingsAppearance",
             ),
@@ -120,7 +132,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Notifications,
                 _td("notifications|enable_prompt_toast_title"),
-                "mx_UserSettingsDialog_bellIcon",
+                <NotificationsIcon />,
                 <NotificationUserSettingsTab />,
                 "UserSettingsNotifications",
             ),
@@ -129,7 +141,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Preferences,
                 _td("common|preferences"),
-                "mx_UserSettingsDialog_preferencesIcon",
+                <PreferencesIcon />,
                 <PreferencesUserSettingsTab closeSettingsFn={props.onFinished} />,
                 "UserSettingsPreferences",
             ),
@@ -138,7 +150,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Keyboard,
                 _td("settings|keyboard|title"),
-                "mx_UserSettingsDialog_keyboardIcon",
+                <KeyboardIcon />,
                 <KeyboardUserSettingsTab />,
                 "UserSettingsKeyboard",
             ),
@@ -147,7 +159,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Sidebar,
                 _td("settings|sidebar|title"),
-                "mx_UserSettingsDialog_sidebarIcon",
+                <SidebarIcon />,
                 <SidebarUserSettingsTab />,
                 "UserSettingsSidebar",
             ),
@@ -158,7 +170,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 new Tab(
                     UserTab.Voice,
                     _td("settings|voip|title"),
-                    "mx_UserSettingsDialog_voiceIcon",
+                    <MicOnIcon />,
                     <VoiceUserSettingsTab />,
                     "UserSettingsVoiceVideo",
                 ),
@@ -169,29 +181,23 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Security,
                 _td("room_settings|security|title"),
-                "mx_UserSettingsDialog_securityIcon",
+                <LockIcon />,
                 <SecurityUserSettingsTab closeSettingsFn={props.onFinished} />,
                 "UserSettingsSecurityPrivacy",
             ),
         );
 
         if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
             tabs.push(
-                new Tab(
-                    UserTab.Labs,
-                    _td("common|labs"),
-                    "mx_UserSettingsDialog_labsIcon",
-                    <LabsUserSettingsTab />,
-                    "UserSettingsLabs",
-                ),
+                new Tab(UserTab.Labs, _td("common|labs"), <LabsIcon />, <LabsUserSettingsTab />, "UserSettingsLabs"),
             );
         }
         if (mjolnirEnabled) {
             tabs.push(
                 new Tab(
                     UserTab.Mjolnir,
                     _td("labs_mjolnir|title"),
-                    "mx_UserSettingsDialog_mjolnirIcon",
+                    <BlockIcon />,
                     <MjolnirUserSettingsTab />,
                     "UserSettingMjolnir",
                 ),
@@ -201,7 +207,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             new Tab(
                 UserTab.Help,
                 _td("setting|help_about|title"),
-                "mx_UserSettingsDialog_helpIcon",
+                <HelpIcon />,
                 <HelpUserSettingsTab />,
                 "UserSettingsHelpAbout",
             ),