Multiple UI Improvements

* Fixing backstage scrolling and link issue

* Fixing system console and color picker css

* Changing the toggleclass

components/backstage/backstage_navbar.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
+
 import React from 'react';
 
 import TeamStore from 'stores/team_store.jsx';
@@ -21,10 +23,12 @@ export default class BackstageNavbar extends React.Component {
 
  componentDidMount() {
  TeamStore.addChangeListener(this.handleChange);
+ $('body').addClass('backstage');
  }
 
  componentWillUnmount() {
  TeamStore.removeChangeListener(this.handleChange);
+ $('body').removeClass('backstage');
  }
 
  handleChange() {

sass/components/_dropdown.scss

@@ -1,6 +1,11 @@
 @charset 'UTF-8';
 
 .dropdown-menu {
+
+ &.colorpicker {
+ z-index: 2500;
+ }
+
  .divider {
  @include opacity(.15);
  }

sass/layout/_footer.scss

@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
 .footer-pane {
- background: $light-gray;
+ background: $bg--gray;
  padding-bottom: 1em;
 
  .footer-link {

sass/responsive/_desktop.scss

@@ -36,6 +36,12 @@
  }
 }
 
+@media screen and (max-width: 1258px) {
+ .backstage-content {
+ margin: 46px 46px 46px 150px;
+ }
+}
+
 @media screen and (max-width: 1140px) {
  .tip-overlay {
  &.tip-overlay--chat {
@@ -48,11 +54,6 @@
  }
  }
 
- .backstage-content {
- margin: 46px 46px 46px 150px;
- }
-
-
  .inner-wrap {
  &.move--left {
  .file-overlay {

sass/routes/_admin-console.scss

@@ -87,7 +87,8 @@
  }
 
  > h4 {
- background: #333;
+ background: alpha-color($white, .15);
+ color: $white;
  margin: 1px 0 0;
  padding: 10px;
 

sass/routes/_backstage.scss

@@ -1,3 +1,24 @@
+body {
+ &.backstage {
+ height: auto;
+ overflow: auto;
+
+ .sidebar--right {
+ display: none;
+ }
+
+ .navbar {
+ display: none;
+ }
+
+ .inner-wrap {
+ &:before {
+ display: none;
+ }
+ }
+ }
+}
+
 .backstage-content {
  background-color: $bg--gray;
  height: 100%;