Merge branch 'reskin' of https://github.com/rancher/ui into reskin

app/components/container-row/template.hbs

@@ -1,5 +1,6 @@
 <td>
-  <span class="badge state {{model.stateBackground}}">
+  {{container-dot model=model}}
+  <span class="{{model.stateColor}}">
     {{model.displayState}}
   </span>
 </td>
@@ -11,21 +12,19 @@
 </td>
 <td class="clip">
   {{display-image model.imageUuid}}
-</td>
+  {{#if model.command~}}
-<td class="clip">
+    ({{model.command}})
-  {{#if model.command}}
-    {{model.command}}
   {{else}}
-    <span class="text-muted">None</span>
+    <span class="text-muted">(none)</span>
   {{/if}}
 </td>
 {{#if showStats}}
   <td class="spark-td">
     {{#if model.cpuSpark}}
-      {{spark-line data=model.cpuSpark     width=60 height=15 max=cpuMax     classNames="spark-tl" prefix="CPU: " formatter="percent"}}
+      {{spark-line data=model.cpuSpark     width=60 height=15 max=cpuMax     prefix="CPU: " formatter="percent"}}
-      {{spark-line data=model.memorySpark  width=60 height=15 max=memoryMax  classNames="spark-tr" prefix="Memory: " formatter="mib"}}
+      {{spark-line data=model.memorySpark  width=60 height=15 max=memoryMax  prefix="Memory: " formatter="mib"}}
-      {{spark-line data=model.networkSpark width=60 height=15 max=networkMax classNames="spark-bl" prefix="Network: " formatter="kbps"}}
+      {{spark-line data=model.networkSpark width=60 height=15 max=networkMax prefix="Network: " formatter="kbps"}}
-      {{spark-line data=model.storageSpark width=60 height=15 max=storageMax classNames="spark-br" prefix="Storage: " formatter="kbps"}}
+      {{spark-line data=model.storageSpark width=60 height=15 max=storageMax prefix="Storage: " formatter="kbps"}}
     {{/if}}
   </td>
 {{/if}}

app/components/d3-area/component.js

@@ -0,0 +1,121 @@
+import Ember from 'ember';
+
+
+export default Ember.Component.extend({
+  data: null,
+  classNames: ['col-sm-12', 'col-md-4', 'col-md-height', 'col-md-full-height', 'col-top'],
+  //attributeBindings: ['tooltip'],
+  tagName: 'div',
+
+  width: null,
+  height: 110,
+  min: 0,
+  max: null,
+  interpolation: 'step-after',
+  formatter: 'value',
+  prefix: '',
+
+  svg: null,
+  line: null,
+  dot: null,
+  x: null,
+  y: null,
+
+
+  didInsertElement: function() {
+    this.set('width', this.$('#inner-content').width());
+  },
+
+  hasData: function() {
+    if (this.get('data.length') > 0 && !this.get('svg')) {
+      this.create();
+    }
+  }.observes('data.length'),
+
+  create() {
+    var svg = d3.select(this.$('#cpu-graph')[0])
+      .append('svg:svg')
+      .attr('width', '100%')
+      .attr('height', '100%');
+
+    this.set('svg', svg);
+    this.set('x', d3.scale.linear().range([0, this.get('width')]));
+    this.set('y', d3.scale.linear().range([this.get('height'), 0]));
+
+    var line = d3.svg.line()
+      .x((d, i) => {
+        return this.get('x')(i);
+      })
+      .y((d) => {
+        return this.get('y')(d);
+      });
+    this.set('line', line);
+
+    //svg.append('path').attr('class', `node-${this.get('data')[0][0]}`).attr('d', line(this.get('data')[0].slice(1)))
+      //.attr('stroke', 'green')
+      //.attr('stroke-width', 2)
+      //.attr('fill', 'none');
+  },
+
+  generateYAxis: function() {
+    var out;
+    if (this.get('type') === 'cpu') {
+      out = d3.svg.axis()
+        .scale(this.get('y'))
+        .ticks(6)
+        .tickFormat(function(d) { return d + "%"; })
+        .orient('right');
+    } else {
+      out = d3.svg.axis()
+        .scale(this.get('y'))
+        .ticks(6)
+        .orient('right');
+    }
+    return out;
+  },
+
+  update: function() {
+    var svg = this.get('svg');
+    var data = (this.get('data') || []).slice();
+    var x = this.get('x');
+    var y = this.get('y');
+    var line = this.get('line');
+    var width = this.get('width');
+    var height = this.get('height');
+
+    if (svg && data && x && y && line) {
+      x.domain([0, 60]);
+      x.range([0, width - 1]);
+
+      y.domain([0, 100]);
+      y.range([height, 0]);
+
+
+      var yAxis = this.generateYAxis();
+
+      //svg.selectAll('path')
+        //.data([data[0].splice(1)])
+        //.attr('d', line);
+
+      data.forEach((v,i,d) => { // jshint ignore:line
+        //debugger;
+        if (svg.select(`.node-${v[0]}`)[0][0]) {
+          /*svg.select(`.node-${v[0]}`)
+          .data(v.slice(1))
+          .attr('d', line);*/
+        } else {
+          //debugger;
+          svg.append('path').attr('class', `node-${v[0]}`).attr('d', line(v.slice(1)))
+          .attr('stroke', 'green')
+          .attr('stroke-width', 2)
+          .attr('fill', 'none');
+        }
+      });
+      svg.append('g')
+        .attr('class', 'y-axis')
+        .attr('transform', 'translate(0, 0)')
+        .call(yAxis);
+
+    }
+  }.observes('data', 'data.[]'),
+});

app/components/d3-area/template.hbs

@@ -0,0 +1,14 @@
+<div class="well no-padding-margin">
+  <div id="inner-content" style="padding: 20px;">
+    <label class="section text-muted">{{type}}</label>
+    <hr>
+    <div class="info-graph {{unless active 'hide'}}" id="cpu-graph">
+    </div>
+    <div class="text-center text-muted {{unless loading 'hide'}}" style="height: 100px; padding-top: 30px;">
+      <i class="icon icon-spinner icon-spin"></i> Connecting...
+    </div>
+    <div class="text-center text-muted {{if available 'hide'}}" style="height: 100px; padding-top: 30px;">
+      Utilization stats are only available while active/running.
+    </div>
+  </div>
+</div>

app/components/form-command/template.hbs

@@ -89,7 +89,7 @@
 
   <div class="col-sm-12 col-md-8">
     <div class="form-control-static">
-      <button class="btn-circle-plus" {{action "addEnvironment" target="view"}}></button>
+      <button class="btn-circle-plus" {{action "addEnvironment" target="view"}}><i class="icon icon-plus-circle"></i></button>
     </div>
 
     {{#if environmentArray.length}}

app/components/form-ports/template.hbs

@@ -5,7 +5,7 @@
   <div class="col-sm-12 col-md-8">
     {{#unless editing}}
       <div>
-        <button class="btn-circle-plus" {{action "addPort" target="view"}}></button>
+        <button class="btn-circle-plus" {{action "addPort" target="view"}}><i class="icon icon-plus-circle"></i></button>
       </div>
     {{/unless}}
     {{#if portsArray.length}}

app/components/info-multi-stats/component.js

@@ -21,6 +21,7 @@ export default Ember.Component.extend({
   cpuGraph: null,
   cpuData: null,
   setCpuScale: false,
+  cpuD3Data: null,
 
   memoryCanvas: '#memoryGraph',
   memoryGraph: null,
@@ -142,6 +143,7 @@ export default Ember.Component.extend({
         row.push(point.cpu_total);
       }
 
+      this.set('cpuD3Data', data);
       if ( point.cpu_count && this.get('renderOk') && !this.get('setCpuScale') )
       {
         graph.axis.max(point.cpu_count*100);
@@ -234,6 +236,7 @@ export default Ember.Component.extend({
       x.push(i);
     }
     this.set('cpuData', [x]);
+    this.set('cpuD3Data', [x]);
 
     var cpuGraph = c3.generate({
       bindto: this.get('cpuCanvas'),
@@ -405,11 +408,14 @@ export default Ember.Component.extend({
 
     //console.log('Init Network');
     var x = ['x'];
+    var z = [];
     for ( var i = 0 ; i < MAX_POINTS ; i++ )
     {
       x.push(i);
+      z.push(i);
     }
     this.set('networkData', [x]);
+    this.set('networkD3Data', z);
 
     var networkGraph = c3.generate({
       bindto: this.get('networkCanvas'),

app/components/info-multi-stats/template.hbs

@@ -1,16 +1,17 @@
+<div class="container-fluid container-multi-stat">
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12 {{model.stateBackground}}">
+      <label class="section r-mt5" style="color:white;">Info: {{model.displayState~}}</label>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      {{yield}}
+    </div>
+  </div>
+</div>
 <div class="row">
   <div class="row-same-height row-full-height">
-    <div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
-      <div class="well no-padding-margin" style="height: 100%;">
-        <div style="padding: 20px;">
-          <label class="section">Info</label>
-          <div>
-            {{yield}}
-          </div>
-        </div>
-      </div>
-    </div>
-
     <div class="col-sm-12 col-md-4 col-md-height col-md-full-height col-top" style="margin-bottom: 20px;">
       <div class="well no-padding-margin">
         <div style="padding: 20px;">

app/host/containers/template.hbs

@@ -1,23 +1,19 @@
-<section class="instances">
+<table class="grid fixed" style="margin-bottom: 0;">
-  <table class="grid fixed" style="margin-bottom: 0;">
+  <thead>
-    <thead>
+    <tr>
-      <tr>
+      {{sortable-th sortable=this action="changeSort" name="state" width="120"}}
-        {{sortable-th sortable=this action="changeSort" name="state" width="120"}}
+      {{sortable-th sortable=this action="changeSort" name="name"}}
-        {{sortable-th sortable=this action="changeSort" name="name"}}
+      {{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}}
-        {{sortable-th sortable=this action="changeSort" name="ip" width="110" label="IP Address"}}
+      {{sortable-th sortable=this action="changeSort" name="image (command)"}}
-        {{sortable-th sortable=this action="changeSort" name="image"}}
+      <th class="stats">Stats</th>
-        {{sortable-th sortable=this action="changeSort" name="command"}}
+      <th class="actions" width="70">&nbsp;</th>
-        <th class="stats" width="128">Stats</th>
+    </tr>
-        <th class="actions" width="50">&nbsp;</th>
+  </thead>
-      </tr>
+  <tbody>
-    </thead>
+    {{#each arranged as |container|}}
-    <tbody>
+      {{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}}
-      {{#each arranged as |container|}}
+    {{else}}
-        {{container-row model=container showStats=true cpuMax=cpuMax memoryMax=memoryMax storageMax=storageMax networkMax=networkMax}}
+      <tr><td colspan="7" class="text-center text-muted">This host does not have any containers yet.</td></tr>
-      {{else}}
+    {{/each}}
-        <tr><td colspan="7" class="text-center text-muted">This host does not have any containers yet.</td></tr>
+  </tbody>
-      {{/each}}
+</table>
-    </tbody>
-  </table>
-</section>
-

app/host/storage/template.hbs

@@ -1,20 +1,17 @@
-<section>
+<table class="grid fixed" style="margin-bottom: 0;">
-  <table class="grid fixed" style="margin-bottom: 0;">
+  <thead>
-    <thead>
+    <tr>
-      <tr>
+      {{sortable-th sortable=this action="changeSort" name="state" width="120"}}
-        {{sortable-th sortable=this action="changeSort" name="state" width="120"}}
+      {{sortable-th sortable=this action="changeSort" name="hostPath"}}
-        {{sortable-th sortable=this action="changeSort" name="hostPath"}}
+      <th>Mounts</th>
-        <th>Mounts</th>
+      <th class="actions" width="50">&nbsp;</th>
-        <th class="actions" width="50">&nbsp;</th>
+    </tr>
-      </tr>
+  </thead>
-    </thead>
+  <tbody>
-    <tbody>
+    {{#each arranged as |volume|}}
-      {{#each arranged as |volume|}}
+      {{volume-row model=volume}}
-        {{volume-row model=volume}}
+    {{else}}
-      {{else}}
+      <tr><td colspan="4" class="text-center text-muted">This host does not have any volumes.</td></tr>
-        <tr><td colspan="4" class="text-center text-muted">This host does not have any volumes.</td></tr>
+    {{/each}}
-      {{/each}}
+  </tbody>
-    </tbody>
+</table>
-  </table>
-</section>
-

app/host/template.hbs

@@ -12,6 +12,73 @@
 
 <section>
   {{#info-multi-stats model=model linkName="hostStats" single=true}}
+    <div class="row multi-stats">
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        <label>IP Address</label>
+        {{model.displayIp}} {{zero-clipboard text=model.displayIp}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.memoryBlurb}}
+          <label>Memory</label>
+          {{model.memoryBlurb}}
+        {{else}}
+          <span class="text-muted">No Memory Footprint</span>
+        {{/if}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.osDetail}}
+          <label>OS</label>
+          {{model.osDetail}}
+        {{else}}
+          <span class="text-muted">No OS Details</span>
+        {{/if}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.dockerBlurb}}
+          <label>Docker</label>
+          {{model.dockerBlurb}}
+        {{else}}
+          <span class="text-muted">No Docker Details</span>
+        {{/if}}
+      </div>
+    </div>
+    <div class="row multi-stats">
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.cpuBlurb}}
+          <label>CPU</label>
+          {{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
+        {{/if}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.diskBlurb}}
+          <label>Storage</label>
+          {{#if model.diskDetail}}
+            {{#each model.diskDetail as |disk|}}
+              <span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
+            {{/each}}
+          {{else}}
+            {{model.diskBlurb}} (total)
+          {{/if}}
+        {{else}}
+          <span class="text-muted">No Storage Details</span>
+        {{/if}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        {{#if model.info.osInfo.kernelVersion}}
+          <label>Kernel</label>
+          {{model.info.osInfo.kernelVersion}}
+        {{/if}}
+      </div>
+      <div class="col-sm-3 col-md-3 col-lg-3">
+        <label>Provider</label>
+        {{#if model.machine}}
+          {{model.machine.driver}}
+        {{else}}
+          <span class="text-muted">No Provider</span>
+        {{/if}}
+      </div>
+    </div>
+    {{!--
     <ul class="list-lines">
       {{#if model.showTransitioningMessage}}
         <li>
@@ -21,87 +88,17 @@
           </span>
         </li>
       {{/if}}
-
-      <li>
-        <label>IP Address</label>
-        {{model.displayIp}} {{zero-clipboard text=model.displayIp}}
-      </li>
-
-      {{#if model.machine}}
-        <li>
-          <label>Provider</label>
-          {{model.machine.driver}}
-        </li>
-      {{/if}}
-
-      {{#if model.cpuBlurb}}
-        <li>
-          <label>CPU</label>
-          {{model.cpuBlurb}}{{#if model.cpuTooltip}} <i class="icon icon-info" tooltip="{{model.cpuTooltip}}"></i>{{/if}}
-        </li>
-      {{/if}}
-
-      {{#if model.memoryBlurb}}
-        <li>
-          <label>Memory</label>
-          {{model.memoryBlurb}}
-        </li>
-      {{/if}}
-
-      {{#if model.diskBlurb}}
-        <li>
-          <label>Storage</label>
-          {{#if model.diskDetail}}
-            {{#each model.diskDetail as |disk|}}
-              <span style="display: inline-block; padding-right: 10px;">{{disk.value}} <i class="icon icon-info" tooltip="{{disk.label}}"></i></span>
-            {{/each}}
-          {{else}}
-            {{model.diskBlurb}} (total)
-          {{/if}}
-        </li>
-      {{/if}}
-
-      {{#if model.osDetail}}
-        <li>
-          <label>OS</label>
-          {{model.osDetail}}
-        </li>
-      {{/if}}
-
-      {{#if model.info.osInfo.kernelVersion}}
-        <li>
-          <label>Kernel</label>
-          {{model.info.osInfo.kernelVersion}}
-        </li>
-      {{/if}}
-
-      {{#if model.dockerBlurb}}
-        <li>
-          <label>Docker</label>
-          {{model.dockerBlurb}}
-        </li>
-      {{/if}}
-
-      <li>
-        <label>Labels</label>
-        {{#if userLabelArray.length}}
-          {{#each userLabelArray as |label|}}
-            <span class="label label-default clip" style="display: inline-block; max-width: 100%;">{{label.key}}{{#if label.value}}={{label.value}}{{/if}}</span>
-          {{/each}}
-        {{else}}
-          <span class="text-muted">None</span>
-        {{/if}}
-      </li>
     </ul>
+    --}}
   {{/info-multi-stats}}
 </section>
 
 <section>
-  <ul class="nav nav-tabs nav-tabs-well">
+  <ul class="nav nav-tabs nav-tabs-well shadowed">
     {{#link-to "host.containers" tagName="li" href=false}}<a><i class="icon icon-box"></i> Containers</a>{{/link-to}}
     {{#link-to "host.storage" tagName="li" href=false}}<a><i class="icon icon-hdd"></i> Storage</a>{{/link-to}}
   </ul>
-  <div class="well nav-well">
+  <div class="table-flat">
     {{outlet}}
   </div>
 </section>

app/login/template.hbs

@@ -1,9 +1,11 @@
 <div style="max-width: 360px; margin: 100px auto 0 auto;">
   <div class="farm-box login top-colors">
-    <section>
+    
-      <div class="logo"></div>
+      
 
-      <h1>Welcome to Rancher</h1>
+      <h1>Howdy!<br>Welcome to Rancher</h1>
+      <div class="logo"></div>
+      <section>
       <br/>
       {{#if isGithub}}
         <p>Rancher uses GitHub to manage accounts and teams.  Click the button below to log in and give us read-only access to your basic GitHub account information.</p>

app/styles/app.scss

@@ -32,3 +32,4 @@
 @import "app/styles/spark-line";
 @import "app/styles/catalog";
 @import "app/styles/service-addtl-info";
+@import "app/styles/multi-stats";

app/styles/bootstrap-tweak.scss

@@ -1,5 +1,5 @@
-$normal-weight: 400;
+$normal-weight: 500;
-$bold-weight: 600;
+$bold-weight: 900;
 
 a {
   color: $blue;
@@ -36,7 +36,7 @@ H1, H2, H3, H4, H5, H6 {
     vertical-align: middle;
 
     &:not(:last-child) {
-      border-right: 1px solid #e3e5e6;
+      border-right: 1px solid $lightGray;
     }
   }
 
@@ -67,7 +67,15 @@ H1, H2, H3, H4, H5, H6 {
 
 
 /*buttons*/
+.btn {
+  font-weight: 900;
+  text-transform: uppercase;
+}
 
+.btn-disabled,
+.btn.disabled {
+  background: $lightGrayDark;
+}
 .btn-disabled,
 .btn.disabled,
 .btn[disabled],
@@ -107,6 +115,8 @@ fieldset[disabled] .btn {
 
 .btn-default {
   box-shadow: none;
+  background: white;
+  color: $midGray;
 
   &:hover {
     color: white;
@@ -137,6 +147,11 @@ fieldset[disabled] .btn {
       padding-left: 35px;
     }
   }
+  &.borderless {
+    .btn {
+      border: transparent;
+    }
+  }
 }
 
 .form-control {
@@ -224,26 +239,31 @@ fieldset[disabled] .btn {
 
 
 .bg-default { background-color: $lightGrayTwo; color: $midGray; }
-.bg-primary { background-color: $brand-primary; }
+.bg-primary { background-color: $brand-primary; color:white;}
-.bg-success { background-color: $brand-success; }
+.bg-success { background-color: $brand-success; color:white;}
-.bg-danger  { background-color: $brand-danger; }
+.bg-danger  { background-color: $brand-danger; color:white;}
-.bg-warning { background-color: $brand-warning; }
+.bg-warning { background-color: $brand-warning; color:$yellowDark;}
-.bg-info    { background-color: $brand-info; }
+.bg-info    { background-color: $brand-info; color:$lightTealDark;}
 
 .badge {
+  border-radius: 90px;
   &.bg-default { background-color: $lightGrayTwo; color: $midGray; }
-  &.bg-primary { background-color: $brand-primary; }
+  &.bg-primary { background-color: $brand-primary; color: white;}
-  &.bg-success { background-color: $brand-success; }
+  &.bg-success { background-color: $brand-success; color: white;}
-  &.bg-danger  { background-color: $brand-danger; }
+  &.bg-danger  { background-color: $brand-danger; color: $redTwoDark;}
-  &.bg-warning { background-color: $brand-warning; }
+  &.bg-warning { background-color: $brand-warning; color: $yellowDark;}
   &.bg-info    { background-color: $brand-info; }
 
-  &.badge-default { background-color: $lightGrayTwo;  color: $midGray;}
+  &.badge-default {       background-color: $lightGrayTwoDark; color: $darkestGrayTwo;}
-  &.badge-primary { background-color: $brand-primary; }
+  &.badge-primary { background-color: #cce3ee; color: $brand-primary; }
   &.badge-success { background-color: $brand-success; }
   &.badge-danger  { background-color: $brand-danger; }
-  &.badge-warning { background-color: $brand-warning; }
+  &.badge-warning { background-color: $brand-warning; color: $yellow;}
-  &.badge-info    { background-color: $brand-info; }
+  &.badge-info    { background-color: $brand-info; color: $yellow;}
+}
+
+.label-warning {
+  background-color: $brand-warning; color: $yellowDark;
 }
 
 .border-default { border-color: $lightGrayTwo; }
@@ -386,6 +406,7 @@ HR {
 
   .dropdown-header {
     padding-left: 10px;
+    color: $midGrayDark;
   }
 
   & > li > a {
@@ -411,7 +432,7 @@ HR {
 }
 
 .badge.state {
-  border-radius: 1px;
+  border-radius: 90px;
   font-size: 11px;
   font-weight: $normal-weight;
   text-transform: uppercase;
@@ -429,7 +450,7 @@ LABEL {
 FORM LABEL,
 .horizontal-form LABEL,
 .form-group LABEL {
-  color: #abb6b9;
+  color: $darkestGrayTwo;
   font-weight: $normal-weight;
 }
 

app/styles/catalog.scss

@@ -60,7 +60,7 @@ $lines-to-show: 4;
   }
 
   H4 {
-    font-weight: bold;
+    font-weight: 900;
   }
 
   .preview-content {

app/styles/environment.scss

@@ -36,7 +36,6 @@ $stateBorder: 2px;
     top: ($stackHeight - $stateBorder)/2 - $stateRadius;
     text-align: center;
     line-height: $stateRadius*2;
-    color: white;
   }
 
   .count {
@@ -45,7 +44,7 @@ $stateBorder: 2px;
 
     P {
       margin: 12px 0 0 0;
-      font-weight: bold;
+      font-weight: 900;
       text-align: center;
       font-size: 14px;
       position: relative;

app/styles/fonts.scss

@@ -1,31 +1,38 @@
-// Thanks: https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
+/* Webfont: Lato-Black 900*/
-// Open Sans by Steve Matteson, Apache License 2.0
-/* open-sans-300 - latin */
 @font-face {
-  font-family: 'Open Sans';
+    font-family: 'Lato';
-  font-style: normal;
+    src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
-  font-weight: 300;
+    src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  src: local('Open Sans Light'), local('OpenSans-Light'),
+         url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+         url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+         url('fonts/Lato-Black.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
 }
-/* open-sans-regular - latin */
+/* Webfont: Lato-Light 300 */
 @font-face {
-  font-family: 'Open Sans';
+    font-family: 'Lato';
-  font-style: normal;
+    src: url('fonts/Lato-Light.eot'); /* IE9 Compat Modes */
-  font-weight: 400;
+    src: url('fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  src: local('Open Sans'), local('OpenSans'),
+         url('fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+         url('fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+         url('fonts/Lato-Light.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 300;
+    text-rendering: optimizeLegibility;
 }
-/* open-sans-600 - latin */
+/* Webfont: Lato-Medium 500*/
 @font-face {
-  font-family: 'Open Sans';
+    font-family: 'Lato';
-  font-style: normal;
+    src: url('fonts/Lato-Medium.eot'); /* IE9 Compat Modes */
-  font-weight: 600;
+    src: url('fonts/Lato-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+         url('fonts/Lato-Medium.woff2') format('woff2'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+ */
+         url('fonts/Lato-Medium.woff') format('woff'), /* Modern Browsers */
-       url('fonts/open-sans-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+         url('fonts/Lato-Medium.ttf') format('truetype');
+    font-style: normal;
+    font-weight: 500;
+    text-rendering: optimizeLegibility;
 }
 
 // Animated Icons

app/styles/header.scss

@@ -39,6 +39,7 @@ HEADER {
       &>A {
         height: $topHeight;
         line-height: $topHeight;
+        position: relative;
       }
 
       &>A {
@@ -47,7 +48,16 @@ HEADER {
         }
         &.active {
           color: white;
-          border-bottom: solid $primary;
+          &:after{
+                content: "";
+                border-width: 5px;
+                border-color: transparent;
+                border-bottom-color: white;
+                border-style: solid;
+                position: absolute;
+                bottom: -2px;
+                left: 45%;
+          }
         }
       }
     }
@@ -177,7 +187,7 @@ HEADER {
   .bottom-row {
     min-height: $bottomHeight;
     background-color: white;
-    border-bottom: solid 2px $lightGrayTwo;
+    border-bottom: solid 2px $lightGray;
 
     NAV {
       font-size: 14px;
@@ -190,12 +200,22 @@ HEADER {
         color: $midGrayDark;
         line-height: 25px;
         text-align: center;
+        position: relative;
         &:hover {
           color: $blueTwo
         }
         &.active {
           color: $primary;
-          background-color: rgba($lightTeal, 0.1);
+          &:after{
+            content: "";
+            border-width: 5px;
+            border-color: transparent;
+            border-bottom-color: $lightGray;
+            border-style: solid;
+            position: absolute;
+            bottom: -2px;
+            left: 45%;
+          }
         }
 
         I {

app/styles/layout.scss

@@ -35,11 +35,7 @@ B {
 }
 
 .farm {
-  background-image: url('images/logos/login-bg.jpg');
+  background-color: $body-bg;
-  background-position: center center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  overflow: hidden;
 }
 
 /**********
@@ -182,6 +178,7 @@ UL.list-lines {
     margin-top: 5px;
     border-bottom: 1px solid #e8ecf2;
     font-size: $font-size-small;
+    padding: 5px 0 5px 15px;
 
     LABEL {
       font-weight: $normal-weight;
@@ -309,18 +306,28 @@ TABLE.graphs {
 }
 
 .farm-box {
+  h1 {
+        background-image: url(images/logos/cowhide.jpg);
+        background-size: cover;
+        padding: 40px 20px;
+        color: white;
+        position: relative;
+
+        .logo {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -25px;
+        }
+  }
+
   SECTION {
     min-width: 50%;
-    margin: 20px auto 0 auto;
     background-color: white;
     border-radius: $border-radius-large;
     padding: 20px;
     box-shadow: $boxShadow;
   }
-
-  SECTION:first-of-type {
-    margin-top: 50px;
-  }
 }
 
 .hand {
@@ -391,7 +398,8 @@ $spacing-property-map: (
 
 .btn-circle-plus {
   @extend .btn-circle;
-  background-image: url('images/circle-plus.svg');
+    font-size: 1.5em;
+    line-height: 0;
 }
 
 .btn-circle-x {
@@ -672,8 +680,8 @@ ASIDE {
 
     A {
       border: 0 !important;
-      background-color: $lightGrayTwo;
+      background-color: $lightGray;
-      color: $lightGrayDark;
+      color: $darkestGrayTwo;
     }
 
     &.active A,

app/styles/login.scss

@@ -1,19 +1,28 @@
 .login {
   color: #848a9a;
   text-align: center;
+  position: relative;
 
   .logo {
-    background-image: url('images/logos/dark.svg');
+    height: 55px;
-    width: 44px;
+    width: 55px;
-    height: 25px;
+    background-image: url(images/logos/main.svg);
     background-repeat: no-repeat;
-    background-size: 44px;
+    background-size: 39px;
+    background-position: center center;
+    border-radius: 50%;
     margin: 0 auto;
+    background-color: $primary;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 115px;
+    z-index: 5;
   }
 
   H1 {
     font-size: 28px;
-    color: #393d47;
+    color: white;
   }
 
   SECTION {

app/styles/multi-stats.scss

@@ -0,0 +1,58 @@
+.container-multi-stat {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  margin-bottom: 20px;
+}
+.multi-stats {
+  border-left: 1px solid $gray-light;
+  border-right: 1px solid $gray-light;
+  border-bottom: 1px solid $gray-light;
+  background-color: white;
+  >div[class*='-3'] {
+    padding: 12px;
+    min-height: 50px;
+    &:not(:first-of-type) {
+      border-left: 1px solid $gray-light;
+    }
+  }
+}
+
+
+.nav-tabs {
+  &.shadowed {
+    a {
+      box-shadow: inset 0px 0px 1px rgba(0,0,0,.15);
+    }
+    li.active {
+      a {
+        box-shadow: none;
+      }
+    }
+    li {
+      margin-bottom: 1px;
+    }
+  }
+}
+
+.table-flat {
+  background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  table {
+    thead {
+      background-color: $gray-light;
+      color: white;
+      th:first-of-type {
+        padding-left: 10px;
+      }
+    }
+    tr {
+      td:first-of-type {
+        padding-left: 10px;
+      }
+      td {
+        i.icon-circle-o {
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+}

app/styles/pod.scss

@@ -52,7 +52,6 @@ $subpod-detail: #9a9a9a;
     display: inline-block;
     border-bottom-left-radius: $border-radius-base;
     border-bottom-right-radius: $border-radius-base;
-    color: white;
     font-weight: 400;
     text-transform: uppercase;
 

app/styles/prism-theme.scss

@@ -108,7 +108,7 @@ pre[class*="language-"] {
 
 .token.important,
 .token.bold {
-  font-weight: bold;
+  font-weight: 900;
 }
 .token.italic {
   font-style: italic;

ember-cli-build.js

@@ -76,12 +76,18 @@ module.exports = function(defaults) {
   app.import('vendor/icons/fonts/rancher-icons.ttf',  {destDir: 'assets/fonts'});
   app.import('vendor/icons/fonts/rancher-icons.woff', {destDir: 'assets/fonts'});
 
-  app.import('vendor/open-sans/open-sans-v13-latin-300.woff',       {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Light.ttf',       {destDir: 'assets/fonts'});
-  app.import('vendor/open-sans/open-sans-v13-latin-300.woff2',      {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Light.eot',       {destDir: 'assets/fonts'});
-  app.import('vendor/open-sans/open-sans-v13-latin-600.woff',       {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Light.woff',       {destDir: 'assets/fonts'});  
-  app.import('vendor/open-sans/open-sans-v13-latin-600.woff2',      {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Light.woff2',      {destDir: 'assets/fonts'});
-  app.import('vendor/open-sans/open-sans-v13-latin-regular.woff',   {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Black.ttf',       {destDir: 'assets/fonts'});
-  app.import('vendor/open-sans/open-sans-v13-latin-regular.woff2',  {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Black.eot',       {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Black.woff',       {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Black.woff2',      {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Medium.ttf',   {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Medium.eot',   {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Medium.woff',   {destDir: 'assets/fonts'});
+  app.import('vendor/lato/Lato-Medium.woff2',  {destDir: 'assets/fonts'});
 
   return app.toTree();
 };

vendor/bootswatch-cosmo/_variables.scss

@@ -16,25 +16,26 @@ $gray-lighter:           #eff2f6; //lighten($gray-base, 90%); // #eee
 
 $brand-primary:         #0075a8;
 $brand-success:         #2ecc71;
-$brand-info:            #f9e79f;
+$brand-info:            #78c9cf;
-$brand-warning:         #f3be90;
+$brand-warning:         #fbf9de;
 $brand-danger:          #f15354;
 
-$primary: #0075a8;
+$primary: 				#0075a8;
-$primaryDark: #00558b;
+$primaryDark: 			#00558b;
 
-$red: #e74c3c;
+$red: 					#e74c3c;
-$redDark: #c0392b;
+$redDark: 				#c0392b;
-$redTwo: #f15354;
+$redTwo: 				#f15354;
-$redTwoDark: #ea3738;
+$redTwoDark: 			#ea3738;
-$orange: #e67e22;
+$orange: 				#e67e22;
-$orangeDark: #d35401;
+$orangeDark: 			#d35401;
 
 $yellow: #f1c40f;
 $yellowDark: #e49701;
 $yellowTwo: #eadf5a;
 $yellowTwoDark: #d7c320;
 
+
 $green: #2ecc71;
 $greenDark: #27ae60;
 $greenTwo: #a5c63b;
@@ -105,7 +106,7 @@ $link-hover-decoration: none;
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:  "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
+$font-family-sans-serif:  "Lato", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", Calibri, Candara, Arial, sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -556,9 +557,9 @@ $state-info-text:                #fff;
 $state-info-bg:                  $brand-info;
 $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%);
 
-$state-warning-text:             #fff;
 $state-warning-bg:               $brand-warning;
-$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 3%);
+$state-warning-text:             $yellowDark;
+$state-warning-border:           $yellowDark;
 
 $state-danger-text:              #fff;
 $state-danger-bg:                $brand-danger;

vendor/icons

@@ -1 +1 @@
-Subproject commit aface0a579380fe81e755e2d126f9bb28265703a
+Subproject commit 864e685f9345d8543f12469faea475b8f05e8648