Update UserMenu theme toggle to use IconButton (#32591)

* Update UserMenu theme toggle to use IconButton This lets it use the correct compound colour based on theme Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-20 14:08:22 +00:00
parent c2ed88fbf0
commit fd4695f3d5
10 changed files with 112 additions and 83 deletions
@@ -86,14 +86,8 @@ Please see LICENSE files in the repository root for full details.
        }

        .mx_UserMenu_contextMenu_themeButton {
-            min-width: 32px;
-            max-width: 32px;
-            width: 32px;
-            height: 32px;
+            flex-shrink: 0;
            margin-left: 8px;
-            border-radius: 32px;
-            background-color: $theme-button-bg-color;
-            cursor: pointer;

            /* to make alignment easier, create flexbox for the image */
            display: flex;
@@ -102,6 +96,13 @@ Please see LICENSE files in the repository root for full details.

            /* For enhanced visibility under contrast control */
            outline: 1px solid transparent;
+
+            /* Compound overrides to match transitional designs */
+            padding: var(--cpd-space-2x);
+            svg {
+                width: 16px;
+                height: 16px;
+            }
        }

        &.mx_UserMenu_contextMenu_guestPrompts {