Minor styling updates of replica set details view

src/app/frontend/_variables.scss

@@ -19,11 +19,13 @@
   @return $multiplier * $font-size;
 }
 
+$headline-font-size-base:  rem(2.4) !default;
 $subhead-font-size-base:   rem(1.6) !default;
 $body-font-size-base:      rem(1.4) !default;
 $caption-font-size-base:   rem(1.2) !default;
 
 $primary: #326de6;
+$warning: #ffa500;
 $delicate: #aaa;
 $muted: #888;
 $hover-primary: #1254df;
@@ -35,7 +37,7 @@ $content-background: #fff;
 $foreground-1: rgba(0, 0, 0, .87);
 $foreground-2: rgba(0, 0, 0, .54);
 
-$title-font-weight: 400;
+$regular-font-weight: 400;
 
 $layout-breakpoint-lg: 1280px;
 $whiteframe-shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);

src/app/frontend/replicasetdetail/replicasetdetail.html

@@ -20,7 +20,7 @@ limitations under the License.
       <a flex-offset="10" ui-sref="replicasets">
         <i class="material-icons kd-replicasetdetail-sidebar-header-icon">keyboard_backspace</i>
       </a>
-      <span flex-offset="5" flex class="md-title">
+      <span flex-offset="5" flex class="md-title kd-replicasetdetail-app-name">
         {{ctrl.replicaSetDetail.name}}
       </span>
     </div>
@@ -166,7 +166,7 @@ limitations under the License.
             </td>
             <td class="kd-replicasetdetail-table-cell">
               {{pod.startTime | relativeTime}}
-              <md-tooltip>{{pod.startTime | date : 'yyyy-MM-dd HH:mm:ss'}}</md-tooltip>
+              <md-tooltip>{{pod.startTime | date:'short'}}</md-tooltip>
             </td>
             <td class="kd-replicasetdetail-table-cell">
               0.4 CPU<!-- TODO(maciaszczykm): Fill with data and plot. -->
@@ -177,7 +177,7 @@ limitations under the License.
             <td class="kd-replicasetdetail-table-cell">{{pod.podIP}}</td>
             <td class="kd-replicasetdetail-table-cell">{{pod.nodeName}}</td>
             <td class="kd-replicasetdetail-table-cell">
-              Logs <i class="material-icons kd-replicasetdetail-logs-icon">arrow_drop_down</i>
+              Logs <i class="material-icons kd-replicasetdetail-table-icon">arrow_drop_down</i>
               <!-- TODO(maciaszczykm): Handle it. -->
             </td>
             <td class="kd-replicasetdetail-table-cell">
@@ -266,13 +266,13 @@ limitations under the License.
           </thead>
           <tbody>
           <tr ng-repeat="event in ctrl.events | orderBy:ctrl.sortEventsBy:ctrl.eventsOrder">
-            <td class="kd-replicasetdetail-table-cell kd-replicasetdetail-table-message">
+            <td class="kd-replicasetdetail-table-message">
               <i ng-if="ctrl.isEventWarning(event)"
                  class="material-icons kd-replicasetdetail-warning-icon">warning</i>
               {{event.message}}
             </td>
             <td class="kd-replicasetdetail-table-cell">
-              {&lt;!&gt;{{event.sourceComponent}} {{event.sourceHost}}&lt;!&gt;}
+              {{event.sourceComponent}} {{event.sourceHost}}
             </td>
             <td class="kd-replicasetdetail-table-cell">{{event.object}}</td>
             <td class="kd-replicasetdetail-table-cell">{{event.count}}</td>

src/app/frontend/replicasetdetail/replicasetdetail.scss

@@ -18,7 +18,11 @@ $replicasetdetails-sidebar-bg: #fafafa;
 $replicasetdetails-border: #ddd;
 $replicasetdetails-table-message: #000;
 $replicasetdetails-table-cell: #777;
-$replicasetdetails-warning: #ffa500;
+
+.kd-replicasetdetail-app-name {
+  color: $foreground-2;
+  font-weight: $regular-font-weight;
+}
 
 .kd-replicasetdetail-sidebar {
   background-color: $replicasetdetails-sidebar-bg;
@@ -37,33 +41,41 @@ $replicasetdetails-warning: #ffa500;
 }
 
 .kd-replicasetdetail-sidebar-header-icon {
-  font-size: 1.7em;
+  color: $muted;
+  font-size: $headline-font-size-base;
+  font-weight: $regular-font-weight;
+  margin-right: 6px;
   vertical-align: middle;
 }
 
 .kd-replicasetdetail-table-message {
+  border-bottom: 1px solid $replicasetdetails-border;
   color: $replicasetdetails-table-message;
+  font-size: $caption-font-size-base;
+  font-weight: $regular-font-weight;
+  height: 40px;
   overflow: hidden;
+  padding: 5px 5px 5px 15px;
   text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .kd-replicasetdetail-sidebar-title {
-  font-size: 15px;
+  font-size: $subhead-font-size-base;
   padding-bottom: 10px;
   padding-top: 10px;
 }
 
 .kd-replicasetdetail-sidebar-line {
   color: $delicate;
-  font-size: 11px;
+  font-size: $caption-font-size-base;
   padding-bottom: 6px;
 }
 
 .kd-replicasetdetail-sidebar-subline {
   color: $muted;
-  font-size: 13px;
+  font-size: $caption-font-size-base;
   padding-bottom: 8px;
 }
 
@@ -75,7 +87,7 @@ $replicasetdetails-warning: #ffa500;
 }
 
 .kd-replicasetdetail-warning-icon {
-  color: $replicasetdetails-warning;
+  color: $warning;
   font-size: 24px;
   padding: 0 5px;
   vertical-align: middle;
@@ -83,7 +95,7 @@ $replicasetdetails-warning: #ffa500;
 
 .kd-replicasetdetail-sidebar-service-icon {
   color: $muted;
-  font-size: 14px;
+  font-size: $body-font-size-base;
   padding: 0 3px;
   vertical-align: top;
 }
@@ -119,8 +131,8 @@ $replicasetdetails-warning: #ffa500;
 .kd-replicasetdetail-table-header {
   border-bottom: 1px solid $replicasetdetails-border;
   color: $replicasetdetails-table-cell;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: $body-font-size-base;
+  font-weight: $regular-font-weight;
   padding: 15px 10px 15px 15px;
   text-align: left;
 }
@@ -132,13 +144,13 @@ $replicasetdetails-warning: #ffa500;
 .kd-replicasetdetail-table-cell {
   border-bottom: 1px solid $replicasetdetails-border;
   color: $replicasetdetails-table-cell;
-  font-size: 13px;
+  font-size: $caption-font-size-base;
   height: 40px;
   padding: 5px 5px 5px 15px;
 }
 
 .kd-replicasetdetail-table-icon {
-  font-size: 14px;
+  font-size: $body-font-size-base;
   padding: 0 3px;
   vertical-align: top;
 }
@@ -146,7 +158,7 @@ $replicasetdetails-warning: #ffa500;
 .kd-replicasetdetail-help-icon {
   color: $muted;
   cursor: help;
-  font-size: 14px;
+  font-size: $body-font-size-base;
   padding: 0 3px;
   vertical-align: middle;
 }

src/app/frontend/replicasetlist/replicasetcard.html

@@ -71,7 +71,7 @@ limitations under the License.
           <span flex>
             {{::ctrl.replicaSet.creationTime | relativeTime}}
             <md-tooltip>
-              {{::ctrl.replicaSet.creationTime | date : 'yyyy-MM-dd HH:mm:ss'}}
+              {{::ctrl.replicaSet.creationTime | date:'short'}}
             </md-tooltip>
           </span>
         </div>

src/app/frontend/replicasetlist/replicasetcard.scss

@@ -22,7 +22,7 @@
 .kd-replicaset-card-name {
   color: inherit;
   display: inline-block;
-  font-weight: $title-font-weight;
+  font-weight: $regular-font-weight;
   text-decoration: none;
 }