IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Asaad Mahmood 2024-02-27 16:56:21 +05:00 committed by GitHub
parent 590b75e9fc
commit a65de52c90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/channels/src/components/advanced_text_editor/formatting_bar/formatting_icon.tsx
View File

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

12
webapp/channels/src/components/channel_info_rhs/menu.tsx
View File

@ -18,7 +18,7 @@ const MenuItemContainer = styled.div`
`; `;
const Icon = 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` const MenuItemText = styled.div`
@ -76,14 +76,18 @@ const menuItem = ({icon, text, className, opensSubpanel, badge, onClick}: MenuIt
const MenuItem = styled(menuItem)` const MenuItem = styled(menuItem)`
display: flex; display: flex;
width: 100%;
height: 40px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
width: 100%;
height: 40px;
&:hover { &: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));
}
} }
`; `;

4
webapp/channels/src/components/channel_info_rhs/top_buttons.tsx
View File

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

2
webapp/channels/src/sass/admin_console_base/_sys_css_variables.scss
View File

@ -1,5 +1,7 @@
:root { :root {
// Cloned default hex values from base/css_variables to be used in the system console // 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: #ffbc1f;
--sys-away-indicator-dark: #997113; --sys-away-indicator-dark: #997113;
--sys-button-bg: #166de0; --sys-button-bg: #166de0;

2
webapp/channels/src/sass/base/_css_variables.scss
View File

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

4
webapp/channels/src/sass/components/_buttons.scss
View File

@ -51,11 +51,11 @@ button {
width: 40px; width: 40px;
padding: 0; padding: 0;
background-color: transparent; background-color: transparent;
color: rgba(var(--center-channel-color-rgb), 0.64); color: rgba(var(--center-channel-color-rgb), var(--icon-opacity));
&:hover { &:hover {
background-color: rgba(var(--center-channel-color-rgb), 0.08); 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, &:focus,

8
webapp/channels/src/sass/layout/_headers.scss
View File

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