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;
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;
}

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

@ -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));
}
}
`;

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);
& 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;
}

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

@ -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;

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

@ -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;

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

@ -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,

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

@ -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 {