mgr/dashboard: use bootstrap variables for colors

Fixes: https://tracker.ceph.com/issues/38891
Signed-off-by: Ishan Rai <ishanrai05@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
index 33d580283df6bfc6f321f1e93600f2d5c4696ea8..948900bff8e78f2666f26b89101793fa144bf166 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss
@@ -1,3 +1,5 @@
+@import 'defaults.scss';
+
 // Angular2-Tree Component
 ::ng-deep tree-root {
   .tree-children {
@@ -7,8 +9,8 @@
 
 .quota-origin {
   &:hover {
-    color: #212121;
+    color: $color-gray13;
   }
   cursor: pointer;
-  color: #2b99a8;
+  color: $color-brand-teal;
 }

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 0c99ccaf798e0b57202d8a6d5a80ff4656c58737..94d943cc8038aa257b75546114d66dc515d46362 100644 (file)
--- 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
@@ -6,7 +6,7 @@
   }
 
   .form-group {
-    border-left: 4px solid white;
+    border-left: 4px solid $color-solid-white;
     background-color: $color-password-toggle-bg;
     height: auto;
     margin-bottom: 2rem;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
index b845113944c86ae9a8d7bc25fe1bdbd2f3d62e89..c9af5b164c49ee82b862a8b709d2f01514e586f1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss
@@ -1,10 +1,12 @@
+@import 'defaults.scss';
+
 .about-container {
-  background-color: #374249;
+  background-color: $color-secondary;
   background-image: url('assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: #fff;
-  text-shadow: 1px 1px #374249;
+  color: $color-solid-white;
+  text-shadow: 1px 1px $color-secondary;
 }
 .product-versions {
   margin-top: 30px;
@@ -16,7 +18,7 @@
   border-bottom: none;
 }
 .modal-header .close {
-  color: #fff;
+  color: $color-solid-white;
   font-size: 2em;
 }
 .modal-body {

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 c3c0f942f6dd19e6d304ab67625252dd53038968..b64837b5b9cb01f6e6451977a1ed9ada94ceaf50 100644 (file)
--- 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
@@ -161,7 +161,7 @@ $sidebar-width: 200px;
     bottom: 0;
     left: 0;
     z-index: 999;
-    color: #fff;
+    color: $color-solid-white;
     transition: all 0.3s;
 
     &.active {
@@ -175,7 +175,7 @@ $sidebar-width: 200px;
       }
 
       p {
-        color: #fff;
+        color: $color-solid-white;
         padding: 10px;
       }
 
@@ -183,10 +183,10 @@ $sidebar-width: 200px;
         padding: 10px;
         font-size: 1.1em;
         display: block;
-        color: #fff;
+        color: $color-solid-white;
 
         &:hover {
-          color: #fff;
+          color: $color-solid-white;
           background: $color-primary;
         }
 
@@ -199,7 +199,7 @@ $sidebar-width: 200px;
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: #fff;
+        color: $color-solid-white;
       }
     }
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
index 5c7eb75377facaae599638b87456dbb93cb4dbd9..d86ba90bccc7e9e9e5d194a47fcf702ba9f83ee0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
@@ -5,5 +5,5 @@
 }
 
 .running:hover i {
-  color: white;
+  color: $color-solid-white;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index ab63ed5ae57f7df2641051121918585528f3a37d..7b9d975ffe018d54e28850b8967cbdebce75e80d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -299,9 +299,9 @@ a {
   display: table-cell;
 
   &:focus {
-    border-color: rgba($color-primary, 0.8);
+    border-color: $color-primary-transparent;
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba($color-primary, 0.5);
+    box-shadow: inset 0 1px 1px $color-transparent-black1, 0 0 8px 2px $color-primary-transparent1;
   }
 }
 
@@ -388,9 +388,9 @@ cd-modal {
 }
 
 .tooltip-inner {
-  background-color: white;
-  border: 1px solid grey;
-  color: #333;
+  background-color: $color-solid-white;
+  border: 1px solid $color-gray20;
+  color: $color-gray13;
   font-size: 1.1em;
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
index afbb031ceb9ae6fae57ca51639f7cb3cd1a3590d..98a6fcf69f7087630a5a1abe874068e084ca54d7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
@@ -34,9 +34,10 @@ $color-sky-blue: #afd9ee !default;
 
 $color-black: #000 !default;
 $color-transparent-black: rgba(0, 0, 0, 0.7) !default;
+$color-transparent-black1: rgba(0, 0, 0, 0.075) !default;
 $color-solid-gray: #555555 !default;
 $color-dark-gray: #474544 !default;
-// $color-gray: #505050 !default;
+$color-gray: #808080 !default;
 $color-mild-gray: #777777 !default;
 $color-blue-gray: #90949c !default;
 $color-grad-gray: #ededed !default;
@@ -45,6 +46,8 @@ $color-light-gray: #d1d1d1 !default;
 $color-soft-gray: #ddd !default;
 $color-white-gray: #eee !default;
 $color-shade-gray: #efefef !default;
+$color-gray13: #212121;
+$color-gray20: #333333 !default;
 $color-light-shade-gray: #f3f3f3 !default;
 $color-whitesmoke-gray: #f5f5f5 !default;
 $color-solid-white: #ffffff !default;
@@ -58,6 +61,8 @@ $color-mirage-gray: #333e46 !default;
 $color-primary: $color-brand-teal !default;
 $color-secondary: $color-brand-gray !default;
 $color-accent: #ef5c55 !default;
+$color-primary-transparent: rgba($color-primary, 0.8);
+$color-primary-transparent1: rgba($color-primary, 0.5);
 
 $color-app-bg: $color-solid-white !default;
 // $color-bg-darken: $color-dark-gray !default;