From 5af6724e4b478b793f5fede10174c41ff6e07955 Mon Sep 17 00:00:00 2001
From: Geoff Greer <geoff@greer.fm>
Date: Fri, 13 Apr 2018 15:26:46 -0700
Subject: [PATCH] Design Cleanup

- Fix bold text in labels on RBAC edit/add pages.
- Fix bold text in table heads (node conditions, node images).
- Fix color of list headers
---
 frontend/public/components/RBAC/_rbac.scss            |  3 +++
 frontend/public/components/RBAC/edit-rule.jsx         |  4 ++--
 frontend/public/components/_list.scss                 | 11 +++++++----
 frontend/public/components/events.jsx                 |  2 +-
 .../public/components/factory/_modal-wrapper.scss     |  1 +
 frontend/public/style/_base.scss                      |  3 ++-
 frontend/public/style/_common.scss                    |  8 ++++++++
 frontend/public/style/_overrides.scss                 |  4 ++++
 frontend/public/style/_vars.scss                      |  1 +
 9 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/frontend/public/components/RBAC/_rbac.scss b/frontend/public/components/RBAC/_rbac.scss
index 03a8816d5fe..94b75d9c2d9 100644
--- a/frontend/public/components/RBAC/_rbac.scss
+++ b/frontend/public/components/RBAC/_rbac.scss
@@ -30,12 +30,15 @@
     margin-top: 30px;
   }
   .help-text {
+    color: $color-text-secondary;
+    font-weight: 400;
     position: relative;
     top: -3px;
     left: 20px;
   }
   .checkbox-label {
     margin-bottom: 5px;
+    font-weight: 400;
   }
 
   .rbac-minor {
diff --git a/frontend/public/components/RBAC/edit-rule.jsx b/frontend/public/components/RBAC/edit-rule.jsx
index c513af6cd64..8e2138a2d35 100644
--- a/frontend/public/components/RBAC/edit-rule.jsx
+++ b/frontend/public/components/RBAC/edit-rule.jsx
@@ -268,7 +268,7 @@ const EditRule = connect(state => state.k8s.get('RESOURCES') || {}, {getResource
           <div className="co-m-pane__body">
             <div className="row">
               <div className="col-xs-12">
-                <p>
+                <p className="text-secondary">
                 Each role is made up of a set of rules, which defines the type of access and resources that are allowed to be manipulated.
                 </p>
               </div>
@@ -399,7 +399,7 @@ const EditRule = connect(state => state.k8s.get('RESOURCES') || {}, {getResource
                 <p>
                   <label>API Groups:</label>
                 </p>
-                <p>Restrict this role to a subset of API URLs that don&rsquo;t correspond to objects.</p>
+                <p className="text-secondary">Restrict this role to a subset of API URLs that don&rsquo;t correspond to objects.</p>
 
                 <div>
                   <input type="text" value={APIGroups} className="form-control text-input" onChange={e => this.setApiGroups(e.target.value)} placeholder="Comma separated list of the api groups for the selected resources." />
diff --git a/frontend/public/components/_list.scss b/frontend/public/components/_list.scss
index ded2b3d32db..32dd1c1e763 100644
--- a/frontend/public/components/_list.scss
+++ b/frontend/public/components/_list.scss
@@ -20,12 +20,15 @@
 
 .co-m-table-grid {
   line-height: 1;
-  &__sort-arrow {
-    margin-left: 10px;
-    color: $color-grey-medium;
+  &__head {
+    color: $color-text-secondary;
+    text-transform: uppercase;
   }
   &__sort-link--unsorted {
-    color: $color-grey-medium;
+    color: $color-text-secondary;
+  }
+  &__sort-arrow {
+    margin-left: 10px;
   }
 }
 
diff --git a/frontend/public/components/events.jsx b/frontend/public/components/events.jsx
index ee6cf1a899b..6b352d13705 100644
--- a/frontend/public/components/events.jsx
+++ b/frontend/public/components/events.jsx
@@ -284,7 +284,7 @@ class EventStream extends SafetyFirst {
       <div className="row">
         <div className="col-xs-12"><p></p>
           <div className="co-sysevent-stream">
-            <div className="co-sysevent-stream__totals">
+            <div className="co-sysevent-stream__totals text-muted">
               { messageCount }
             </div>
 
diff --git a/frontend/public/components/factory/_modal-wrapper.scss b/frontend/public/components/factory/_modal-wrapper.scss
index 8a98df1e2c0..6d5fd732a78 100644
--- a/frontend/public/components/factory/_modal-wrapper.scss
+++ b/frontend/public/components/factory/_modal-wrapper.scss
@@ -35,6 +35,7 @@
   &__heading {
     margin-bottom: 4px;
     text-transform: uppercase;
+    color: $color-text-secondary;
   }
 
   &__btn {
diff --git a/frontend/public/style/_base.scss b/frontend/public/style/_base.scss
index 585ac9f8c28..7de11cb6f7a 100644
--- a/frontend/public/style/_base.scss
+++ b/frontend/public/style/_base.scss
@@ -16,7 +16,8 @@ dl {
 
 dt {
   text-transform: uppercase;
-  font-weight: 300;
+  font-weight: 400;
+  color: $color-text-secondary;
   font-size: 12px; }
 
 dd {
diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
index f6fcd3bd4c1..2e729c516a8 100644
--- a/frontend/public/style/_common.scss
+++ b/frontend/public/style/_common.scss
@@ -23,6 +23,14 @@
 .co-table-container {
   overflow: auto;
   margin-bottom: 30px;
+  table {
+    thead {
+      th {
+        color: $color-text-secondary;
+        font-weight: 400;
+      }
+    }
+  }
 }
 
 .co-m-pane__details {
diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
index f03b4788d68..0ce9fd5b447 100644
--- a/frontend/public/style/_overrides.scss
+++ b/frontend/public/style/_overrides.scss
@@ -12,6 +12,10 @@ h2,
   font-weight: normal;
 }
 
+.text-secondary {
+  color: $color-text-secondary;
+}
+
 small {
   font-size: 12px;
 }
diff --git a/frontend/public/style/_vars.scss b/frontend/public/style/_vars.scss
index d4716da533c..607d5385a54 100644
--- a/frontend/public/style/_vars.scss
+++ b/frontend/public/style/_vars.scss
@@ -50,6 +50,7 @@ $color-border-brown: #947663;
 $color-grey-when-selected: #e5e5e5;
 
 $color-text-muted: $co-gray;
+$color-text-secondary: $color-grey-medium;
 
 //OpenShift color variables
 $color-os-nav-title: #d1d1d1;