Campaign/applytheme sidebar text (#6775)

* Remove an unused changeCSS() style (#6680) Fixes mattermost/mattermost#15837 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29399 * [MM-29392] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 516 (#15831) (#6695) Fixes mattermost/mattermost#15831 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29392 * [MM-29397] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln 525 (#15836) (#6686) Remove the line as style is already applied unconditionally and more broadly by changeCss() call at line 515 Fixes mattermost/mattermost#15836 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29397 * [MM-29396] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 523 (#15835) (#6692) Remove the line as it isn't possible that .sidebar__switcher button contains a svg Fixes mattermost/mattermost#15835 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29396 * [MM-29391] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 513 (#15830) (#6696) Fixes mattermost/mattermost#15830 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29391 * [MM-29393] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 519 (#15832) (#6694) Fixes mattermost/mattermost#15832 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29393 * [MM-29394] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 520 (#15833) (#6693) Fixes mattermost/mattermost#15833 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29394 Co-authored-by: Dean Whillier <[email protected]> * Migrate changeCSS(sideText) to CSS variable --sidebartext in utils/utils.jsx (#6697) * [MM-29389] Migrate changeCSS() to CSS variable in utils/utils.jsx, ln. 510 (#15828) This line was unconditionally replaced by line 824 using --link-color so I directly used --link-color in CSS Fixes mattermost/mattermost#15828 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29389 * [MM-29390] Remove references to removed perfect-scrollbar component (#15829) While analyzing mattermost/mattermost#15829 I couldn't found where ps-container class was used It turns out it was an old dependency removed by PR #4382 This commit removes remaining references Fixes mattermost/mattermost#15829 JIRA ticket: https://mattermost.atlassian.net/browse/MM-29390 Co-authored-by: Nicolas Le Cam <[email protected]> Co-authored-by: Mattermod <[email protected]>
mattermost · Oct 16, 2020 · 4e05760 · 4e05760
1 parent f89160c
commit 4e05760
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 40 deletions.
diff --git a/components/user_settings/display/user_settings_theme/user_settings_theme.jsx b/components/user_settings/display/user_settings_theme/user_settings_theme.jsx
@@ -81,10 +81,6 @@ export default class ThemeSetting extends React.PureComponent {
  };
  }
 
- scrollToTop() {
- $('.ps-container.modal-body').scrollTop(0);
- }
-
  submitTheme = async () => {
  const teamId = this.state.applyToAllTeams ? '' : this.props.currentTeamId;
 
@@ -98,7 +94,6 @@ export default class ThemeSetting extends React.PureComponent {
 
  this.props.setRequireConfirm(false);
  this.originalTheme = Object.assign({}, this.state.theme);
- this.scrollToTop();
  this.props.updateSection('');
  this.setState({isSaving: false});
  };
@@ -130,7 +125,6 @@ export default class ThemeSetting extends React.PureComponent {
  const state = this.getStateFromProps();
  state.serverError = null;
  this.setState(state);
- this.scrollToTop();
 
  Utils.applyTheme(state.theme);
 

diff --git a/sass/components/_multi-select.scss b/sass/components/_multi-select.scss
@@ -16,7 +16,7 @@
 .multi-select__focused {
  > div {
  border-radius: 4px;
- box-shadow: 0 0 1px 2px $primary-color;
+ box-shadow: 0 0 1px 3px rgba(var(--link-color-rgb), 0.5), 0 0 0 1px var(--link-color);
  }
 
  input {
@@ -52,4 +52,4 @@
  width: 15px;
  }
  }
-}
+}
diff --git a/sass/components/_scrollbar.scss b/sass/components/_scrollbar.scss
@@ -59,24 +59,3 @@ body {
  }
  }
 }
-
-
-.ps-container {
- &:hover {
- .ps-scrollbar-x-rail,
- .ps-scrollbar-y-rail {
- @include opacity(.3);
- }
- }
-
- > .ps-scrollbar-y-rail {
- width: 10px;
-
- &:hover {
- .ps-scrollbar-y {
- @include opacity(.6);
- width: 6px;
- }
- }
- }
-}
diff --git a/sass/layout/_legacy-sidebar-left.scss b/sass/layout/_legacy-sidebar-left.scss
@@ -71,6 +71,7 @@
 
  .sidebar__switcher {
  flex: 0 0 45px;
+ border-color: rgba(var(--sidebar-text-rgb), 0.2);
  bottom: 0;
  display: block;
  padding-bottom: 0;
@@ -285,6 +286,10 @@
 
  .status {
  flex: 0 0 auto;
+
+ &.status--group {
+ background: rgba(var(--sidebar-text-rgb), 0.3);
+ }
  }
 
  .icon {

diff --git a/sass/layout/_team-sidebar.scss b/sass/layout/_team-sidebar.scss
@@ -146,6 +146,10 @@
 
  .team-btn {
  color: var(--sidebar-header-text-color);
+
+ .badge {
+ border-color: rgba(var(--sidebar-text-rgb), 0.5);
+ }
  }
 
  .order-indicator {

diff --git a/sass/routes/_settings.scss b/sass/routes/_settings.scss
@@ -485,6 +485,10 @@
  padding: 15px;
  margin-top: 10px;
  }
+
+ .nav-pills > li button {
+ color: rgba(var(--sidebar-text-rgb), 0.6);
+ }
  }
 
  .nav-pills {

diff --git a/utils/utils.jsx b/utils/utils.jsx
@@ -508,22 +508,13 @@ export function applyTheme(theme) {
 
  if (theme.sidebarText) {
  changeCss('.app__body .team-sidebar .a11y--focused, .app__body .sidebar--left .a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.sidebarText, 0.5) + ', inset 0 0 0 1px ' + theme.sidebarText);
- 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 .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('.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));
  changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .settings-table .nav>li>button, .app__body .modal .settings-modal .settings-table .nav>li.active>button', 'color:' + theme.sidebarText);
- changeCss('.app__body .sidebar--left .sidebar__switcher', 'border-color:' + changeOpacity(theme.sidebarText, 0.2));
- changeCss('.app__body .team-sidebar .team-btn .badge', 'border-color:' + changeOpacity(theme.sidebarText, 0.5));
  changeCss('@media(max-width: 768px){.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + changeOpacity(theme.sidebarText, 0.6));
  changeCss('.app__body .sidebar--left .sidebar__switcher span', 'color:' + theme.sidebarText);
- changeCss('.app__body .sidebar--left .sidebar__switcher button svg', 'fill:' + theme.sidebarText);
  changeCss('.channel-header .channel-header_plugin-dropdown a, .app__body .sidebar__switcher button', 'background:' + changeOpacity(theme.sidebarText, 0.08));
- changeCss('.app__body .icon__bot', 'fill:' + theme.sidebarText);
  }
 
  if (theme.sidebarTextHoverBg) {
@@ -533,7 +524,6 @@ export function applyTheme(theme) {
  if (theme.sidebarTextActiveColor) {
  changeCss('.sidebar--left .nav-pills__container li.active .sidebar-item, .sidebar--left .nav-pills__container li.active .sidebar-item:hover, .sidebar--left .nav-pills__container li.active .sidebar-item:focus, .app__body .modal .settings-modal .nav-pills>li.active button, .app__body .modal .settings-modal .nav-pills>li.active button:hover, .app__body .modal .settings-modal .nav-pills>li.active button:active', 'color:' + theme.sidebarTextActiveColor);
  changeCss('.sidebar--left .nav li.active .sidebar-item, .sidebar--left .nav li.active .sidebar-item:hover, .sidebar--left .nav li.active .sidebar-item:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1));
- changeCss('@media(max-width: 768px){.app__body .modal .settings-modal .nav-pills > li.active button', 'color:' + changeOpacity(theme.sidebarText, 0.8));
  }
 
  if (theme.sidebarHeaderBg) {
@@ -813,7 +803,6 @@ export function applyTheme(theme) {
 
  if (theme.linkColor) {
  changeCss('.app__body .more-modal__list .a11y--focused, .app__body .post.a11y--focused, .app__body .channel-header.a11y--focused, .app__body .post-create.a11y--focused, .app__body .user-popover.a11y--focused, .app__body .post-message__text.a11y--focused, #archive-link-home>a.a11y--focused', 'box-shadow: inset 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', inset 0 0 0 1px ' + theme.linkColor);
- changeCss('.multi-select__focused > div', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor);
  changeCss('.app__body .a11y--focused', 'box-shadow: 0 0 1px 3px ' + changeOpacity(theme.linkColor, 0.5) + ', 0 0 0 1px ' + theme.linkColor);
  changeCss('.app__body .DayPicker-Day--today, .app__body .channel-header .channel-header__favorites.inactive:hover, .app__body .channel-header__links > a.active, .app__body a, .app__body a:focus, .app__body a:hover, .app__body .channel-header__links > .color--link.active, .app__body .color--link, .app__body a:focus, .app__body .color--link:hover, .app__body .btn, .app__body .btn:focus, .app__body .btn:hover', 'color:' + theme.linkColor);
  changeCss('.app__body .attachment .attachment__container', 'border-left-color:' + changeOpacity(theme.linkColor, 0.5));