Tweak rendering of icons for accessibility (#31346)

* Tweak rendering of icons in dropdowns Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in composer format bar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in jump to bottom button Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in quick settings button Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in left panel search Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix margin Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in security user settings tab Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tweak rendering of icons in space hierarchy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Simplify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tidy Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2025-11-27 16:03:19 +00:00
parent 771696e0f0
commit 5869c519ed
44 changed files with 1104 additions and 325 deletions
@@ -7,39 +7,54 @@ Please see LICENSE files in the repository root for full details.
 */

 .mx_QuickSettingsButton {
-    flex: 0 0 auto;
    border-radius: 8px;
-    position: relative;
-    margin: 12px auto;
-    color: $secondary-content;
-    min-width: 32px;
-    min-height: 32px;
-    line-height: 32px;
+    margin: 12px auto 12px;

-    &.expanded {
-        margin-left: 20px;
-        padding-left: 44px; /* align with toggle collapse button text */
-        padding-right: 8px;
-    }
-
-    &::before {
-        content: "";
-        position: absolute;
-        width: 32px;
-        height: 32px;
-        left: 0;
-        mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 24px;
-        background: $secondary-content;
+    svg {
+        fill: $secondary-content;
    }

    &:not(.expanded):hover {
-        background-color: $quaternary-content;
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: $quaternary-content !important;
+        color: $primary-content;

-        &::before {
-            background-color: $primary-content;
+        svg {
+            fill: $primary-content;
+        }
+    }
+
+    &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
+        /* align with settings icon */
+        margin-left: 21px;
+
+        /**
+         * modify internal css of the compound component
+         * dirty but we need to add the label into the indicator icon button
+         **/
+        & > div {
+            display: flex;
+            align-items: center;
+        }
+
+        svg {
+            /* align with settings label */
+            margin-right: 14px;
+            /* required to set the icon width when into a flex container */
+            min-width: 24px;
+        }
+
+        & .mx_QuickSettingsButton_label {
+            color: $secondary-content;
        }
    }
 }