tanis list and storage view.

app/components/form-balancer-listeners/template.hbs

@@ -4,7 +4,7 @@
   </div>
   <div class="col-xs-6 col-md-8">
     {{#unless editing}}
-      <button class="btn-circle-text" {{action "addListener"}}><i class="icon icon-plus-circle"/> Add Port</button>
+      <button class="btn-circle-text" {{action "addListener"}}><i class="icon icon-plus-circle"/> <span>Add Port</span></button>
     {{/unless}}
   </div>
 </div>

app/components/form-key-value/template.hbs

@@ -1,5 +1,5 @@
 <div class="form-control-static">
-  <button class="btn-circle-text" {{action "add"}}><i class="icon icon-plus-circle"/> Add {{nameLabel}}</button>
+  <button class="btn-circle-text" {{action "add"}}><i class="icon icon-plus-circle"/> <span>Add {{nameLabel}}</span></button>
 </div>
 
 {{#if ary.length}}

app/components/form-scheduling/template.hbs

@@ -47,7 +47,7 @@
 
   {{#unless isRequestedHost}}
     <div class="form-control-static">
-      <button class="btn-circle-text" {{action "addSchedulingRule"}}><i class="icon icon-plus-circle"/> Add Scheduling Rule</button>
+      <button class="btn-circle-text" {{action "addSchedulingRule"}}><i class="icon icon-plus-circle"/> <span>Add Scheduling Rule</span></button>
     </div>
     {{#if affinityLabelArray.length}}
       <table class="table fixed no-lines no-top-padding tight small">

app/components/form-ssl-termination/template.hbs

@@ -25,7 +25,7 @@
           <tr class="text-muted">
             <td>
               {{#if alternateCertificates.length}}
-                <button class="btn-circle-text" {{action "addAlternate"}}><i class="icon icon-plus-circle"/> Add Alternate Certificate</button>
+                <button class="btn-circle-text" {{action "addAlternate"}}><i class="icon icon-plus-circle"/> <span>Add Alternate Certificate</span></button>
               {{else}}
                 <div class="text-muted form-control-static">There are no other certificates to use.</div>
               {{/if}}

app/components/form-targets/template.hbs

@@ -3,7 +3,7 @@
     <label>Targets</label>
   </div>
   <div class="col-xs-6 col-md-8">
-    <button class="btn-circle-text" {{action "addTargetService"}}><i class="icon icon-plus-circle"/> Add Service</button>
+    <button class="btn-circle-text" {{action "addTargetService"}}><i class="icon icon-plus-circle"/> <span>Add Service</span></button>
   </div>
 </div>
 <div class="row">

app/components/form-user-labels/template.hbs

@@ -1,5 +1,5 @@
 <div class="form-control-static">
-  <button class="btn-circle-text" {{action "addUserLabel"}}><i class="icon icon-plus-circle"/> Add Label</button>
+  <button class="btn-circle-text" {{action "addUserLabel"}}><i class="icon icon-plus-circle"/> <span>Add Label</span></button>
 </div>
 
 {{#if userLabelArray.length}}

app/components/storagepool-section/template.hbs

@@ -37,17 +37,17 @@
   </div>
 </div>
 
-<div class="stack-body r-p0">
-  <div class="subsection">
+<div class="stack-body r-p10 row row-full-height">
+  <div class="subsection gutter col-xs-6 col-md-3 col-full-height">
     <h6>Hosts</h6>
-    <div class="clearfix r-p10">
+    <div class="clearfix r-p10 hosts">
       {{#each hostsByName as |host|}}
-        <span class="r-pr10"><i class="icon {{host.stateIcon}} {{host.stateBackground}}"></i> {{#link-to "host" host.id}}{{host.displayName}}{{/link-to}}</span>
+        <div class="r-m10"><i class="icon {{host.stateIcon}} {{host.stateBackground}}"></i> {{#link-to "host" host.id}}{{host.displayName}}{{/link-to}}</div>
       {{/each}}
     </div>
   </div>
   {{#if model.volumes.length}}
-    <div class="subsection">
+    <div class="subsection gutter col-xs-6 col-md-9 col-full-height">
       <h6>Volumes</h6>
       <table class="grid fixed" style="margin-bottom: 0">
         <thead>

app/styles/bootstrap-tweak.scss

@@ -58,6 +58,12 @@ H1, H2, H3, H4, H5, H6, SECTION.header {
   width: 100%;
   max-width: 100%;
   margin-bottom: $line-height-computed;
+
+  thead {
+    th {
+      padding: 5px 0;
+    }
+  }
   // Cells
   > thead,
   > tbody,
@@ -477,6 +483,8 @@ FORM LABEL,
 .form-group LABEL {
   color: $darkestGrayTwo;
   font-weight: $normal-weight;
+  margin: 0;
+  line-height: 25px;
 }
 
 .dropdown-menu LABEL,
@@ -511,6 +519,16 @@ FORM LABEL,
   }
 }
 
+// Gutters on columns
+.gutter {
+  padding-right:7px;
+  padding-left:7px;
+}
+.gutter:not(:first-child),.gutter:not(:last-child) {
+    padding-right:7px;
+  padding-left:7px;
+}
+
 // Equal height columns
 .row-full-height {
   height: 100%;

app/styles/environment.scss

@@ -144,11 +144,16 @@ $singleCountWidth : 120px;
   }
 
   .subsection {
+
     H6 {
-      background-color: #f8f9fa;
-      padding: 2px 5px;
-      margin: 0 1px;
-      border-bottom: 1px solid #f0f3f5;
+      background-color: $lightTeal;
+      color: white;
+      padding: 10px;
+    }
+
+    & .hosts {
+      background: adjust-color($lightTeal, $saturation:-15%, $lightness:30%);
+
     }
   }
 

app/styles/layout.scss

@@ -380,8 +380,6 @@ $spacing-property-map: (
   touch-action: manipulation;
   background-color: transparent;
   background-repeat: no-repeat;
-  width: 21px;
-  height: 21px;
   padding: 0;
   border: 0;
   text-decoration: none;
@@ -400,6 +398,12 @@ $spacing-property-map: (
   @extend .btn-circle;
   font-size: inherit;
   width: auto;
+
+  i , 
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
 }
 
 /**********

vendor/bootswatch-cosmo/_variables.scss

@@ -76,7 +76,8 @@ $brand-primary:         $blue; //button non state
 
 //states
 $brand-success:         $greenDark; //good
-$brand-info:            #78c9cf; //transitioning
+$brand-info:            $lightTeal; //transitioning
+$brand-info-secondary:  $lightTealDark; //transitioned example: sidekicks
 $brand-warning:         $yellow; //orange degraded
 $brand-danger:          #f15354; //red stopped inactive bad