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
dperaza4dustbit · Apr 13, 2018 · 5af6724 · 5af6724
1 parent 73c0b8d
commit 5af6724
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;