Fixing styles using css variables and initializing them properly (mat…

…termost#4256)
Revanth47 · Nov 27, 2019 · 6f88c14 · 6f88c14
1 parent de42be5
commit 6f88c14
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/sass/base/_css_variables.scss b/sass/base/_css_variables.scss
@@ -1,6 +1,8 @@
 :root {
  --sidebar-bg: #145dbf;
  --sidebar-text: #ffffff;
+ --sidebar-text-60: #ffffff99;
+ --sidebar-text-80: #ffffffcc;
  --sidebar-unread-text: #ffffff;
  --sidebar-text-hover-bg: #4578bf;
  --sidebar-text-active-border: #579eff;

diff --git a/sass/layout/_sidebar-left.scss b/sass/layout/_sidebar-left.scss
@@ -171,6 +171,11 @@
  position: relative;
  width: 100%;
  padding-bottom: 10px;
+ li {
+ >h4, >.nav-more {
+ color: var(--sidebar-text-60);
+ }
+ }
  }
 
  .nav-pills__unread-indicator {
@@ -412,9 +417,10 @@
  border-radius: 50%;
  line-height: 0;
  height: 28px;
+ color: var(--sidebar-text-80);
 
- &:hover {
- color: #666666;
+ &:hover, &:focus {
+ color: var(--sidebar-text);
  }
 
  span {

diff --git a/sass/layout/_team-sidebar.scss b/sass/layout/_team-sidebar.scss
@@ -89,6 +89,10 @@
  @include opacity(.5);
  cursor: not-allowed;
  }
+
+ .team-btn {
+ color: var(--sidebar-header-text-color);
+ }
  }
 
  .scrollbar--view {
@@ -109,4 +113,10 @@
  .app__content {
  margin-left: 285px;
  }
+ .team-sidebar {
+ .team-wrapper {
+ .team-container {
+ }
+ }
+ }
 }
diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -481,10 +481,8 @@ export function applyTheme(theme) {
  changeCss('.multi-select__focused > div', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.sidebarText, 0.5) + ', inset 0 0 0 1px ' + theme.sidebarText);
  changeCss('.app__body .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y', 'background:' + theme.sidebarText);
  changeCss('.app__body .ps-container:hover .ps-scrollbar-y-rail:hover, .app__body .sidebar__switcher button:hover', 'background:' + changeOpacity(theme.sidebarText, 0.15));
- changeCss('.app__body .sidebar--left .nav-pills__container li > h4, .app__body .sidebar--left .nav-pills__container li > .nav-more, .app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li button', 'color:' + changeOpacity(theme.sidebarText, 0.6));
+ changeCss('.app__body .sidebar--right, .app__body .modal .settings-modal .nav-pills>li button', 'color:' + changeOpacity(theme.sidebarText, 0.6));
  changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>a, .app__body .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.8));
- changeCss('.app__body .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.8));
- changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText);
  changeCss('.sidebar--left .status .offline--icon, .app__body .sidebar--menu svg, .app__body .sidebar-item .icon', 'fill:' + theme.sidebarText);
  changeCss('.sidebar--left .status.status--group', 'background:' + changeOpacity(theme.sidebarText, 0.3));
  changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>button, .app__body #sidebarDropdownMenu .menu-divider', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
@@ -530,7 +528,7 @@ export function applyTheme(theme) {
  }
 
  if (theme.sidebarHeaderTextColor) {
- changeCss('.app__body .MenuWrapper .status-wrapper .status, .app__body #status-dropdown .status-wrapper .status-edit, .multi-teams .team-sidebar .team-wrapper .team-container .team-btn, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
+ changeCss('.app__body .MenuWrapper .status-wrapper .status, .app__body #status-dropdown .status-wrapper .status-edit, .sidebar--left .team__header .header__info, .app__body .sidebar--menu .team__header .header__info, .app__body .post-list__timestamp > div', 'color:' + theme.sidebarHeaderTextColor);
  changeCss('.app__body .icon--sidebarHeaderTextColor svg, .app__body .sidebar-header-dropdown__icon svg', 'fill:' + theme.sidebarHeaderTextColor);
  changeCss('.sidebar--left .team__header .user__name, .app__body .sidebar--menu .team__header .user__name', 'color:' + changeOpacity(theme.sidebarHeaderTextColor, 0.8));
  changeCss('.sidebar--left .team__header:hover .user__name, .app__body .sidebar--menu .team__header:hover .user__name', 'color:' + theme.sidebarHeaderTextColor);