mgr/dashboard: Adapt to ceph.com branding

Changes the primary, secondary and accent color and adds a radius to all
buttons to match the branding of ceph.com

Signed-off-by: Sebastian Krah <skrah@suse.com>

diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst
index ccbcdc1da05d5fb1ed7c791415ef87a2e84ae51f..2221e5ef898f9bdf8c964c320d7198d84b045977 100644 (file)
--- a/src/pybind/mgr/dashboard/HACKING.rst
+++ b/src/pybind/mgr/dashboard/HACKING.rst
@@ -260,7 +260,7 @@ or
     $ npm run build -- --prod
 
 Unfortunately it's currently not possible to use multiple configurations when
-serving or buildung the ui at the same time. That means a configuration just
+serving or building the ui at the same time. That means a configuration just
 for the branding ``fileReplacements`` it not an option, because you want to use
 the production configuration anyway
 (https://github.com/angular/angular-cli/issues/10612).

diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
index 9a04f3efb17efe05a2e1b8a8434d35155c7ab24f..776e5caa0484cd6a211b399617873602a8c91446 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss
@@ -36,9 +36,9 @@ $color-transparent: rgba(0, 0, 0, 0.09);
 $color-brand-teal: #2b99a8;
 $color-brand-gray: #374249;
 
-$color-primary: #2b99a8; //$color-blue - ceph=$color-brand-teal - suse=#00C081
-$color-secondary: #0d2c40; //$color-dark-gray - ceph=$color-brand-gray - suse=#0D2C40
-$color-accent: #00b2e2; // ceph=#ef5c55 - suse=#00b2e2
+$color-primary: $color-brand-teal;
+$color-secondary: $color-brand-gray;
+$color-accent: #ef5c55;
 
 $color-app-bg: $color-solid-white;
 $color-bg-darken: $color-dark-gray;
@@ -65,9 +65,12 @@ $color-error-btn-border: $color-pink;
 $color-noscript-text: $color-mild-gray;
 $color-required-text: $color-pink;
 
+/*Button*/
+$button-radius: 1.875rem;
+
 /*Login*/
 $color-login-row-text: $color-solid-white;
-$color-login-row-bg: $color-dark-gray;
+$color-login-row-bg: $color-secondary;
 $color-password-toggle-text: $color-solid-white;
 $color-password-toggle-bg: $color-solid-gray;
 $color-password-toggle-focus: $color-primary;

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 876b42b626ba767d96d63becb31a78e0135d1634..0ebc570a449c418a310082b964d1ed18ff1431eb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -83,10 +83,21 @@ option {
 }
 
 /* Buttons */
+.btn {
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      outline: 0;
+    }
+  }
+}
 .btn-primary {
   color: $color-button-text;
-  background-color: $color-button;
-  border-color: $color-button-border;
+  background-color: $color-accent;
+  border-color: $color-accent;
+  border-radius: $button-radius;
 }
 .btn-primary:hover,
 .btn-primary:focus,
@@ -94,13 +105,19 @@ option {
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   color: $color-button-text;
-  background-color: $color-button-hover;
-  border-color: $color-button-border;
+  background-color: lighten($color-accent, 10);
+  border-color: lighten($color-accent, 10);
 }
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   background-image: none;
+
+  &:hover,
+  &:focus{
+    background-color: lighten($color-accent, 10);
+    border-color: lighten($color-accent, 10);
+  }
 }
 .btn-primary.disabled,
 .btn-primary[disabled],
@@ -117,8 +134,8 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
-  background-color: $color-primary;
-  border-color: $color-button-border;
+  background-color: $color-accent;
+  border-color: $color-accent;
 }
 .btn-primary .badge {
   color: $color-primary;
@@ -127,6 +144,12 @@ fieldset[disabled] .btn-primary.active {
 .btn-primary .caret {
   color: $color-button-caret;
 }
+.btn-default {
+  border-radius: $button-radius;
+}
+.form-group .btn-default {
+  border-radius: 4px;
+}
 .btn-group > .btn > i.fa,
 button.btn.btn-label > i.fa {
   /** Add space between icon and text */
@@ -148,6 +171,12 @@ button.btn.btn-label > i.fa {
 .dropdown-menu > .active > a {
   color: $color-dropdown-active-text;
   background-color: $color-dropdown-active-bg;
+
+  &,
+  &:hover,
+  &:focus {
+    background-color: darken($color-dropdown-active-bg, 10);
+  }
 }
 .dataTables_wrapper .dropdown-menu > li.divider {
   cursor: auto;