commit 7f970a1f20aac99dfadad94a18f5b725f9a65063
author Derick Montague <derick.montague@ibm.com> Mon Mar 02 17:56:09 2020 -0600
committer Derick Montague <derick.montague@ibm.com> Tue Mar 10 19:50:53 2020 +0000
tree 319b6441aaaf6d8521cbf3fe35ce6c94d32878ee
parent c05ff648da07d8e2221d67eac83b6c6581d371a0

Remove unused colors from color palette

The color palette has been stripped down to a
maximum of two colors shades per palette. This
works for our design since components use a
base color with a lighter color as an accent
color. This change reduces the amount of CSS
generated by Bootstrap when the CSS is compiled.

Github Story: https://github.com/openbmc/webui-vue/issues/2

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I2ddb37f5c89c749a7303799c6f7499ddd83d5a92

src/components/AppHeader/AppHeader.vue

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index aa8d9f8..08c8256 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -157,7 +157,7 @@
 }
 
 .nav-trigger {
-  fill: $white;
+  fill: $light;
   width: $header-height;
   height: $header-height;
   transition: none;
@@ -167,8 +167,8 @@
   }
 
   &:hover {
-    fill: $white;
-    background-color: $gray-900;
+    fill: $light;
+    background-color: $dark;
   }
 
   @include media-breakpoint-up($responsive-layout-bp) {

src/components/AppNavigation/AppNavigation.vue

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 173a625..48b94c3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -195,16 +195,16 @@
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $secondary-dark;
+  color: $secondary;
 
   &:hover {
     background-color: $primary-nav-hover;
-    color: $secondary-dark;
+    color: $dark;
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
-    color: $secondary-dark;
+    color: $dark;
   }
 }
 
@@ -212,8 +212,8 @@
 .nav-link--current:hover,
 .nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $secondary-dark;
-  color: $secondary-light;
+  background-color: $secondary;
+  color: $light;
   cursor: default;
 
   &::before {

src/components/Global/StatusIcon.vue

diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index d59eaec..96074ee 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -39,7 +39,11 @@
     fill: $danger;
   }
   &.secondary {
-    fill: $secondary;
+    fill: $gray-600;
+
+    svg {
+      transform: rotate(-45deg);
+    }
   }
   &.warning {
     fill: $warning;