MM-56965 - Updating header icon value (#26284)

webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx

@@ -41,11 +41,11 @@ export const IconContainer = styled.button`
     background: transparent;
     padding: 0 7px;
     border-radius: 4px;
-    color: rgba(var(--center-channel-color-rgb), 0.64);
+    color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
 
     &:hover {
         background: rgba(var(--center-channel-color-rgb), 0.08);
-        color: rgba(var(--center-channel-color-rgb), 0.8);
+        color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
         fill: currentColor;
     }
 

webapp/channels/src/components/channel_info_rhs/menu.tsx

@@ -18,7 +18,7 @@ const MenuItemContainer = styled.div`
 `;
 
 const Icon = styled.div`
-    color: rgba(var(--center-channel-color-rgb), 0.64);
+    color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
 `;
 
 const MenuItemText = styled.div`
@@ -76,14 +76,18 @@ const menuItem = ({icon, text, className, opensSubpanel, badge, onClick}: MenuIt
 
 const MenuItem = styled(menuItem)`
     display: flex;
+    width: 100%;
+    height: 40px;
     flex-direction: row;
     align-items: center;
     cursor: pointer;
-    width: 100%;
-    height: 40px;
 
     &:hover {
-       background: rgba(var(--center-channel-color-rgb), 0.08);
+        background: rgba(var(--center-channel-color-rgb), 0.08);
+
+        ${Icon} {
+            color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
+        }
     }
 `;
 

webapp/channels/src/components/channel_info_rhs/top_buttons.tsx

@@ -29,7 +29,7 @@ const Button = styled.button`
         color: rgba(var(--center-channel-color-rgb), 0.8);
 
         & i {
-            color: rgba(var(--center-channel-color-rgb), 0.8);
+            color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
         }
     }
 
@@ -44,7 +44,7 @@ const Button = styled.button`
     }
 
     & i {
-        color: rgba(var(--center-channel-color-rgb), 0.64);
+        color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
         font-size: 24px;
     }
 

webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss

@@ -1,5 +1,7 @@
 :root {
     // Cloned default hex values from base/css_variables to be used in the system console
+    --icon-opacity: 0.64;
+    --icon-opacity-hover: 0.8;
     --sys-away-indicator: #ffbc1f;
     --sys-away-indicator-dark: #997113;
     --sys-button-bg: #166de0;

webapp/channels/src/sass/base/_css_variables.scss

@@ -1,6 +1,8 @@
 :root {
     // Default Hex values to be replaced by applyTheme()
     // these are define to prevent flashes of unstyled content
+    --icon-opacity: 0.64;
+    --icon-opacity-hover: 0.8;
     --away-indicator: #ffbc42;
     --away-indicator-dark: #c79e3f;
     --button-bg: #166de0;

webapp/channels/src/sass/components/_buttons.scss

@@ -51,11 +51,11 @@ button {
         width: 40px;
         padding: 0;
         background-color: transparent;
-        color: rgba(var(--center-channel-color-rgb), 0.64);
+        color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
 
         &:hover {
             background-color: rgba(var(--center-channel-color-rgb), 0.08);
-            color: rgba(var(--center-channel-color-rgb), 0.8);
+            color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
         }
 
         &:focus,

webapp/channels/src/sass/layout/_headers.scss

@@ -432,6 +432,10 @@
             button {
                 color: rgba(var(--center-channel-color-rgb), 0.75);
 
+                i {
+                    color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
+                }
+
                 .edit-icon {
                     display: none;
                 }
@@ -440,6 +444,10 @@
                 &:hover {
                     color: rgba(var(--center-channel-color-rgb), 0.88);
                     text-decoration: none;
+
+                    i {
+                        color: rgba(var(--center-channel-color-rgb), var(--icon-opacity-hover));
+                    }
                 }
 
                 &:hover {