From a65de52c90e35c6d7a04653fb8778726834e2ded Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Tue, 27 Feb 2024 16:56:21 +0500 Subject: [PATCH] MM-56965 - Updating header icon value (#26284) --- .../formatting_bar/formatting_icon.tsx | 4 ++-- .../src/components/channel_info_rhs/menu.tsx | 12 ++++++++---- .../src/components/channel_info_rhs/top_buttons.tsx | 4 ++-- .../sass/admin_console_base/_sys_css_variables.scss | 2 ++ webapp/channels/src/sass/base/_css_variables.scss | 2 ++ webapp/channels/src/sass/components/_buttons.scss | 4 ++-- webapp/channels/src/sass/layout/_headers.scss | 8 ++++++++ 7 files changed, 26 insertions(+), 10 deletions(-) diff --git a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx b/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx index 983c34ef10..3683a132a1 100644 --- a/webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx +++ b/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; } diff --git a/webapp/channels/src/components/channel_info_rhs/menu.tsx b/webapp/channels/src/components/channel_info_rhs/menu.tsx index 3c4ac145a7..ee9b4b3c6d 100644 --- a/webapp/channels/src/components/channel_info_rhs/menu.tsx +++ b/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)); + } } `; diff --git a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx b/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx index ac4cbe620d..cdc30eeaf5 100644 --- a/webapp/channels/src/components/channel_info_rhs/top_buttons.tsx +++ b/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; } diff --git a/webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss b/webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss index 734614b554..076a0120d5 100644 --- a/webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss +++ b/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; diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss index 74492fc794..8c49ca2f43 100644 --- a/webapp/channels/src/sass/base/_css_variables.scss +++ b/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; diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss index 4c2d921be3..b040e6edab 100644 --- a/webapp/channels/src/sass/components/_buttons.scss +++ b/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, diff --git a/webapp/channels/src/sass/layout/_headers.scss b/webapp/channels/src/sass/layout/_headers.scss index b93f30908f..fd3616db79 100644 --- a/webapp/channels/src/sass/layout/_headers.scss +++ b/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 {