Replace action-menu style, much tweaks, very css

app/applications-tab/catalog/template.hbs

@@ -27,7 +27,7 @@
   {{#each arrangedContent as |catalogItem|}}
     <div class="container-catalog text-center">
       <h5>{{catalogItem.name}}</h5>
-      <img src={{catalogItem.iconLink}} alt={{catalogItem.name}} class="center-block r-mt20" style="height:75px;">
+      <img src="{{catalogItem.iconLink}}" alt="{{catalogItem.name}}" class="center-block r-mt20" style="height:75px;">
       <div class="r-mt10 description">{{catalogItem.description}}</div>
       {{#link-to "applications-tab.catalog.launch" catalogItem.path class="btn btn-sm btn-primary"}}View Details{{/link-to}}
     </div>

app/components/account-row/template.hbs

@@ -30,5 +30,5 @@
   </td>
 {{/if}}
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/action-menu/component.js

@@ -1,21 +1,38 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  model: null,
+  size: 'xs',
+  showPrimary: true,
+
   resourceActions: Ember.inject.service('resource-actions'),
 
-  model: null,
+  tagName: 'div',
+  classNames: ['btn-group','resource-actions','action-menu'],
 
-  classNames: ['resource-actions'],
+  didInsertElement() {
+    this.$().tooltip({
+      selector: '*[tooltip]',
+      animation: false,
+      container: 'body',
+      title: function() {
+        return $(this).attr('tooltip');
+      }
+    });
+  },
 
-  click(event) {
+  click(e) {
-    event.preventDefault();
+    if ( Ember.$(e.target).closest('.resource-actions').length )
-    event.stopPropagation();
+    {
-    this.get('resourceActions').show(this.get('model'), event.target, this.$());
+      e.preventDefault();
+      e.stopPropagation();
+      this.get('resourceActions').show(this.get('model'), e.target, this.$());
+    }
   },
 
   actions: {
-    clicked: function(actionName) {
+    sendAction: function(action) {
-      this.get('model').send(actionName);
+      this.get('model').send(action);
     }
   },
 });

app/components/action-menu/template.hbs

@@ -1 +1,7 @@
-<button type="button" class="btn-circle-menu"></button>
+{{#if showPrimary}}
+  {{#each model.primaryActions as |act|}}
+    <button type="button" class="btn btn-default btn-{{size}}" tooltip="{{act.label}}"><i class="icon icon-fw {{act.icon}}" {{action 'sendAction' act.action}}></i></button>
+  {{/each}}
+{{/if}}
+<button type="button" class="btn btn-default btn-{{size}} more-actions"><i class="icon icon-fw icon-chevron-down"></i></button>
+

app/components/apikey-row/template.hbs

@@ -16,5 +16,5 @@
   <div class="text-muted">{{date-calendar model.created}}</div>
 </td>
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/certificate-row/template.hbs

@@ -22,5 +22,5 @@
   </span>
 </td>
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/container-row/template.hbs

@@ -30,5 +30,5 @@
   </td>
 {{/if}}
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/container-subpod/template.hbs

@@ -1,4 +1,4 @@
-{{action-menu model=model}}
+{{action-menu model=model showPrimary=false}}
 
 {{#if groupHasChildren}}
 <div class="subpod-children clearfix">

app/components/host-pod/template.hbs

@@ -1,7 +1,5 @@
 <div class="pod-header">
-  <div class="resource-actions">
+  <div class="resource-actions">{{partial "fast-action-menu"}}</div>
-    <button type="button" class="btn-circle-menu"></button>
-  </div>
 
   <div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div>
   <div class="pod-icon"><i class="icon icon-lg {{model.stateIcon}} {{model.stateColor}}"></i></div>
@@ -50,10 +48,10 @@
     </div>
     <div class="pod-info-line">
       {{#if model.cpuBlurb}}
-        <div class="pod-info-item"><i class="icon icon-tachometer" style="position: relative; top: -1px;"></i> {{model.cpuBlurb}}</div>
+        <div class="pod-info-item"><i class="icon icon-cpu" style="position: relative; top: -1px;"></i> {{model.cpuBlurb}}</div>
       {{/if}}
       {{#if model.memoryBlurb}}
-        <div class="pod-info-item"><i class="icon icon-microchip"></i> {{model.memoryBlurb}}</div>
+        <div class="pod-info-item"><i class="icon icon-memory"></i> {{model.memoryBlurb}}</div>
       {{/if}}
       {{#if model.diskBlurb}}
         <div class="pod-info-item"><i class="icon icon-hdd"></i> {{model.diskBlurb}}</div>

app/components/identity-avatar/component.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   identity: null,
   link: true,
-  size: 36,
+  size: 35,
 
   classNames: ['gh-avatar'],
   attributeBindings: ['aria-label:identity.name'],

app/components/identity-block/component.js

@@ -9,7 +9,7 @@ export default Ember.Component.extend({
 
   avatar: true,
   link: true,
-  size: 36,
+  size: 35,
 
   loading: false,
   didInitAttrs: function() {

app/components/lb-addtl-info/template.hbs

@@ -4,7 +4,7 @@
     <div class="state">
       <h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3>
       {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
-      {{svg-action-menu model=service size='xs'}}
+      {{action-menu model=service size='xs'}}
     </div>
     <div>
       <label class="text-muted text-bold text-uppercase r-mt15">DNS Name</label>

app/components/page-header/template.hbs

@@ -1,4 +1,4 @@
-<div class="top-row">
+<div class="top-row clearfix">
   <div class="logo" {{action "showAbout"}} aria-label="About Rancher"></div>
   <nav>
     {{#if project}}
@@ -10,8 +10,7 @@
     {{/if}}
   </nav>
 
-  <div class="right">
+  <div class="dropdown user-btn">
-    <div class="dropdown">
     <span class="user-toggle" id="user-dropdown" data-toggle="dropdown" aria-expanded="true" aria-label="User Menu: {{session.user}}">
       {{#if accessEnabled}}
         {{identity-avatar link=false identity=access.identity}}
@@ -61,9 +60,7 @@
       </li>
     </ul>
   </div>
-  </div>
 
-  <div class="right" style="padding-right: 0;">
   {{#if project}}
     <div class="btn-group project-btn">
       <button type="button" class="btn btn-link dropdown-toggle text-left clip" data-toggle="dropdown" aria-expanded="false">
@@ -108,9 +105,8 @@
     </div>
   {{/if}}
 </div>
-</div>
 
-<div class="bottom-row">
+<div class="bottom-row clearfix">
   <nav>
     {{#if isInfrastructureTab}}
       {{#link-to "hosts"}}<i class="icon icon-host"></i>Hosts{{/link-to}}
@@ -121,7 +117,7 @@
       {{#link-to "environments"}}<i class="icon icon-globe"></i> Stacks{{/link-to}}
       {{#link-to "applications-tab.catalog"}}<i class="icon icon-database"></i> Catalog{{/link-to}}
 
-      <div class="btn-group pull-right">
+      <div class="compose-download">
         <a class="dropdown-toggle hand" data-toggle="dropdown" aria-expanded="false">
           <i class="icon icon-download"></i> Rancher Compose CLI <span class="caret"></span>
         </a>

app/components/project-row/template.hbs

@@ -13,5 +13,5 @@
   {{#if model.isDefault}}<i class="icon icon-check"></i>{{else}}<span class="text-muted">&ndash;</span>{{/if}}
 </td>
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/registry-row/template.hbs

@@ -16,5 +16,5 @@
   {{date-calendar model.created}}
 </td>
 <td align="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/components/service-pod/template.hbs

@@ -1,7 +1,5 @@
 <div class="pod-header">
-  <div class="resource-actions">
+  <div class="resource-actions">{{partial "fast-action-menu"}}</div>
-    <button type="button" class="btn-circle-menu"></button>
-  </div>
 
   <div class="pod-state {{stateBackground}}"><span>{{model.displayState}}</span></div>
   <div class="pod-icon"><i class="{{model.stateIcon}} icon-lg {{iconColor}}"></i> {{iconLabel}}</div>

app/components/stack-section/template.hbs

@@ -1,21 +1,6 @@
 <div class="clearfix">
   <div class="stack-state {{model.stateBackground}}"><i class="{{model.stateIcon}}"></i></div>
 
-  <div class="right left-divider stack-actions">
-    {{upgrade-btn environmentResource=model}}
-    {{action-menu model=model}}
-  </div>
-
-  <div class="right left-divider count">
-    <p class="count">{{instanceCount}}</p>
-    <label>Container{{unless (eq instanceCount 1) 's'}}</label>
-  </div>
-
-  <div class="right left-divider count">
-    <p>{{model.unremovedServices.length}}</p>
-    <label>Service{{unless (eq model.unremovedServices.length 1) 's'}}</label>
-  </div>
-
   <div class="left collapser">
     <a {{action "toggleCollapse"}} class="btn btn-link"><i class="icon {{if collapsed 'icon-plus' 'icon-minus'}}" alt="Toggle stack details" title=""></i></a>
   </div>
@@ -25,17 +10,45 @@
       <span class="divider clip">{{#link-to "environment" model.id}}{{model.name}}{{/link-to}}</span>
     </h4>
   </div>
+
+  <div class="right right-divider stack-actions">
+    {{action-menu model=model}}
+  </div>
+
+  <div class="right right-divider count">
+    <p class="count">{{instanceCount}}</p>
+    <label>Container{{unless (eq instanceCount 1) 's'}}</label>
+  </div>
+
+  <div class="right right-divider count">
+    <p>{{model.unremovedServices.length}}</p>
+    <label>Service{{unless (eq model.unremovedServices.length 1) 's'}}</label>
+  </div>
+
+  <div class="right right-divider stack-template">
+    {{upgrade-btn environmentResource=model}}
+  </div>
+
+  <div class="right right-divider stack-template">
+    <div class="btn-group">
+      {{#link-to "service.new" (query-params environmentId=model.id) classNames="btn btn-default btn-sm"}}Add Service{{/link-to}}
+      <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+        <span class="caret"></span>
+        <span class="sr-only">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li>{{#link-to "service.new-balancer" (query-params environmentId=model.id)}}Add Load Balancer{{/link-to}}</li>
+        <li>{{#link-to "service.new-alias" (query-params environmentId=model.id)}}Add Service Alias{{/link-to}}</li>
+        <li>{{#link-to "service.new-external" (query-params environmentId=model.id)}}Add External Service{{/link-to}}</li>
+      </ul>
+    </div>
+  </div>
+
 </div>
 
 {{#liquid-if (not collapsed)}}
   <div class="r-pl10 r-pr10 r-pb10">
     <table class="grid fixed" style="margin-bottom: 0">
-      <tr>
-        <th>&nbsp;</th>
-        <th>&nbsp;</th>
-        <th width="230">&nbsp;</th>
-        <th width="50">&nbsp;</th>
-      </tr>
       {{#each model.services as |service|}}
         <tr>
           <td><i class="{{service.stateIcon}} {{service.stateColor}}"></i> {{#link-to "service" model.id service.id}}{{service.displayName}}{{/link-to}}</td>

app/components/svg-action-menu/component.js

@@ -1,25 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-  resourceActions: Ember.inject.service('resource-actions'),
-
-  tagName: 'div',
-
-  classNames: [/*,'pull-right', */ 'btn-group','graph-actions'/*, 'btn-group-xs'*/],
-
-  model: null,
-
-  click(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (Ember.$(event.target).is('#dropdown-toggler')) {
-      this.get('resourceActions').show(this.get('model'), event.target, this.$());
-    }
-  },
-
-  actions: {
-    sendAction: function(action) {
-      this.get('model').send(action);
-    }
-  },
-});

app/components/svg-action-menu/template.hbs

@@ -1,7 +0,0 @@
-{{~#if (eq model.state 'active')}}
-  <button type="button" class="btn btn-danger btn-{{size}}"><i class="icon icon-fw icon icon-pause" {{action 'sendAction' 'deactivate'}}></i></button>
-{{~else}}
-  <button type="button" class="btn btn-success btn-{{size}}"><i class="icon icon-fw icon icon-play" {{action 'sendAction' 'activate'}}></i></button>
-{{~/if}}
-<button type="button" class="btn btn-default btn-{{size}} " id="dropdown-toggler"><span class="caret"></span></button>
-

app/components/svg-service-container/component.js

@@ -21,12 +21,13 @@ export default Ember.Component.extend({
 
   click: function(e) {
     var target = e.target;
-    if (!Ember.$(target).hasClass('icon-pause') && !Ember.$(target).hasClass('icon-play') && !Ember.$(target).hasClass('graph-actions')) {
+    if ( Ember.$(target).closest('action-menu').length === 0 )
+    {
       this.sendAction('action', this.get('node.service'));
     }
+
     e.preventDefault();
     e.stopPropagation();
-
   },
 
   transform: Ember.computed('node.{x,y}', function() {

app/components/svg-service-container/template.hbs

@@ -15,7 +15,7 @@
           <h5>{{node.service.name}}</h5>
         </div>
         <div class="row actions">
-          {{svg-action-menu model=node.service size='xs'}}
+          {{action-menu model=node.service size='xs'}}
         </div>
         {{#if (not-eq node.service.displayType 'Service')}}
           <div class="container-badge">

app/components/volume-row/template.hbs

@@ -27,5 +27,5 @@
 </td>
 
 <td class="actions">
-  <button type="button" class="btn-circle-menu"></button>
+  {{partial "fast-action-menu"}}
 </td>

app/hosts/index/template.hbs

@@ -3,7 +3,7 @@
     <span class="right-divider">Hosts</span>
 
     <div class="btn-group right-divider" style="margin: 0 10px 0 -5px;">
-      {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}<i class="icon icon-ellipsis" data-placement="bottom" tooltip="Tiny Dots"></i>{{/link-to}}
+      {{#link-to "hosts" (query-params mode="dot") classNames="btn btn-sm btn-default"}}<i class="icon icon-ellipsis" data-placement="bottom"></i>{{/link-to}}
       {{#link-to "hosts" (query-params mode="list") classNames="btn btn-sm btn-default"}}<i class="icon icon-thumbnails" data-placement="bottom" tooltip="Containers"></i>{{/link-to}}
       {{#link-to "hosts" (query-params mode="grouped") classNames="btn btn-sm btn-default"}}<i class="icon icon-layeredgroup" data-placement="bottom" tooltip="Grouped Stacks &amp; Sidekicks"></i>{{/link-to}}
     </div>

app/mixins/cattle-transitioning-resource.js

@@ -69,6 +69,29 @@ export default Ember.Mixin.create({
     return [];
   }.property(),
 
+  primaryActions: function() {
+    // The default implementation returns the first enabled item that has an icon
+    // and is before the first divider.  If you want a different behavior or 
+    // multiple primaryActions, you can override this in a specific model.
+    var all = this.get('availableActions');
+    var obj;
+    for ( var i = 0 ; i < all.get('length') ; i++ )
+    {
+      obj = all.objectAt(i);
+      if ( Ember.get(obj,'divider') )
+      {
+        // Nothing was found, stop at the first divider;
+        return [];
+      }
+      else if ( Ember.get(obj,'enabled') && Ember.get(obj,'icon') && Ember.get(obj,'action') !== 'promptDelete')
+      {
+        return [obj];
+      }
+    }
+
+    return [];
+  }.property('availableActions.@each.enabled'),
+
   actions: {
     promptDelete: function() {
       this.get('application').set('confirmDeleteResources', [ this ] );

app/mixins/faster-links-and-menus.js

@@ -8,7 +8,7 @@ export default Ember.Mixin.create({
   resourceActions: Ember.inject.service('resource-actions'),
 
   click(event) {
-    if ( event.target.tagName === 'BUTTON' && $(event.target).hasClass('btn-circle-menu') ) // Only menu buttons
+    if ( $(event.target).closest('BUTTON').hasClass('more-actions') ) // Only menu buttons
     {
       this.get('resourceActions').show(this.get('model'), event.target);
     }

app/styles/bootstrap-tweak.scss

@@ -1,11 +1,6 @@
 $normal-weight: 400;
 $bold-weight: 600;
 
-* {
-  transition: ease all .25s;
-  box-sizing: border-box;
-}
-
 a {
   color: $blue;
   &:focus {
@@ -98,18 +93,15 @@ fieldset[disabled] .btn {
   border-bottom-width: 2px;
 }
 
-.btn-group {
 .btn-default {
-    background-color: $lightGrayTwo;
-    color: $midGray;
-    border: solid 1px $lightGray;
   box-shadow: none;
 
-    &.active {
+  &:hover {
-      background: white
+    color: white;
   }
 }
 
+.btn-group {
   &.clearable {
     .icon {
       position: absolute;
@@ -219,6 +211,7 @@ fieldset[disabled] .btn {
 
 
 
+.bg-default { background-color: $lightGrayTwo; color: $midGray; }
 .bg-primary { background-color: $brand-primary; }
 .bg-success { background-color: $brand-success; }
 .bg-danger  { background-color: $brand-danger; }
@@ -226,12 +219,14 @@ fieldset[disabled] .btn {
 .bg-info    { background-color: $brand-info; }
 
 .badge {
+  &.bg-default { background-color: $lightGrayTwo; color: $midGray; }
   &.bg-primary { background-color: $brand-primary; }
   &.bg-success { background-color: $brand-success; }
   &.bg-danger  { background-color: $brand-danger; }
   &.bg-warning { background-color: $brand-warning; }
   &.bg-info    { background-color: $brand-info; }
 
+  &.badge-default { background-color: $lightGrayTwo;  color: $midGray;}
   &.badge-primary { background-color: $brand-primary; }
   &.badge-success { background-color: $brand-success; }
   &.badge-danger  { background-color: $brand-danger; }
@@ -239,12 +234,14 @@ fieldset[disabled] .btn {
   &.badge-info    { background-color: $brand-info; }
 }
 
+.border-default { border-color: $lightGrayTwo; }
 .border-primary { border-color: $brand-primary; }
 .border-success { border-color: $brand-success; }
 .border-danger  { border-color: $brand-danger; }
 .border-warning { border-color: $brand-warning; }
 .border-info    { border-color: $brand-info; }
 
+.border-top-default { border-top-color: $lightGrayTwo !important; }
 .border-top-primary { border-top-color: $brand-primary !important; }
 .border-top-success { border-top-color: $brand-success !important; }
 .border-top-danger  { border-top-color: $brand-danger !important; }

app/styles/environment.scss

@@ -26,7 +26,7 @@ $stateBorder: 2px;
   }
 
   .count {
-    min-width: 120px;
+    min-width: 99.5px;
     text-align: center;
 
     P {
@@ -34,6 +34,8 @@ $stateBorder: 2px;
       font-weight: bold;
       text-align: center;
       font-size: 14px;
+      position: relative;
+      top: 5px;
     }
 
     LABEL {
@@ -60,9 +62,10 @@ $stateBorder: 2px;
     height: $stackHeight;
   }
 
-  .left-divider {
+  .right-divider {
-    padding-left: 10px;
+    padding-right: 10px;
-    border-left: 2px dotted $lightGrayTwoDark;
+    border-right: 1px dotted $lightGrayTwoDark;
+
   }
 
   .collapser {
@@ -75,11 +78,21 @@ $stateBorder: 2px;
 
   .stack-actions {
     line-height: $stackHeight;
+    width: 69px;
+    text-align: right;
+    padding-right: 10px;
+    border-right: 0;
+  }
+
+  .stack-template {
+    line-height: $stackHeight;
+    min-width: 150px;
+    text-align: center;
   }
 
   .resource-actions BUTTON,
   .collapser {
-    padding: 5px;
+    padding: 3px 5px;
   }
 
   .badge {
@@ -95,11 +108,19 @@ $stateBorder: 2px;
       border-bottom: 1px solid $lightGray;
     }
 
-    TR:nth-child(odd) TD {
+    TD:nth-child(3) {
-      background-color: $lightGrayTwo;
+      width: 230px;
     }
 
-    TR:nth-child(even) TD {
+    TD:nth-child(4) {
+      width: 80px;
+    }
+
+    //TR:nth-child(odd) TD {
+    //  background-color: $lightGrayTwo;
+    //}
+
+    TR:nth-child(odd) TD {
       background-color: #fff;
     }
 

app/styles/github-avatar.scss

@@ -38,14 +38,13 @@
 }
 
 .gh-avatar {
-  width: 37px;
+  width: 39px;
-  height: 37px;
+  height: 39px;
 
-  border: 3px solid $lightGray;
+  border: 2px solid $lightGray;
   border-radius: 50%;
   background-color: $black;
   display: inline-block;
-  box-sizing: border-box;
 
   IMG {
     border-radius: 50%;

app/styles/header.scss

@@ -1,17 +1,16 @@
 /**********
 * Header (top bar)
 **********/
+$topHeight: ($header-height * 0.45);
+$bottomHeight: ($header-height * 0.55);
+
 HEADER {
   position: relative;
   z-index: 5;
-  height: $header-height;
-  background-color: $black;
 
   NAV {
-    &>A, &>.btn-group>A {
+    &>A {
-      float: left;
+      display: inline-block;
-      height: ($header-height * .45);
-      line-height: ($header-height * .45);
       padding: 0 20px;
       vertical-align: top;
       font-weight: normal;
@@ -30,10 +29,18 @@ HEADER {
   }
 
   .top-row {
-    height: ($header-height * .45);
+    background-color: $black;
+    min-height: $topHeight;
 
     NAV {
+      float: left;
       font-size: 14px;
+
+      &>A {
+        height: $topHeight;
+        line-height: $topHeight;
+      }
+
       &>A {
         &:hover {
           background: $blackDark;
@@ -48,7 +55,7 @@ HEADER {
     .logo {
       cursor: pointer;
       float: left;
-      height: ($header-height * .45);
+      height: $topHeight;
       width: 68px;
       background-image: url('images/logos/main.svg');
       background-color: $blackDark;
@@ -56,13 +63,22 @@ HEADER {
       background-repeat: no-repeat;
     }
 
+    .user-btn {
+      float: right;
+      vertical-align: top;
+      padding: 3px 15px;
+    }
+
     .project-btn {
+      float: right;
+
       margin-right: 10px;
       border-radius: 3px;
       max-width: 200px;
 
       .dropdown-toggle {
-        height: 50px;
+        height: $topHeight;
+        line-height: $topHeight;
         padding: 0;
         margin-right: 10px;
         max-width: 100%;
@@ -90,17 +106,10 @@ HEADER {
     }
 
     .user-menu {
-      margin-top: -13px;
       z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */
       padding-top: 0;
       width: 250px;
       border-radius: 2px;
-
-      li {
-        a{
-          padding: 15px;
-        }
-      }
     }
 
     .user-dropdown-arrow {
@@ -166,16 +175,18 @@ HEADER {
   }
 
   .bottom-row {
-    height: ($header-height * .55);
+    min-height: $bottomHeight;
     background-color: white;
     border-bottom: solid 2px $lightGrayTwo;
+
     NAV {
       font-size: 14px;
       margin-left: 68px;
-      overflow: hidden;
+
-      clear: both;
-      height: 100%;
       &>A {
+        height: $bottomHeight;
+        line-height: $bottomHeight;
+        padding-top: 12px;
         color: $midGrayDark;
         line-height: 25px;
         text-align: center;
@@ -184,18 +195,40 @@ HEADER {
         }
         &.active {
           color: $primary;
+          background-color: rgba($lightTeal, 0.1);
         }
-        &>* {
+
+        I {
           display: block;
         }
       }
+
+      .compose-download {
+        display: inline-block;
+        float: right;
+        margin-right: 20px;
+        height: $bottomHeight;
+        line-height: $bottomHeight;
+        color: $midGrayDark;
+
+        A {
+          color: $midGrayDark;
+
+          &:hover {
+            color: $blueTwo
+          }
+          &.active {
+            color: $primary;
+          }
+        }
+      }
     }
 
   }
 
   H3 {
     margin: 0;
-    line-height: ($header-height * .55);
+    line-height: $bottomHeight;
     color: #fff;
     padding-left: 20px;
     white-space: nowrap;
@@ -211,13 +244,5 @@ HEADER {
       color: $header-link-text;
     }
   }
-
-  .right {
-    float: right;
-    height: ($header-height * .55);
-    line-height: ($header-height * .55);
-    vertical-align: top;
-    padding: 0 15px 0 15px;
-  }
 }
 

app/styles/layout.scss

@@ -483,16 +483,7 @@ $spacing-property-map: (
   background-image: url('images/circle-x.svg');
 }
 
-.btn-circle-menu {
-  @extend .btn-circle;
-  background-image: url('images/circle-menu.svg');
-}
-
 ASIDE {
-  .btn-circle-menu {
-    background-image: url('images/circle-menu-white.svg');
-  }
-
   .btn-circle-plus {
     background-image: url('images/circle-plus-white.svg');
   }
@@ -773,6 +764,9 @@ ASIDE {
     &.active A:hover {
       background-color: white;
       color: $orange;
+      position: relative;
+      z-index: 1;
+      box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.15);
     }
   }
 }

app/styles/resource-actions.scss

@@ -1,14 +1,5 @@
 .resource-actions {
   display: inline-block;
-
-  BUTTON {
-    color: #444;
-    padding: 0;
-  }
-
-  BUTTON:hover {
-    color: #1d6fa5;
-  }
 }
 
 /*

app/styles/service-addtl-info.scss

@@ -109,7 +109,7 @@
       font-size: 11px;
     }
   }
-  .graph-actions {
+  .action-menu {
     margin-right: 15px;
   }
 }

app/templates/fast-action-menu.hbs

@@ -0,0 +1 @@
+<button type="button" class="btn btn-default btn-xs more-actions"><i class="icon icon-chevron-down"></i></button>

app/templates/service-addtl-info.hbs

@@ -4,7 +4,7 @@
     <div class="state">
       <h3 class="{{service.stateColor}} text-capitalize">{{service.state}}</h3>
       {{#link-to 'service' service.id class='btn btn-success btn-xs r-mr15'}} View Details {{/link-to}}
-      {{svg-action-menu model=service size='xs'}}
+      {{action-menu model=service size='xs'}}
     </div>
     <div>
       <label class="text-muted text-bold text-uppercase r-mt15">Image: </label>

public/assets/images/circle-menu-white.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<g>
-	<path fill="#FFFFFF" d="M50,4.8c24.8,0,45.2,20.5,45.2,45.2S74.8,95.2,50,95.2S4.8,74.8,4.8,50S25.2,4.8,50,4.8 M50,0
-		C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"/>
-</g>
-<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M27.1,40.5"/>
-<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="50" x2="73.8" y2="50"/>
-<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="35.7" x2="73.8" y2="35.7"/>
-<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="64.3" x2="73.8" y2="64.3"/>
-</svg>

public/assets/images/circle-menu.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
-<g>
-	<path fill="#37B7E1" d="M50,4.8c24.8,0,45.2,20.5,45.2,45.2S74.8,95.2,50,95.2S4.8,74.8,4.8,50S25.2,4.8,50,4.8 M50,0
-		C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"/>
-</g>
-<path fill="none" stroke="#37B7E1" stroke-miterlimit="10" d="M27.1,40.5"/>
-<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="50" x2="73.8" y2="50"/>
-<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="26.2" y1="35.7" x2="73.8" y2="35.7"/>
-<line fill="none" stroke="#37B7E1" stroke-width="2" stroke-miterlimit="10" x1="26.2" y1="64.3" x2="73.8" y2="64.3"/>
-</svg>

vendor/bootswatch-cosmo/_variables.scss

@@ -17,8 +17,8 @@ $gray-lighter:           #eff2f6; //lighten($gray-base, 90%); // #eee
 $brand-primary:         #0075a8;
 $brand-success:         #2ecc71;
 $brand-info:            #f9e79f;
-$brand-warning:         #f15354;
+$brand-warning:         #f3be90;
-$brand-danger:          #f3be90;
+$brand-danger:          #f15354;
 
 $primary: #0075a8;
 $primaryDark: #00558b;
@@ -207,9 +207,9 @@ $table-border-color:            #f0f3f5;
 
 $btn-font-weight:                normal;
 
-$btn-default-color:              #fff;
+$btn-default-color:              $midGray;
-$btn-default-bg:                 $primary;
+$btn-default-bg:                 $lightGrayTwo;
-// $btn-default-border:             #e1e4e9;
+$btn-default-border:             $lightGray;
 
 $btn-primary-color:              #fff;
 $btn-primary-bg:                 $brand-primary;

vendor/icons

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