From: a2batic <murarkakanika@gmail.com>
Date: Sat, 21 Jul 2018 00:59:47 +0000 (+0200)
Subject: mgr/dashboard: Color variables for color codes
X-Git-Tag: v14.0.1~780^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F22695%2Fhead;p=ceph.git

mgr/dashboard: Color variables for color codes
Assign variables to colors present in css files
Changed navigation icons padding because the notification dropdown was going out of window.
Fixes: http://tracker.ceph.com/issues/24575
Signed-off-by: Kanika Murarka <kmurarka@redhat.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
index bc1009b3afe6..ff3637af7c70 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.html
@@ -8,7 +8,7 @@
           #formDir="ngForm"
           [formGroup]="osdFlagsForm"
           novalidate>
-      <div class="modal-body">
+      <div class="modal-body osd-modal">
         <div class="checkbox checkbox-primary"
              *ngFor="let flag of flags; let last = last">
           <input type="checkbox"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
index e69de29bb2d1..54df873a7692 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-flags-modal/osd-flags-modal.component.scss
@@ -0,0 +1,5 @@
+.osd-modal {
+  .oa-hr-small{
+    margin: 5px;
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
index 7135f96f67bb..c9f8c2c6c8dc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.html
@@ -5,7 +5,6 @@
           [chartType]="chart.chartType"
           [options]="chart.options"
           [labels]="chart.labels"
-          [colors]="chart.colors"
           width="120"
           height="120"></canvas>
   <div class="chartjs-tooltip"
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
index 94e21636ad77..b3da72583c8f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.ts
@@ -61,29 +61,6 @@ export class HealthComponent implements OnInit, OnDestroy {
   }
 
   preparePoolUsage(chart, data) {
-    const colors = [
-      '#3366CC',
-      '#109618',
-      '#990099',
-      '#3B3EAC',
-      '#0099C6',
-      '#DD4477',
-      '#66AA00',
-      '#B82E2E',
-      '#316395',
-      '#994499',
-      '#22AA99',
-      '#AAAA11',
-      '#6633CC',
-      '#E67300',
-      '#8B0707',
-      '#329262',
-      '#5574A6',
-      '#FF9900',
-      '#DC3912',
-      '#3B3EAC'
-    ];
-
     const poolLabels = [];
     const poolData = [];
 
@@ -93,7 +70,6 @@ export class HealthComponent implements OnInit, OnDestroy {
     });
 
     chart.dataset[0].data = poolData;
-    chart.colors = [{ backgroundColor: colors }];
     chart.labels = poolLabels;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-501/rgw-501.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-501/rgw-501.component.scss
index f2cd38793646..e69de29bb2d1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-501/rgw-501.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-501/rgw-501.component.scss
@@ -1,6 +0,0 @@
-.alert-row-icon {
-  vertical-align: top;
-  padding-right: 15px;
-}
-.alert-row-text {
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.scss
index e69de29bb2d1..7ac12c1fea7a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-user-form/rgw-user-form.component.scss
@@ -0,0 +1,6 @@
+@import '../../../../defaults';
+
+form .input-group-addon {
+  color: $color-rgw-icon !important;
+  background-color: transparent;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
index e0b33c893d68..a89d87ef1bb2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.html
@@ -64,7 +64,7 @@
         </div>
 
         <input type="submit"
-               class="btn btn-openattic btn-block"
+               class="btn btn-primary btn-block"
                [disabled]="loginForm.invalid"
                value="Login">
       </form>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
index 1f77356d2967..8b00c1eaa15c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss
@@ -4,8 +4,8 @@
   height: 100%;
 
   .row {
-    color: #ececec;
-    background-color: #474544;
+    color: $color-login-row-text;
+    background-color: $color-login-row-bg;
   }
 
   h1 {
@@ -15,17 +15,17 @@
 
   .btn-password,
   .form-control {
-    color: #ececec;
-    background-color: #555555;
+    color: $color-password-toggle-text;
+    background-color: $color-password-toggle-bg;
   }
 
   .btn-password:focus {
-    outline-color: #66afe9;
+    outline-color: $color-password-toggle-focus;
   }
 
   .checkbox-primary input[type="checkbox"]:checked + label::before,
   .checkbox-primary input[type="radio"]:checked + label::before {
-    background-color: $oa-color-blue;
-    border-color: $oa-color-blue;
+    background-color: $color-login-checkbox-bg;
+    border-color: $color-login-checkbox-border;
   }
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index 9d60c31edc16..e7cc38ae1aac 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-openattic">
+<nav class="navbar navbar-default navbar-main">
   <!-- Brand and toggle get grouped for better mobile display -->
 
   <div class="navbar-header tc_logo_component">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index e69de29bb2d1..bdd243390ba3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -0,0 +1,201 @@
+@import '../../../../defaults';
+
+/* Navbar */
+::ng-deep .navbar-main {
+  margin-bottom: 0;
+  background: $color-navbar-bg;
+  border: 0;
+  border-radius: 0;
+  border-top: 4px solid $color-nav-top-bar;
+  font-size: 1.2em;
+
+  .navbar-header {
+    display: flex;
+    float: none;
+  }
+
+  .navbar-brand,.navbar-brand:hover{
+    color: $color-navbar-brand;
+    height: auto;
+    margin: 15px 0 15px 20px;
+    padding: 0;
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+  }
+
+  .navbar-brand>img {
+    height: 25px;
+  }
+
+  .navbar-toggle {
+    margin-left: auto;
+    border: 0;
+  }
+
+  .navbar-toggle:focus,
+  .navbar-toggle:hover {
+    background-color: transparent;
+    outline: 0;
+  }
+
+  .navbar-toggle .icon-bar {
+    background-color: $color-nav-toggle-bar;
+  }
+
+  .navbar-toggle:focus .icon-bar,
+  .navbar-toggle:hover .icon-bar {
+    -webkit-box-shadow: 0 0 3px $color-nav-toggle-shadow;
+    box-shadow: 0 0 3px $color-nav-toggle-shadow;
+  }
+
+  .navbar-collapse {
+    padding: 0;
+  }
+
+  .navbar-nav > li > .oa-navbar > [dropdown] > ul > li > .dropdown-item {
+    font-size: 12px;
+  }
+
+  .navbar-nav > li > .oa-navbar > [dropdown] > a,
+  .navbar-nav > li > .oa-navbar > a,
+  .navbar-nav > li > a {
+    color: $color-nav-links;
+    line-height: 1;
+    padding: 10px 18px;
+    position: relative;
+    display: block;
+    text-decoration: none;
+  }
+
+  .navbar-nav > li > .oa-navbar > [dropdown] > a:focus,
+  .navbar-nav > li > .oa-navbar > [dropdown] > a:hover,
+  .navbar-nav > li > .oa-navbar > a:focus,
+  .navbar-nav > li > .oa-navbar > a:hover,
+  .navbar-nav > li > a:focus,
+  .navbar-nav > li > a:hover {
+    color: $color-nav-links;
+  }
+
+  .navbar-nav > li > .oa-navbar > [dropdown] > a:hover,
+  .navbar-nav > li > .oa-navbar > [dropdown].open > a,
+  .navbar-nav > li > .oa-navbar > a:hover,
+  .navbar-nav > li > a:hover {
+    background-color: $color-nav-links-hover;
+  }
+
+  .navbar-nav > li a.dropdown-toggle span.caret {
+    margin-left: 5px;
+  }
+
+  .navbar-nav > .open > .oa-navbar > [dropdown] > a,
+  .navbar-nav > .open > .oa-navbar > [dropdown] > a:hover,
+  .navbar-nav > .open > .oa-navbar > a,
+  .navbar-nav > .open > .oa-navbar > a:focus,
+  .navbar-nav > .open > .oa-navbar > a:hover,
+  .navbar-nav > .open > .oa-navbar > li > a:focus,
+  .navbar-nav > .open > a,
+  .navbar-nav > .open > a:focus,
+  .navbar-nav > .open > a:hover {
+    color: $color-nav-links;
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  .navbar-primary > li > a {
+    border: 0;
+  }
+
+  .navbar-primary > .active > a,
+  .navbar-primary > .active > a:focus,
+  .navbar-primary > .active > a:hover {
+    color: $color-nav-links;
+    background-color: $color-nav-links-hover;
+    border: 0;
+  }
+
+  .navbar-utility .fa,
+  .navbar-utility a {
+    font-size: 1.1em;
+  }
+
+  .navbar-utility > .active > a {
+    color: $color-nav-links;
+    background-color: $color-nav-links-hover;
+  }
+
+  .navbar-utility > li > .open > a,
+  .navbar-utility > li > .open > a:focus,
+  .navbar-utility > li > .open > a:hover {
+    color: $color-nav-links;
+    border-color: transparent;
+    background-color: transparent;
+  }
+  @media (min-width: 768px) {
+    .navbar-primary > li > a {
+      border-bottom: 4px solid transparent;
+    }
+
+    .navbar-primary > .active > a,
+    .navbar-primary > .active > a:focus,
+    .navbar-primary > .active > a:hover {
+      background-color: transparent;
+      border-bottom: 4px solid $color-nav-bottom-bar;
+    }
+
+    .navbar-utility {
+      border-bottom: 0;
+      font-size: 11px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  @media (max-width: 767px) {
+    .navbar-nav {
+      margin: 0;
+    }
+
+    .navbar-collapse,
+    .navbar-form {
+      border-color: $color-nav-collapse-border;
+    }
+
+    .navbar-collapse {
+      padding: 0;
+    }
+
+    .navbar-nav .open .dropdown-menu {
+      padding-top: 0;
+      padding-bottom: 0;
+      background-color: $color-nav-open-bg;
+    }
+
+    .navbar-nav .open .dropdown-menu .dropdown-header,
+    .navbar-nav .open .dropdown-menu > li > a {
+      padding: 5px 15px 5px 35px;
+    }
+
+    .navbar-nav .open .dropdown-menu > li > a {
+      color: $color-nav-links;
+    }
+
+    .navbar-nav .open .dropdown-menu > .active > a {
+      color: $color-nav-links;
+      background-color: $color-nav-active-link-bg;
+    }
+
+    .navbar-nav > li > a:hover {
+      background-color: $color-nav-active-link-bg;
+    }
+
+    .navbar-utility {
+      border-top: 1px solid $color-nav-border-top-collapse;
+    }
+
+    .navbar-primary > .active > a,
+    .navbar-primary > .active > a:focus,
+    .navbar-primary > .active > a:hover {
+      background-color: $color-nav-active-link-bg;
+    }
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/not-found/not-found.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/not-found/not-found.component.scss
index e94d9f2fb82c..b5feb65f77dd 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/not-found/not-found.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/not-found/not-found.component.scss
@@ -2,10 +2,6 @@ h1 {
   font-size: -webkit-xxx-large;
 }
 
-h2 {
-  font-size: xx-large;
-}
-
 *{
   font-family: monospace;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
index f4c09854f0d2..945fd6f81bbf 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
@@ -5,5 +5,3 @@
 .error-panel-alert-title {
   font-weight: bold;
 }
-.error-panel-alert-text {
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
index a26cbbb8a14a..d91a9c954a36 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
@@ -1,6 +1,6 @@
 @import '../../../../defaults';
 
 i {
-  color: $oa-color-blue;
+  color: $color-helper-bg;
   cursor: pointer;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/info-panel/info-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/info-panel/info-panel.component.scss
index 1d53f2f34e92..27c0e3218d54 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/info-panel/info-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/info-panel/info-panel.component.scss
@@ -5,5 +5,3 @@
 .info-panel-alert-title {
   font-weight: bold;
 }
-.info-panel-alert-text {
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
index 2c9ad571c1e6..6222bb19a142 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
@@ -1,14 +1,11 @@
-@mixin hf {
-  border-bottom: 1px solid #cccccc;
-  background-color: #f5f5f5;
-}
+@import '../../../../defaults';
 
 .modal-header {
   @include hf;
   border-radius: 5px 5px 0 0;
 }
 
-.modal-footer {
+::ng-deep .modal-footer {
   @include hf;
   border-radius: 0 0 5px 5px;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 036c6bbc8e19..11d4a83b23d9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -4,7 +4,7 @@
   margin-bottom: 25px;
   .separator {
     height: 30px;
-    border-left: 1px solid rgba(0,0,0,.09);
+    border-left: 1px solid $color-table-seperator-border;
     padding-left: 5px;
     margin-left: 5px;
     display: inline-block;
@@ -17,7 +17,7 @@
     height: 30px;
     line-height: 28px;
     position: relative;
-    border-left: 1px solid rgba(0,0,0,.09);
+    border-left: 1px solid $color-table-seperator-border;
     cursor: pointer;
     padding: 0 8px;
     text-align: center;
@@ -33,7 +33,7 @@
         padding-right: 20px;
         cursor: pointer;
         &:hover {
-          background-color: #f5f5f5;
+          background-color: $color-table-dropdown-bg;
         }
         & > input {
           cursor: pointer;
@@ -50,8 +50,8 @@
   }
 }
 .dataTables_header {
-  background-color: #f6f6f6;
-  border: 1px solid #d1d1d1;
+  background-color: $color-table-header-bg;
+  border: 1px solid $color-table-header-border;
   border-bottom: none;
   padding: 5px;
   position: relative;
@@ -63,10 +63,10 @@
   }
   .input-group {
     float: right;
-    border-left: 1px solid rgba(0,0,0,.09);
+    border-left: 1px solid $color-table-input-border;
     padding-left: 8px;
     width: 40%;
-    max-width: 350px;
+    max-width: 250px;
     .form-control {
       height: 30px;
     }
@@ -85,7 +85,7 @@
 }
 
 ::ng-deep .oadatatable {
-  border: $border-color;
+  border:1px solid $color-table-header-border;
   margin-bottom: 0;
   max-width: none !important;
   .progress-linear {
@@ -96,14 +96,14 @@
     padding: 0;
     margin: 0;
     .container {
-      background-color: $oa-color-light-blue;
+      background-color: $color-table-active-row;
       .bar {
         left: 0;
         height: 100%;
         width: 100%;
         position: absolute;
         overflow: hidden;
-        background-color: $oa-color-light-blue;
+        background-color: $color-table-active-row;
       }
       .bar:before{
         display: block;
@@ -112,21 +112,21 @@
         left: -200px;
         width: 200px;
         height: 100%;
-        background-color: $oa-color-blue;
+        background-color: $color-table-progress-bar-active;
         animation: progress-loading 3s linear infinite;
       }
     }
   }
   .datatable-header {
     background-clip: padding-box;
-    background-color: #f9f9f9;
-    background-image: -webkit-linear-gradient(top,#fafafa 0,#ededed 100%);
-    background-image: -o-linear-gradient(top,#fafafa 0,#ededed 100%);
-    background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
+    background-color: $color-table-datatable-header;
+    background-image: -webkit-linear-gradient(top,$color-table-gradient-1 0,$color-table-gradient-2 100%);
+    background-image: -o-linear-gradient(top,$color-table-gradient-1 0,$color-table-gradient-2 100%);
+    background-image: linear-gradient(to bottom,$color-table-gradient-1 0,$color-table-gradient-2 100%);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
     .sort-asc, .sort-desc {
-      color: $oa-color-blue;
+      color: $color-table-sort;
     }
     .datatable-header-cell{
       @include table-cell;
@@ -164,7 +164,7 @@
   }
   .datatable-body {
     .empty-row {
-      background-color: $warning-background-color;
+      background-color: $color-table-empty-row;
       text-align: center;
       font-weight: bold;
       font-style: italic;
@@ -173,19 +173,19 @@
     }
     .datatable-body-row {
       &.clickable:hover .datatable-row-group {
-        background-color: #eee;
+        background-color: $color-table-hover-row ;
         transition-property: background;
         transition-duration: .3s;
         transition-timing-function: linear;
       }
       &.datatable-row-even {
-        background-color: #ffffff;
+        background-color: $color-table-even-row-bg;
       }
       &.datatable-row-odd {
-        background-color: #f6f6f6;
+        background-color: $color-table-odd-row-bg;
       }
       &.active, &.active:hover {
-        background-color: $bg-color-light-blue;
+        background-color: $color-table-active-row-hover;
       }
       .datatable-body-cell{
         @include table-cell;
@@ -220,10 +220,10 @@
           border: none;
         }
         a:hover {
-          background-color: $oa-color-light-blue;
+          background-color: $color-table-active-row;
         }
         &.active > a {
-          background-color: $bg-color-light-blue;
+          background-color: $color-table-active-row-hover;
         }
       }
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
index 8e25b71e2806..9780b546a7e3 100644
--- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
@@ -1,11 +1,132 @@
-$warning-background-color: #fff3cd;
-$oa-color-blue: #288cea;
-$oa-color-light-blue: #afd9ee;
-$bg-color-light-blue: #d9edf7;
-$border-color: 1px solid #d1d1d1;
+/*The file suppose to contain all variables, mixins and extends*/
+
+$color-solid-red: #ff0000;
+$color-pink: #a94442;
+$color-light-red: #f2dede;
+
+$color-orange: #ff6600;
+
+$color-bright-yellow: #ffc200;
+$color-light-yellow: #fff3cd;
+
+$color-bright-green: #00bb00;
+$color-green: #71843f;
+
+$color-darker-blue: #2172bf;
+$color-dark-blue: #2582D9;
+$color-blue: #288cea;
+$color-light-blue: #d9edf7;
+$color-sky-blue: #afd9ee;
+
+$color-black: #000;
+$color-transparent-black: rgba(0, 0, 0, 0.7);
+$color-solid-gray: #555555;
+$color-dark-gray: #474544;
+$color-gray: #505050;
+$color-mild-gray: #777777;
+$color-blue-gray: #90949c;
+$color-grad-gray: #ededed;
+$color-light-gray: #d1d1d1;
+$color-white-gray: #eee;
+$color-off-white: #f5f5f5;
+$color-solid-white: #ffffff;
+$color-transparent: rgba(0,0,0,.09);
+
+$color-app-bg: $color-solid-white;
+$color-bg-darken: $color-dark-gray;
+$color-links: $color-blue;
+$color-links-focus: $color-dark-gray;
+$color-breadcrumb: $color-dark-gray;
+$color-button-text: $color-white-gray;
+$color-button: $color-blue;
+$color-button-hover: $color-dark-blue;
+$color-button-border: $color-darker-blue;
+$color-button-badge: $color-white-gray;
+$color-button-caret: $color-white-gray;
+$color-dropdown-menu: $color-dark-gray;
+$color-dropdown-active-text: $color-white-gray;
+$color-dropdown-active-bg: $color-blue;
+$color-caret-text: $color-blue;
+$color-progress-bar-info-bg: $color-blue;
+$color-progress-bar-freespace-bg: $color-light-gray;
+$color-oaprogress-text: $color-black;
+$color-tags-border: $color-light-gray;
+$color-tags-box-shadow: $color-transparent;
+$color-error-btn-bg: $color-light-red;
+$color-error-btn-border: $color-pink;
+$color-noscript-text: $color-mild-gray;
+$color-required-text: $color-pink;
+
+/*Login*/
+$color-login-row-text: $color-solid-white;
+$color-login-row-bg: $color-dark-gray;
+$color-password-toggle-text: $color-solid-white;
+$color-password-toggle-bg: $color-solid-gray;
+$color-password-toggle-focus: $color-blue;
+$color-login-checkbox-bg: $color-blue;
+$color-login-checkbox-border: $color-blue;
+$color-login-active-row-bg: $color-light-yellow;
+$color-login-active-row-text: $color-black;
+
+/*Navigation*/
+$color-navbar-bg: $color-dark-gray;
+$color-navbar-brand: $color-white-gray;
+$color-nav-top-bar: $color-blue;
+$color-nav-bottom-bar: $color-blue;
+$color-nav-toggle-bar: $color-white-gray;
+$color-nav-toggle-shadow: $color-solid-white;
+$color-nav-collapse-border: $color-white-gray;
+$color-nav-open-bg: $color-gray;
+$color-nav-links: $color-white-gray;
+$color-nav-links-hover: $color-gray;
+$color-nav-active-link-bg: $color-blue;
+$color-nav-border-top-collapse: $color-white-gray;
+
+/*Helper*/
+$color-helper-bg: $color-blue;
+
+/*Table*/
+$color-table-seperator-border: $color-transparent;
+$color-table-input-border: $color-transparent;
+$color-table-dropdown-bg: $color-off-white;
+$color-table-header-bg: $color-off-white;
+$color-table-header-border: $color-light-gray;
+$color-table-active-row: $color-sky-blue;
+$color-table-active-row-hover: $color-light-blue;
+$color-table-progress-bar-bg: $color-sky-blue;
+$color-table-progress-bar-active: $color-blue;
+$color-table-gradient-1: $color-off-white;
+$color-table-gradient-2: $color-grad-gray;
+$color-table-sort: $color-blue;
+$color-table-empty-row: $color-light-yellow;
+$color-table-hover-row: $color-white-gray;
+$color-table-even-row-bg: $color-solid-white;
+$color-table-odd-row-bg: $color-off-white;
+$color-table-datatable-header: $color-off-white;
+
+/*Chart tooltip*/
+$color-chart-tooltip-bg: $color-transparent-black;
+$color-chat-tooltip-text: $color-solid-white;
+$color-chart-tooltip-border: $color-black;
+
+/*Popover*/
+$color-popover-seperator-text: $color-blue-gray;
+$color-popover-seperator-bg: $color-white-gray;
+$color-popover-message-text: $color-dark-gray;
+$color-popover-table-text: $color-dark-gray;
+$color-popover-date: $color-solid-gray;
+
+/*RGW user form*/
+$color-rgw-icon: $color-blue-gray;
+
 @mixin table-cell {
   padding: 5px;
   border: none;
-  border-left: $border-color;
-  border-bottom: $border-color;
+  border-left: 1px solid $color-light-gray;
+  border-bottom: 1px solid $color-light-gray;
+}
+
+@mixin hf {
+  border-bottom: 1px solid $color-light-gray;
+  background-color: $color-off-white;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss b/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss
deleted file mode 100755
index 562a627cd1cf..000000000000
--- a/src/pybind/mgr/dashboard/frontend/src/openattic-theme.scss
+++ /dev/null
@@ -1,1140 +0,0 @@
-/*
-  Basics
-  Branding
-  Breadcrumb
-  Buttons
-  Dropdown
-  Grid
-  Modal Table (Task Queue)
-  Navbar
-  Navs
-  Notifications
-  Pagination
-  Panel
-  Table
-  Typo
-
-  Login
-  Statistics
-
-  ApiRecorder
-  Caret
-  Datatables
-  Feedback
-  FlexElement
-  Grafana
-  Graph
-  Progressbar
-  TagForm
-  Trees
-  CSS Fix
-*/
-
-@import 'defaults';
-
-$fa-font-path: "../node_modules/fork-awesome/fonts";
-@import "../node_modules/fork-awesome/scss/fork-awesome";
-
-/* Basics */
-html {
-  background-color: #ffffff;
-}
-html,
-body {
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-}
-optgroup {
-  font-weight: bold;
-  font-style: italic;
-}
-option {
-  font-weight: normal;
-  font-style: normal;
-}
-.full-height {
-  height: 100%;
-}
-.vertical-align {
-  display: flex;
-  align-items: center;
-}
-.loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-}
-.bg-color-darken {
-  background-color: #404040!important;
-}
-.bg-color-greenLight {
-  background-color: #71843f!important;
-}
-.bg-color-red {
-  background-color: #a90329!important;
-}
-.no-margin {
-  margin: 0;
-}
-.margin-left-md {
-  margin-left: 15px
-}
-.margin-right-md {
-  margin-right: 15px
-}
-.margin-right-sm {
-  margin-right: 10px
-}
-.margin-bottom-md {
-  margin-bottom: 15px
-}
-.no-padding {
-  padding: 0;
-}
-.small-padding {
-  padding: 5px;
-}
-.no-border {
-  border: 0px;
-  box-shadow: 0px 0px 0px !important;
-}
-.no-wrap {
-  white-space: nowrap;
-}
-.strikethrough {
-  text-decoration: line-through;
-}
-.italic {
-  font-style: italic;
-}
-.bold {
-  font-weight: bold;
-}
-.text-right {
-  text-align: right;
-}
-.text-monospace {
-  font-family: monospace;
-}
-
-/* Branding */
-.navbar-openattic .navbar-brand,
-.navbar-openattic .navbar-brand:hover{
-  color: #ececec;
-  height: auto;
-  margin: 15px 0 15px 20px;
-  padding: 0;
-  -webkit-align-self: flex-start;
-  align-self: flex-start;
-}
-.navbar-openattic .navbar-brand>img {
-  height: 25px;
-}
-
-/* Breadcrumb */
-.breadcrumb {
-  padding: 8px 0;
-  background-color: transparent;
-  border-radius: 0;
-}
-.breadcrumb>li+li:before {
-  padding: 0 5px 0 7px;
-  color: #474544;
-  font-family: "ForkAwesome";
-  content: "\f101";
-}
-.breadcrumb>li>span {
-  color: #474544;
-}
-
-/* Buttons */
-.btn-openattic {
-  color: #ececec;
-  background-color: $oa-color-blue;
-  border-color: $oa-color-blue;
-}
-.btn-primary {
-  color: #ececec;
-  background-color: $oa-color-blue;
-  border-color: #2172bf;
-}
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary.active,
-.open .dropdown-toggle.btn-primary {
-  color: #ececec;
-  background-color: #2582D9;
-  border-color: #2172bf;
-}
-.btn-primary:active,
-.btn-primary.active,
-.open .dropdown-toggle.btn-primary {
-  background-image: none;
-}
-.btn-primary.disabled,
-.btn-primary[disabled],
-fieldset[disabled] .btn-primary,
-.btn-primary.disabled:hover,
-.btn-primary[disabled]:hover,
-fieldset[disabled] .btn-primary:hover,
-.btn-primary.disabled:focus,
-.btn-primary[disabled]:focus,
-fieldset[disabled] .btn-primary:focus,
-.btn-primary.disabled:active,
-.btn-primary[disabled]:active,
-fieldset[disabled] .btn-primary:active,
-.btn-primary.disabled.active,
-.btn-primary[disabled].active,
-fieldset[disabled] .btn-primary.active {
-  background-color: $oa-color-blue;
-  border-color: #2172bf;
-}
-.btn-primary .badge {
-  color: $oa-color-blue;
-  background-color: #ececec;
-}
-.btn-primary .caret {
-  color: #ececec;
-}
-.btn-group>.btn>i.fa,
-button.btn.btn-label>i.fa {
-  /** Add space between icon and text */
-  padding-right: 5px;
-}
-
-/* Dropdown */
-.dropdown-menu {
-  min-width: 50px;
-}
-.dropdown-menu>li>a {
-  color: #474544;
-  cursor: pointer;
-}
-.dropdown-menu>li>a>i.fa {
-  /** Add space between icon and text */
-  padding-right: 5px;
-}
-.dropdown-menu>.active>a {
-  color: #ececec;
-  background-color: $oa-color-blue;
-}
-.dataTables_wrapper .dropdown-menu>li.divider {
-  cursor: auto;
-}
-
-/* Grid */
-.container,
-.container-fluid {
-  padding-left: 30px;
-  padding-right: 30px;
-}
-.row {
-  margin-left: -30px;
-  margin-right: -30px;
-}
-.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
-.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
-.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
-.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-
-/* Modal Table (Task Queue) */
-table.task-queue-table thead {
-  display: flex;
-  flex-flow: row;
-}
-table.task-queue-table thead tr {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-}
-table.task-queue-table tbody {
-  display: flex;
-  flex-flow: row wrap;
-}
-table.task-queue-table tbody tr {
-  display: flex;
-  width: 100%
-}
-table.task-queue-table > * > tr > * {
-  flex: 1;
-}
-table.task-queue-table > * > tr > .oadatatablecheckbox {
-  flex: 0;
-}
-div.task-queue-modal-content {
-  height: 40em;
-}
-div.openattic-modal-content div.modal-scroll {
-  max-height: 26em;
-  overflow: auto;
-  border-bottom: 1px solid #e1e1e1;
-}
-div.task-queue-modal-content div.dataTables_wrapper {
-  margin-bottom: 0;
-}
-div.task-queue-modal-content div.dataTables_wrapper th.oadatatablecheckbox {
-  width: 100%;
-}
-div.task-queue-modal-content div.dataTables_wrapper div.widget-toolbar.tc_refreshBtn{
-  width: 36px;
-}
-ul.task-queue-pagination {
-  display: table;
-  margin: auto;
-  padding-top: 10px;
-}
-
-/* Navbar */
-.navbar-openattic {
-  margin-bottom: 0;
-  background: #474544;
-  border: 0;
-  border-radius: 0;
-  border-top: 4px solid $oa-color-blue;
-  font-size: 1.2em;
-}
-.navbar-openattic .navbar-header {
-  display: flex;
-  float: none;
-}
-.navbar-openattic .navbar-toggle {
-  margin-left: auto;
-  border: 0;
-}
-.navbar-openattic .navbar-toggle:focus,
-.navbar-openattic .navbar-toggle:hover {
-  background-color: transparent;
-  outline: 0;
-}
-.navbar-openattic .navbar-toggle .icon-bar {
-  background-color: #ececec;
-}
-.navbar-openattic .navbar-toggle:focus .icon-bar,
-.navbar-openattic .navbar-toggle:hover .icon-bar {
-  -webkit-box-shadow: 0 0 3px #fff;
-  box-shadow: 0 0 3px #fff;
-}
-.navbar-openattic .navbar-collapse {
-  padding: 0;
-}
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>ul>li>.dropdown-item {
-  font-size: 12px;
-}
-.navbar-openattic .navbar-nav>li>a,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a,
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a {
-  color: #ececec;
-  line-height: 1;
-  padding: 10px 17px;
-  position: relative;
-  display: block;
-  text-decoration: none;
-}
-.navbar-openattic .navbar-nav>li>a:focus,
-.navbar-openattic .navbar-nav>li>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a:focus,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:focus,
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:hover {
-  color: #ececec;
-}
-.navbar-openattic .navbar-nav>li>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown]>a:hover,
-.navbar-openattic .navbar-nav>li>.oa-navbar>[dropdown].open>a {
-  background-color: #505050;
-}
-.navbar-openattic .navbar-nav>li a.dropdown-toggle span.caret {
-  margin-left: 5px;
-}
-.navbar-openattic .navbar-nav>.open>a,
-.navbar-openattic .navbar-nav>.open>a:hover,
-.navbar-openattic .navbar-nav>.open>a:focus,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>a,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>a:hover,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>a:focus,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>[dropdown]>a,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>[dropdown]>a:hover,
-.navbar-openattic .navbar-nav>.open>.oa-navbar>li>a:focus {
-  color: #ececec;
-  border-color: transparent;
-  background-color: transparent;
-}
-.navbar-openattic .navbar-primary>li>a {
-  border: 0;
-}
-.navbar-openattic .navbar-primary>.active>a,
-.navbar-openattic .navbar-primary>.active>a:hover,
-.navbar-openattic .navbar-primary>.active>a:focus {
-  color: #ececec;
-  background-color: $oa-color-blue;
-  border: 0;
-}
-.navbar-openattic .navbar-utility a,
-.navbar-openattic .navbar-utility .fa{
-  font-size: 1.1em;
-}
-.navbar-openattic .navbar-utility>.active>a {
-  color: #ececec;
-  background-color: #505050;
-}
-.navbar-openattic .navbar-utility>li>.open>a,
-.navbar-openattic .navbar-utility>li>.open>a:hover,
-.navbar-openattic .navbar-utility>li>.open>a:focus {
-  color: #ececec;
-  border-color: transparent;
-  background-color: transparent;
-}
-@media (min-width: 768px) {
-  .navbar-openattic .navbar-primary>li>a {
-    border-bottom: 4px solid transparent;
-  }
-  .navbar-openattic .navbar-primary>.active>a,
-  .navbar-openattic .navbar-primary>.active>a:hover,
-  .navbar-openattic .navbar-primary>.active>a:focus {
-    background-color: transparent;
-    border-bottom: 4px solid $oa-color-blue;
-  }
-  .navbar-openattic .navbar-utility {
-    border-bottom: 0;
-    font-size: 11px;
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-@media (max-width: 767px) {
-  .navbar-openattic .navbar-nav {
-    margin: 0;
-  }
-  .navbar-openattic .navbar-collapse,
-  .navbar-openattic .navbar-form {
-    border-color: #ececec;
-  }
-  .navbar-openattic .navbar-collapse {
-    padding: 0;
-  }
-  .navbar-nav .open .dropdown-menu {
-    padding-top: 0;
-    padding-bottom: 0;
-    background-color: #505050;
-  }
-  .navbar-nav .open .dropdown-menu .dropdown-header,
-  .navbar-nav .open .dropdown-menu>li>a {
-    padding: 5px 15px 5px 35px;
-  }
-  .navbar-openattic .navbar-nav .open .dropdown-menu>li>a {
-    color: #ececec;
-  }
-  .navbar-openattic .navbar-nav .open .dropdown-menu>.active>a {
-    color: #ececec;
-    background-color: $oa-color-blue;
-  }
-  .navbar-openattic .navbar-nav>li>a:hover {
-    background-color: $oa-color-blue;
-  }
-  .navbar-openattic .navbar-utility {
-    border-top: 1px solid #ececec;
-  }
-  .navbar-openattic .navbar-primary>.active>a,
-  .navbar-openattic .navbar-primary>.active>a:hover,
-  .navbar-openattic .navbar-primary>.active>a:focus {
-    background-color: $oa-color-blue;
-  }
-}
-
-/* Navs */
-.nav-tabs {
-  margin-bottom: 15px;
-}
-.nav-tabs-openattic {
-  margin-top: -15px;
-  margin-bottom: 15px;
-}
-.nav-tabs-openattic>li>a {
-  padding: 7px 15px 4px 15px;
-}
-.nav-tabs-openattic>li.active>a,
-.nav-tabs-openattic>li.active>a:active,
-.nav-tabs-openattic>li.active>a:focus,
-.nav-tabs-openattic>li.active>a:hover {
-  border: 0!important;
-  border-bottom: 3px solid $oa-color-blue!important;
-}
-
-/* Notifications */
-#toasty .toast.toasty-theme-bootstrap {
-  opacity: 1
-}
-
-/* Pagination */
-.pagination {
-  display: block;
-  margin: 0;
-}
-.pagination>.disabled>a,
-.pagination>.disabled>a:focus,
-.pagination>.disabled>a:hover,
-.pagination>.disabled>span,
-.pagination>.disabled>span:focus,
-.pagination>.disabled>span:hover {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  cursor: not-allowed;
-  background-image: -webkit-linear-gradient(top,#fafafa 0,#ededed 100%);
-  background-image: -o-linear-gradient(top,#fafafa 0,#ededed 100%);
-  background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
-}
-.pagination>.active>a,
-.pagination>.active>a:focus,
-.pagination>.active>a:hover,
-.pagination>.active>span,
-.pagination>.active>span:focus,
-.pagination>.active>span:hover,
-.pagination>.disabled>a,
-.pagination>.disabled>a:focus,
-.pagination>.disabled>a:hover,
-.pagination>.disabled>span,
-.pagination>.disabled>span:focus,
-.pagination>.disabled>span:hover,
-.pagination>li>a,
-.pagination>li>span,
-.panel-group
-.panel-heading {
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
-}
-.pagination>li>a,
-.pagination>li>span {
-  background-color: #eee;
-  background-image: -webkit-linear-gradient(top,#fafafa 0,#ededed 100%);
-  background-image: -o-linear-gradient(top,#fafafa 0,#ededed 100%);
-  background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
-  border-color: #b7b7b7;
-  color: #4d5258;
-  cursor: pointer;
-  font-weight: 600;
-  padding: 2px 10px;
-}
-.pagination>.active>span,
-.pagination>.active>span:focus,
-.pagination>.active>span:hover {
-  color: $oa-color-blue;
-  border-color: #fff #e1e1e1 #f4f4f4;
-  border-width: 0 1px;
-}
-
-/* Panel */
-.panel .panel-toolbar {
-  float: right;
-}
-.panel .panel-toolbar div {
-  display: inline-block;
-}
-.panel .panel-toolbar>a,
-.panel .panel-toolbar>.dropdown>a {
-  padding-left: 5px;
-}
-.panel .panel-footer > .button-group button.btn:not(:first-child) {
-  margin-left: 5px;
-}
-.panel-dashboard {
-  height: 100%;
-  padding-top: 60px;
-}
-.panel-dashboard>.panel-heading {
-  cursor: move;
-  position: relative;
-  margin-top: -60px;
-  width: 100%;
-}
-.panel-dashboard>.panel-heading>.panel-title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-}
-.panel-dashboard>.panel-heading>.toolbar a {
-  text-decoration: none;
-}
-.panel-dashboard>.panel-body {
-  height: 100%;
-  overflow: auto;
-}
-.panel-dashboard>.panel-body .indent {
-  margin-top: 10px;
-  margin-left: 10px;
-}
-.panel-dashboard .overlay {
-  position: absolute;
-  bottom: 5px;
-  right: 5px;
-  z-index: 10;
-}
-.panel-dashboard .max-height {
-  height: 100%;
-}
-.panel-dashboard .max-height.alert-is-shown {
-  height: 85%;
-}
-.panel-dashboard .fa-2x{
-  vertical-align: middle;
-  margin-right: 0.5em;
-}
-.panel-dashboard .alert.bottom-margin-zero {
-  margin-bottom: 0;
-}
-
-/* Typo */
-a {
-  color: $oa-color-blue;
-}
-a:hover,
-a:focus{
-  color: #474544;
-}
-h1 {
-  letter-spacing: -1px;
-  font-size: 2em;
-}
-h2 {
-  letter-spacing: -1px;
-  font-size: 1.833em;
-}
-h3{
-  display: block;
-  font-size: 1.583em;
-  font-weight: 400;
-}
-h3.sub-title {
-  color: #666666;
-  margin-left: 15px;
-}
-h4{
-  font-size: 1.5em;
-  line-height: normal
-}
-h5{
-  font-size: 1.417em;
-  font-weight: 300;
-  line-height: normal;
-}
-h6{
-  font-size: 1.25em;
-  font-weight: 700;
-  line-height: normal;
-}
-
-/*************************************************************/
-
-/* Statistics */
-.statistics-content {
-  margin: 0 -20px;
-}
-
-/*************************************************************/
-
-/* ApiRecorder */
-.apirecorder {
-  resize: none;
-  width:100%;
-}
-.apirecorder-enabled {
-  color: red;
-}
-
-/* Caret */
-.caret {
-  color: $oa-color-blue;
-}
-
-/* Feedback */
-#feedback .feedback-button {
-  position: fixed;
-  top: 50%;
-  right: 0;
-  padding: 2px 16px;
-  cursor: pointer;
-  color: #ffffff;
-  font-size: 1.2em;
-  font-weight: 700;
-  background-color: $oa-color-blue;
-  border-radius: 5px 5px 0 0;
-  z-index: 99999;
-}
-#feedback .feedback-button:hover {
-  background-color: #2172bf;
-}
-#feedback .feedback-button-transform {
-  -webkit-transform: rotate(-90deg) translate(50%, -100%);
-  -moz-transform: rotate(-90deg) translate(50%, -100%);
-  -ms-transform: rotate(-90deg) translate(50%, -100%);
-  -o-transform: rotate(-90deg) translate(50%, -100%);
-  transform: rotate(-90deg) translate(50%, -100%);
-  -webkit-transform-origin: top right;
-  -moz-transform-origin: top right;
-  -ms-transform-origin: top right;
-  -o-transform-origin: top right;
-  transform-origin: top right;
-}
-#feedback .feedback-button-active {
-  right: 299px;
-}
-#feedback .feedback-button .fa,
-#feedback .feedback-button .glyphicon{
-  padding-right: 6px;
-}
-#feedback .feedback-panel {
-  position: fixed;
-  top: 0;
-  right: -300px;
-  padding: 20px;
-  width: 300px;
-  height: 100%;
-  background-color: #ffffff;
-  border-left: 5px solid $oa-color-blue;
-  z-index: 99999;
-  overflow-y: auto;
-}
-#feedback .feedback-panel-active {
-  right: 0;
-}
-#feedback .feedback-transition {
-  transition: right 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
-}
-
-/* FlexElement */
-/* Container */
-.flex-container {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-.flex-wrap {
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-.flex-nowrap {
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-}
-.flex-row {
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.flex-column {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-/* Items */
-.flex-item {
-  margin-bottom: 10px;
-  padding: 15px;
-}
-.flex-item-1 { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; padding: 0 10px; }
-.flex-item-2 { -webkit-flex: 2; -moz-flex: 2; -ms-flex: 2; flex: 2; padding: 0 10px; }
-.flex-item-3 { -webkit-flex: 3; -moz-flex: 3; -ms-flex: 3; flex: 3; padding: 0 10px; }
-.flex-item-4 { -webkit-flex: 4; -moz-flex: 4; -ms-flex: 4; flex: 4; padding: 0 10px; }
-.flex-item-5 { -webkit-flex: 5; -moz-flex: 5; -ms-flex: 5; flex: 5; padding: 0 10px; }
-.flex-item-6 { -webkit-flex: 6; -moz-flex: 6; -ms-flex: 6; flex: 6; padding: 0 10px; }
-.flex-item-7 { -webkit-flex: 7; -moz-flex: 7; -ms-flex: 7; flex: 7; padding: 0 10px; }
-.flex-item-8 { -webkit-flex: 8; -moz-flex: 8; -ms-flex: 8; flex: 8; padding: 0 10px; }
-.flex-item-9 { -webkit-flex: 9; -moz-flex: 9; -ms-flex: 9; flex: 9; padding: 0 10px; }
-
-/* Grafana */
-.grafana-container {
-  margin-top: 20px;
-  height: 64px;
-  background:url(./assets/loading.gif) center center no-repeat;
-}
-.grafana {
-  width: 100%;
-  min-height: 600px;
-}
-
-/* Progressbar */
-.progress-bar {
-  background-image: none !important;
-}
-.progress-bar-info {
-  background-color: $oa-color-blue;
-}
-.progress-bar-freespace {
-  background-color: #ddd;
-}
-.progress-bar-stolenspace {
-  background-color: #aaa;
-}
-.progress-bar-outer{
-  margin-top: 5px !important;
-}
-.progress-bar-outer div {
-  border-radius: 31px;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  box-shadow: 0 0 0 0;
-  -webkit-box-shadow: 0 0 0 0;
-  -moz-box-shadow: 0 0 0 0;
-  margin: 0;
-  height: 16px;
-}
-.progress-bar-outer div div {
-  background-color: #0091d9;
-}
-.progress-bar-outer div div span {
-  position: relative;
-  top: -3px;
-}
-.oaprogress {
-  position: relative;
-  margin-bottom: 0;
-}
-.oaprogress div.progress-bar {
-  position: static;
-}
-.oaprogress span {
-  position: absolute;
-  display: block;
-  width: 100%;
-  color: black;
-  font-weight: normal;
-}
-
-tags-input .tags {
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-}
-
-/* TagForm */
-.tag-form label {
-  display: block;
-  margin-bottom: 6px;
-  line-height: 19px;
-  font-weight: 400;
-  font-size: 13px;
-  color: #333;
-  text-align: left;
-  white-space: normal;
-}
-
-/* Trees */
-.tree {
-  min-height: 20px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-.tree>ul {
-  padding-left: 0;
-}
-.tree ul ul {
-  padding-left: 34px;
-  padding-top: 10px;
-}
-.tree li {
-  list-style-type: none;
-  margin: 0;
-  padding: 5px;
-  position: relative;
-}
-.tree li span {
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border: 1px dotted #999;
-  border-radius: 5px;
-  display: inline-block;
-  padding: 3px 8px;
-  text-decoration: none;
-  -webkit-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
-  -moz-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
-  -o-transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
-  transition: color .2s ease .1s,background-color .2s ease .1s,border-color .3s ease .2s;
-}
-.tree>ul>li::after,
-.tree>ul>li:before {
-  border: 0;
-}
-.tree li:after,
-.tree li:before {
-  content: '';
-  left: -20px;
-  position: absolute;
-  right: auto;
-}
-.tree li:before {
-  border-left: 1px solid #999;
-  bottom: 50px;
-  height: 100%;
-  top: -11px;
-  width: 1px;
-  -webkit-transition: "border-color 0.1s ease 0.1s";
-  -moz-transition: "border-color 0.1s ease 0.1s";
-  -o-transition: "border-color 0.1s ease 0.1s";
-  transition: "border-color 0.1s ease 0.1s";
-}
-.tree li:after {
-  border-top: 1px solid #999;
-  height: 20px;
-  top: 18px;
-  width: 25px;
-}
-.tree li:last-child::before {
-  height: 30px;
-}
-
-.scrollable-menu {
-  height: auto;
-  max-height: 200px;
-  overflow-x: hidden;
-}
-
-.toggle, .toggle-on, .toggle-off {
-  border-radius: 20px;
-}
-
-.toggle .toggle-handle {
-  border-radius: 20px;
-}
-
-/* CSS Fix */
-a {
-  cursor: pointer;
-}
-form .input-group-addon {
-  color: #a2a2a2 !important;
-  background-color: transparent;
-}
-uib-accordion .panel-title,
-.panel .accordion-title {
-  font-size: 14px !important;
-}
-.panel-body h2:first-child {
-  margin-top: 0;
-}
-.actions {
-  padding-bottom: 10px;
-}
-.pull-left {
-  float: left;
-}
-.code-clogs {
-  display: block;
-  padding: 9px;
-  margin: 0 0 10px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  color: #333;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-}
-.degree-sign:after {
-  content: "\00B0 C"!important;
-}
-.formactions.well {
-  overflow: auto;
-  padding: 10px 20px;
-}
-.disabled {
-  pointer-events: none;
-}
-.clickable {
-  cursor: pointer;
-}
-.non-clickable {
-  cursor: initial;
-}
-.locked {
-  cursor: default!important;
-}
-.list-nomargin {
-  margin: 0;
-}
-
-.has-error .has-error-btn {
-  background-color: #f2dede;
-  border-color: #a94442;
-}
-
-.has-error .has-error-btn:disabled:hover {
-  background-color: #f2dede;
-  border-color: #a94442;
-}
-
-/* If javascript is disabled. */
-.noscript {
-  padding-top: 5em;
-}
-.noscript p {
-  color: #777;
-}
-
-/* Notifications */
-
-.notification div.img-circle {
-  width: 50px;
-  height: 50px;
-  position: relative;
-}
-.notification.info div.img-circle {
-  background-color: #5bc0de;
-}
-.notification.error div.img-circle {
-  background-color: #d9534f;
-}
-.notification.success div.img-circle {
-  background-color: #5cb85c;
-}
-.notification.warning div.img-circle {
-  background-color: #f0ad4e;
-}
-
-.notification .icon {
-  background-repeat: no-repeat;
-  background-image: url('./assets/notification-icons.png') !important;
-  height: 36px;
-  width: 36px;
-  position: absolute;
-  margin: 7px;
-}
-.notification.info .icon {
-  background-position: -36px 0;
-}
-.notification.error .icon {
-  background-position: -108px 0;
-}
-.notification.success .icon {
-  background-position: 0 0;
-}
-.notification.warning .icon {
-  background-position: -72px 0;
-}
-
-.required {
-  color: #d04437;
-}
-
-.page-footer {
-  font-size: 12px;
-  color: #777;
-  text-align: center;
-  margin-left: 150px;
-  margin-right: 150px;
-  margin-top: 50px;
-  margin-bottom: 50px;
-}
-
-hr.oa-hr-small {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.table>thead>tr>th.rbd-striping-object{
-  min-width: 60px;
-}
-.table>thead>tr>th.rbd-striping-stripe {
-  min-width: 100px;
-}
-.rbd-striping-column-separator {
-  width: 1px;
-}
-
-.table>tbody>tr>td.rbd-striping-cell-top {
-  border-top: 1px solid #ccc;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
-.table>tbody>tr>td.rbd-striping-cell-center {
-  border-top: 1px dashed #ccc;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
-.table>tbody>tr>td.rbd-striping-cell-bottom {
-  border-bottom: 1px solid #ccc;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
-
-.dropdown-submenu {
-    position: relative;
-}
-
-.dropdown-submenu>.dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px;
-    border-radius: 0 6px 6px 6px;
-}
-
-.dropdown-submenu:hover>.dropdown-menu {
-    display: block;
-}
-
-.dropdown-submenu>a:after {
-    display: block;
-    content: " ";
-    float: right;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 0 5px 5px;
-    border-left-color: $oa-color-blue;
-    margin-top: 5px;
-    margin-right: -10px;
-}
-
-.dropdown-submenu:hover>a:after {
-    border-left-color: $oa-color-blue;
-}
-
-.dropdown-submenu.pull-left {
-    float: none;
-}
-
-.dropdown-submenu.pull-left>.dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
-}
-
-/* Forms */
-.form-group>.control-label>span.required {
-  @extend .fa;
-  @extend .fa-asterisk;
-  @extend .required;
-  font-size: 6px;
-  padding-left: 4px;
-  vertical-align: text-top;
-}
-
-/* Modal dialog */
-.modal-footer button.btn:not(:first-child) {
-  margin-left: 5px;
-}
-
-// awesome-bootstrap-checkbox + ForkAwesome
-input[type="checkbox"].styled:checked + label:after,
-input[type="radio"].styled:checked + label:after,
-.checkbox input[type=checkbox]:checked + label:after {
-    font-family: 'ForkAwesome';
-}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index c10c1ee98b3c..2b0c9035da4c 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -1,2 +1,267 @@
 /* You can add global styles to this file, and also import other style files */
-@import './openattic-theme.scss';
+
+@import 'defaults';
+$fa-font-path: "../node_modules/fork-awesome/fonts";
+@import "../node_modules/fork-awesome/scss/fork-awesome";
+$font_family_1: 'ForkAwesome';
+
+/* Basics */
+html {
+  background-color: $color-app-bg;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  font-size: 12px;
+}
+a {
+  color: $color-links;
+  cursor: pointer;
+}
+a:hover,
+a:focus{
+  color: $color-links-focus
+}
+h1 {
+  letter-spacing: -1px;
+  font-size: 2em;
+}
+h2 {
+  letter-spacing: -1px;
+  font-size: 1.833em;
+}
+h3{
+  display: block;
+  font-size: 1.583em;
+  font-weight: 400;
+}
+h4{
+  font-size: 1.5em;
+  line-height: normal
+}
+option {
+  font-weight: normal;
+  font-style: normal;
+}
+/* For awesome-bootstrap-checkbox */
+.checkbox input[type='checkbox']:checked + label:after {
+  font-family: $font_family_1;
+}
+/*******/
+.full-height {
+  height: 100%;
+}
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.margin-right-md {
+  margin-right: 15px
+}
+.no-border {
+  border: 0px;
+  box-shadow: 0px 0px 0px !important;
+}
+.italic {
+  font-style: italic;
+}
+.bold {
+  font-weight: bold;
+}
+.text-right {
+  text-align: right;
+}
+.text-monospace {
+  font-family: monospace;
+}
+/* Breadcrumb */
+.breadcrumb {
+  padding: 8px 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+.breadcrumb>li+li:before {
+  padding: 0 5px 0 7px;
+  color: $color-breadcrumb;
+  font-family: "ForkAwesome";
+  content: "\f101";
+}
+.breadcrumb>li>span {
+  color: $color-breadcrumb;
+}
+/* Buttons */
+.btn-primary {
+  color: $color-button-text;
+  background-color: $color-button;
+  border-color: $color-button-border;
+}
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  color: $color-button-text;
+  background-color: $color-button-hover;
+  border-color: $color-button-border;
+}
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  background-image: none;
+}
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: $color-blue;
+  border-color: $color-button-border;
+}
+.btn-primary .badge {
+  color: $color-blue;
+  background-color: $color-button-badge;
+}
+.btn-primary .caret {
+  color: $color-button-caret;
+}
+.btn-group>.btn>i.fa,
+button.btn.btn-label>i.fa {
+  /** Add space between icon and text */
+  padding-right: 5px;
+}
+
+/* Dropdown */
+.dropdown-menu {
+  min-width: 50px;
+}
+.dropdown-menu>li>a {
+  color: $color-dropdown-menu;
+  cursor: pointer;
+}
+.dropdown-menu>li>a>i.fa {
+  /** Add space between icon and text */
+  padding-right: 5px;
+}
+.dropdown-menu>.active>a {
+  color: $color-dropdown-active-text;
+  background-color: $color-dropdown-active-bg;
+}
+.dataTables_wrapper .dropdown-menu>li.divider {
+  cursor: auto;
+}
+
+/* Grid */
+.container,
+.container-fluid {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.row {
+  margin-left: -30px;
+  margin-right: -30px;
+}
+.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
+.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
+.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
+.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+/* Caret */
+.caret {
+  color: $color-caret-text;
+}
+/* Progressbar */
+.progress-bar {
+  background-image: none !important;
+}
+.progress-bar-info {
+  background-color: $color-progress-bar-info-bg;
+}
+.progress-bar-freespace {
+  background-color: $color-progress-bar-freespace-bg;
+}
+.oaprogress {
+  position: relative;
+  margin-bottom: 0;
+}
+.oaprogress div.progress-bar {
+  position: static;
+}
+.oaprogress span {
+  position: absolute;
+  display: block;
+  width: 100%;
+  color: $color-oaprogress-text;
+  font-weight: normal;
+}
+tags-input .tags {
+  border-radius: 4px;
+  border: 1px solid $color-tags-border;
+  box-shadow: inset 0 1px 1px $color-tags-box-shadow;
+}
+uib-accordion .panel-title,
+.panel .accordion-title {
+  font-size: 14px !important;
+}
+.panel-body h2:first-child {
+  margin-top: 0;
+}
+.pull-left {
+  float: left;
+}
+.disabled {
+  pointer-events: none;
+}
+.clickable {
+  cursor: pointer;
+}
+.has-error .has-error-btn, .has-error .has-error-btn:disabled:hover {
+  background-color: $color-error-btn-bg;
+  border-color: $color-error-btn-border;
+}
+/* If javascript is disabled. */
+.noscript {
+  padding-top: 5em;
+}
+.noscript p {
+  color: $color-noscript-text;
+}
+.required {
+  color: $color-required-text;
+}
+/* Forms */
+.form-group>.control-label>span.required {
+  @extend .fa;
+  @extend .fa-asterisk;
+  @extend .required;
+  font-size: 6px;
+  padding-left: 4px;
+  vertical-align: text-top;
+}
+/* Modal dialog */
+.modal-footer button.btn:not(:first-child) {
+  margin-left: 5px;
+}
+.margin-right-sm {
+  margin-right: 10px
+}
+.nav-tabs {
+  margin-bottom: 15px;
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
index 835bb362db43..b37e5fccf6f8 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
@@ -1,3 +1,5 @@
+@import '../defaults';
+
 .chart-container {
   position: absolute;
   margin: auto;
@@ -15,8 +17,8 @@ canvas {
 .chartjs-tooltip {
   opacity: 0;
   position: absolute;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
+  background: $color-chart-tooltip-bg;
+  color: $color-chat-tooltip-text;
   border-radius: 3px;
   -webkit-transition: all 0.1s ease;
   transition: all 0.1s ease;
@@ -51,7 +53,7 @@ canvas {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: black transparent transparent transparent;
+  border-color: $color-chart-tooltip-border transparent transparent transparent;
 }
 
 ::ng-deep .chartjs-tooltip-key {
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
index 3148ff2d2483..74a7feb830fa 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
@@ -1,3 +1,5 @@
+@import '../defaults';
+
 ::ng-deep .popover-content {
   padding: 0px 0px;
   height: auto;
@@ -11,14 +13,14 @@
 
 .separator {
   padding: 5px 12px;
-  color: #90949c;
-  background-color: #f6f7f9;
+  color: $color-popover-seperator-text;
+  background-color: $color-popover-seperator-bg;
   font-size: 12px;
 }
 
 .message {
   padding: 10px 16px;
-  color: #474544;
+  color: $color-popover-message-text;
   font-size: 12px;
 }
 
@@ -26,7 +28,7 @@ table {
   width: 252px;
   margin: 5px 12px 5px 5px;
   font-size: 12px;
-  color: #474544;
+  color: $color-popover-table-text;
 }
 
 .icon-col {
@@ -35,7 +37,7 @@ table {
 }
 
 .date {
-  color: #777777;
+  color: $color-popover-date;
 }
 
 hr {