de-importantify colors. fix hover on user settings

resources/frontend_client/app/components/buttons/buttons.css

@@ -65,7 +65,7 @@
 
 .Button--white {
     background-color: white;
-    color: color(var(--base-grey) shade(30%)) !important;
+    color: color(var(--base-grey) shade(30%));
     border-color: color(var(--base-grey) shade(30%));
 }
 

resources/frontend_client/app/css/core/colors.css

@@ -21,29 +21,23 @@
 }
 
 .text-default {
-    color: var(--default-font-color) !important;
+    color: var(--default-font-color);
 }
 
-/* white */
-.text-white,
-.text-white-hover:hover { color: #fff; }
-
-.bg-white { background-color: #fff; }
-
 /* brand */
 .text-brand,
 .text-brand-hover:hover {
-    color: var(--brand-color) !important; /* use of important since we always want brand to override other colors */
+    color: var(--brand-color);
 }
 
 .text-brand-darken,
 .text-brand-darken-hover:hover {
-    color: color(var(--brand-color) shade(20%)) !important;
+    color: color(var(--brand-color) shade(20%));
 }
 
 .text-brand-light,
 .text-brand-light-hover:hover {
-    color: var(--brand-light-color) !important;
+    color: var(--brand-light-color);
 }
 
 .bg-brand,
@@ -107,7 +101,6 @@
 .bg-alt { background-color: var(--alt-color); }
 
 /* grey */
-
 .text-grey-1,
 .text-grey-1-hover:hover { color: color(var(--base-grey) shade(10%)) }
 
@@ -126,3 +119,9 @@
 .bg-grey-4 { background-color: color(var(--base-grey) shade(40%)) }
 
 .text-dark { color: var(--dark-color); }
+
+/* white  - move to bottom for specificity since its often used on hovers, etc */
+.text-white,
+.text-white-hover:hover { color: #fff; }
+
+.bg-white { background-color: #fff; }

resources/frontend_client/app/user/partials/edit_current_user.html

@@ -6,15 +6,15 @@
 <div class="mt2 md-mt4 wrapper wrapper--trim">
     <div class="Grid Grid--gutters Grid--full md-Grid--normal md-flex-reverse">
         <div class="Grid-cell Grid Grid--fit md-flex-column md-Cell--1of3">
-            <a class="Grid-cell md-no-flex rouded HoverItem p1 md-p3 block cursor-pointer text-centered md-text-left"
+            <a class="Grid-cell md-no-flex bordered text-brand-hover border-brand-hover rounded p1 md-p3 block cursor-pointer text-centered md-text-left"
                 ng-click="setTabFocus('details')"
-                ng-class="{ 'bg-brand text-white' : tab_focus == 'details' }">
+                ng-class="{ 'bg-brand text-white text-white-hover' : tab_focus == 'details' }">
                 User Details
             </a>
 
-            <a class="Grid-cell md-no-flex rounded HoverItem p1 md-p3 block cursor-pointer text-centered md-text-left"
+            <a class="Grid-cell md-no-flex md-mt1 text-brand-hover bordered border-brand-hover rounded p1 md-p3 block cursor-pointer text-centered md-text-left"
                 ng-click="setTabFocus('password')"
-                ng-class="{ 'bg-brand text-white' : tab_focus == 'password' }">
+                ng-class="{ 'bg-brand text-white text-white-hover' : tab_focus == 'password' }">
                 Password
             </a>
         </div>