From 0cb9c5e5153d070ab51cd2c199e43ba27155745e Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Thu, 24 May 2018 11:09:50 -0600
Subject: [PATCH 1/7] Update styles for box shadows

---
 ui/app/styles/components/global-flash.scss  |  2 +-
 ui/app/styles/components/login-form.scss    |  3 +++
 ui/app/styles/components/sidebar.scss       |  6 ------
 ui/app/styles/core.scss                     |  1 +
 ui/app/styles/core/buttons.scss             |  5 +++--
 ui/app/styles/utils/_bulma_variables.scss   | 10 ++++++++++
 ui/app/templates/components/splash-page.hbs |  2 +-
 7 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 ui/app/styles/components/login-form.scss

diff --git a/ui/app/styles/components/global-flash.scss b/ui/app/styles/components/global-flash.scss
index d1c0597786..f0819100e7 100644
--- a/ui/app/styles/components/global-flash.scss
+++ b/ui/app/styles/components/global-flash.scss
@@ -15,7 +15,7 @@
   z-index: 1;
 
   .notification {
-    box-shadow: 0 0 25px rgba($black, 0.2);
+    box-shadow: $box-shadow-high;
     margin: 20px;
     @include until($desktop) {
       margin: 1rem 0;
diff --git a/ui/app/styles/components/login-form.scss b/ui/app/styles/components/login-form.scss
new file mode 100644
index 0000000000..d458abd8f8
--- /dev/null
+++ b/ui/app/styles/components/login-form.scss
@@ -0,0 +1,3 @@
+.login-form {
+  box-shadow: $box-shadow, $box-shadow-high;
+}
\ No newline at end of file
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 5e6e213538..8f580a5bc0 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -72,14 +72,8 @@
       transition: 250ms border-width;
 
       &.is-active {
-        color: $blue;
-        background-color: $dark-white;
         border-right: 4px solid $blue;
       }
-
-      &:hover {
-        background-color: $dark-white;
-      }
     }
   }
 }
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 3c8acc6437..7005448c43 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -54,6 +54,7 @@
 @import "./components/linked-block";
 @import "./components/list-pagination";
 @import "./components/loader";
+@import "./components/login-form";
 @import "./components/message-in-page";
 @import "./components/page-header";
 @import "./components/popup-menu";
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
index 5efa15a61e..8534d234c0 100644
--- a/ui/app/styles/core/buttons.scss
+++ b/ui/app/styles/core/buttons.scss
@@ -1,8 +1,8 @@
 $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
 
 .button {
-  box-shadow: $button-box-shadow-standard;
   border: 1px solid $grey-light;
+  box-shadow: $box-shadow-low;
   color: $grey-dark;
   display: inline-block;
   font-size: $size-small;
@@ -57,13 +57,14 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
       &.is-hovered {
         background-color: darken($color, 5%);
         border-color: darken($color, 5%);
+        box-shadow: $box-shadow-middle;
       }
 
       &:active,
       &.is-active {
         background-color: darken($color, 10%);
         border-color: darken($color, 10%);
-        box-shadow: none;
+        box-shadow: $box-shadow-middle;
       }
 
       &:focus,
diff --git a/ui/app/styles/utils/_bulma_variables.scss b/ui/app/styles/utils/_bulma_variables.scss
index 7d68128498..19c89a7895 100644
--- a/ui/app/styles/utils/_bulma_variables.scss
+++ b/ui/app/styles/utils/_bulma_variables.scss
@@ -61,6 +61,10 @@ $radius: 2px;
 //box
 $box-radius: 0;
 $box-shadow: 0 0 0 1px rgba($black, 0.1);
+$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
+$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.10), 0 6px 8px -2px rgba($black, 0.05);
+$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.10);
+$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.20);
 
 $link: $blue;
 $text: $black;
@@ -78,6 +82,12 @@ $progress-bar-background-color: lighten($grey-light, 15%);
 
 $base-border: 1px solid $grey-light;
 
+//menu
+$menu-item-hover-color: $text;
+$menu-item-hover-background-color: $grey-lighter;
+$menu-item-active-color: $link;
+$menu-item-active-background-color: transparent;
+
 // animations
 $speed: 150ms;
 $speed-slow: $speed * 2;
diff --git a/ui/app/templates/components/splash-page.hbs b/ui/app/templates/components/splash-page.hbs
index 4f04020cb1..7b0a2bf9ca 100644
--- a/ui/app/templates/components/splash-page.hbs
+++ b/ui/app/templates/components/splash-page.hbs
@@ -1,7 +1,7 @@
 <div class="is-flex-v-centered-tablet is-flex-1 is-fullwidth">
   <div class="columns is-centered is-gapless is-fullwidth">
     <div class="column is-4-desktop is-7-tablet">
-      <div class="box is-paddingless has-glow is-relative">
+      <div class="login-form box is-paddingless is-relative">
         <div class="hero has-dark-grey-gradient">
           <div class="hero-body">
             <div class="has-current-color-fill has-text-white">

From bf04c73593fb7aaa8423791b3dbef98beadcb0a4 Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Thu, 24 May 2018 11:12:06 -0600
Subject: [PATCH 2/7] Update styles for list row hover

---
 ui/app/styles/components/linked-block.scss          | 8 +++-----
 ui/app/styles/core/menu.scss                        | 6 +++---
 ui/app/templates/vault/cluster/secrets/backends.hbs | 2 +-
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss
index dfa6d7c8d0..8f6af8fe0d 100644
--- a/ui/app/styles/components/linked-block.scss
+++ b/ui/app/styles/components/linked-block.scss
@@ -1,13 +1,11 @@
 .linked-block {
   cursor: pointer;
+  transition: box-shadow $speed;
   &:hover,
-  &:focus {
-    position: relative;
-    box-shadow: $box-link-hover-shadow;
-  }
+  &:focus,
   &:active {
     position: relative;
-    box-shadow: $box-link-active-shadow;
+    box-shadow: $box-link-hover-shadow, $box-shadow-middle;
   }
 }
 
diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss
index 81fb5de04d..f970ade367 100644
--- a/ui/app/styles/core/menu.scss
+++ b/ui/app/styles/core/menu.scss
@@ -1,11 +1,11 @@
-.column .menu-list  a {
+.column .menu-list a {
   border-radius: 0;
   border-right: 0 solid transparent;
   font-weight: $font-weight-semibold;
 
   &:hover,
   &.is-active {
-    color: $menu-item-hover-background-color;
-    background-color: $menu-item-active-color;
+    color: $menu-item-active-color;
+    background-color: $menu-item-active-background-color;
   }
 }
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index 78c7a1ce88..e112cceba5 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -18,7 +18,7 @@
   {{#linked-block
     "vault.cluster.secrets.backend.list-root"
     backend.id
-    class="box is-sideless is-marginless has-pointer"
+    class="box is-marginless has-pointer"
     data-test-secret-backend-row=backend.id
   }}
     <div class="level is-mobile">

From eca0ca264d96d829aa9e36436a8910f26e86c314 Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Thu, 24 May 2018 13:39:34 -0600
Subject: [PATCH 3/7] Update styles for tabs

---
 ui/app/styles/components/sub-nav.scss | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/ui/app/styles/components/sub-nav.scss b/ui/app/styles/components/sub-nav.scss
index 5c2f4447e4..9c336fa77d 100644
--- a/ui/app/styles/components/sub-nav.scss
+++ b/ui/app/styles/components/sub-nav.scss
@@ -1,29 +1,35 @@
 .sub-nav {
   &.tabs {
-    background: $grey-lighter;
-    padding: 0 1.25rem;
+    box-shadow: inset 0 -1px 0 $grey-light;
+
     ul {
       border-color: transparent;
     }
+
+    li {
+      &:focus {
+        box-shadow: none;
+      }
+      &.is-active a {
+        border-color: $blue;
+        color: $blue;
+      }
+    }
+
     a {
       color: $grey-dark;
       font-weight: $font-weight-semibold;
       text-decoration: none;
-      padding: 1.5rem 1rem;
+      padding: $size-6 $size-8 $size-8;
       border-bottom: 2px solid transparent;
       transition: border-color $speed;
+
+      &:hover,
+      &:active {
+        border-color: $grey-light;
+      }
     }
-    a:hover,
-    a:active {
-      border-color: $grey-light;
-    }
-    li:focus {
-      box-shadow: none;
-    }
-    li.is-active a {
-      border-color: $blue;
-      color: $blue;
-    }
+
     .ember-basic-dropdown-trigger {
       outline: none;
     }

From 5240c1df59c02debb721572a7fd58b4753c076b0 Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Thu, 24 May 2018 17:10:19 -0600
Subject: [PATCH 4/7] Update styles for popover menus

---
 ui/app/styles/components/popup-menu.scss      | 103 +++++++++---------
 .../templates/components/pki-cert-popup.hbs   |   2 +-
 .../partials/role-aws/popup-menu.hbs          |   2 +-
 .../partials/role-pki/popup-menu.hbs          |   2 +-
 .../partials/role-ssh/popup-menu.hbs          |   2 +-
 .../vault/cluster/access/methods.hbs          |   2 +-
 .../vault/cluster/policies/index.hbs          |   2 +-
 .../replication/mode/secondaries/index.hbs    |   2 +-
 8 files changed, 61 insertions(+), 56 deletions(-)

diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
index 83b92a43a2..cab7f3b062 100644
--- a/ui/app/styles/components/popup-menu.scss
+++ b/ui/app/styles/components/popup-menu.scss
@@ -1,16 +1,17 @@
 .popup-menu-content {
   border-radius: 2px;
   margin: -2px 0 0 0;
+
   & > .box {
     border-radius: 2px;
+    box-shadow: $box-shadow, $box-shadow-middle;
     padding: 0;
     position: relative;
     width: 175px;
-    @include css-top-arrow(8px, $white, 1px, $blue, 155px);
   }
+
   &.is-wide > .box {
     width: 200px;
-    @include css-top-arrow(8px, $white, 1px, $blue, 178px);
   }
 
   .confirm-action span .button {
@@ -18,58 +19,62 @@
     margin: .25rem auto;
     width: 95%;
   }
+
+  .menu {
+    button.link,
+    a {
+      color: $menu-item-color;
+      font-size: $size-7;
+      font-weight: $font-weight-semibold;
+      display: block;
+      padding: $size-9 $size-6;
+      box-shadow: none;
+      border: none;
+      background: transparent;
+      height: auto;
+      width: 100%;
+      text-align: left;
+      text-decoration: none;
+
+      &:hover {
+        background-color: $menu-item-hover-background-color;
+        color: $menu-item-hover-color;
+      }
+
+      &.is-active {
+        background-color: $menu-item-active-background-color;
+        color: $menu-item-active-color;
+      }
+
+      &.is-destroy {
+        color: $red;
+
+        &:hover {
+          background-color: $red;
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .menu-label {
+    background: $grey-lighter;
+    font-size: $size-8;
+    letter-spacing: 0;
+    margin: 0;
+    padding: $size-10 calc(#{$size-6} + .1rem);
+    text-transform: none;
+  }
+
+  .menu-list {
+    margin: 0.1rem;
+  }
 }
+
 .popup-menu-trigger {
   min-width: auto;
 }
-.popup-menu-trigger.is-active {
-  &,
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 1px $blue;
-  }
-}
 
 .ember-basic-dropdown-content--left.popup-menu {
   margin: 0px 0 0 -8px;
 }
-
-.popup-menu-content .menu {
-  button.link,
-  a {
-    border-radius: $menu-item-radius;
-    color: $menu-item-color;
-    font-size: $size-7;
-    font-weight: $font-weight-semibold;
-    display: block;
-    padding: $size-9 $size-6;
-    box-shadow: none;
-    border: none;
-    background: transparent;
-    height: auto;
-    width: 100%;
-    text-align: left;
-    text-decoration: none;
-
-    &:hover {
-      background-color: $menu-item-hover-background-color;
-      color: $menu-item-hover-color;
-    }
-
-    &.is-active {
-      background-color: $menu-item-active-background-color;
-      color: $menu-item-active-color;
-    }
-  }
-}
-.popup-menu-content .menu-list {
-  margin: 0.1rem;
-}
-.popup-menu-content .menu-label {
-  background: $grey-lighter;
-  font-size: $size-8;
-  letter-spacing: 0;
-  margin: 0;
-  padding: $size-10 calc(#{$size-6} + .1rem);
-  text-transform: none;
-}
diff --git a/ui/app/templates/components/pki-cert-popup.hbs b/ui/app/templates/components/pki-cert-popup.hbs
index 90eb720f10..4bb34ec618 100644
--- a/ui/app/templates/components/pki-cert-popup.hbs
+++ b/ui/app/templates/components/pki-cert-popup.hbs
@@ -10,7 +10,7 @@
         <li class="action">
           {{#confirm-action
             confirmButtonClasses="button is-primary"
-            buttonClasses="link"
+            buttonClasses="link is-destroy"
             onConfirmAction=(action "delete" item)
             confirmMessage=(concat "Are you sure you want to revoke " item.id "?")
             showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/partials/role-aws/popup-menu.hbs b/ui/app/templates/partials/role-aws/popup-menu.hbs
index 365ba3d553..149d309f4c 100644
--- a/ui/app/templates/partials/role-aws/popup-menu.hbs
+++ b/ui/app/templates/partials/role-aws/popup-menu.hbs
@@ -57,7 +57,7 @@
           <li class="action">
             {{#confirm-action
               confirmButtonClasses="button is-primary"
-              buttonClasses="link"
+              buttonClasses="link is-destroy"
               onConfirmAction=(action "delete" item)
               confirmMessage=(concat "Are you sure you want to delete " item.id "?")
               showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/partials/role-pki/popup-menu.hbs b/ui/app/templates/partials/role-pki/popup-menu.hbs
index 3e3d415692..6b65e1b2aa 100644
--- a/ui/app/templates/partials/role-pki/popup-menu.hbs
+++ b/ui/app/templates/partials/role-pki/popup-menu.hbs
@@ -57,7 +57,7 @@
           <li class="action">
             {{#confirm-action
               confirmButtonClasses="button is-primary"
-              buttonClasses="link"
+              buttonClasses="link is-destroy"
               onConfirmAction=(action "delete" item)
               confirmMessage=(concat "Are you sure you want to delete " item.id "?")
               showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/partials/role-ssh/popup-menu.hbs b/ui/app/templates/partials/role-ssh/popup-menu.hbs
index d90b474444..e1a764c41f 100644
--- a/ui/app/templates/partials/role-ssh/popup-menu.hbs
+++ b/ui/app/templates/partials/role-ssh/popup-menu.hbs
@@ -60,7 +60,7 @@
           <li class="action">
             {{#confirm-action
               confirmButtonClasses="button is-primary"
-              buttonClasses="link"
+              buttonClasses="link is-destroy"
               onConfirmAction=(action "delete" item)
               confirmMessage=(concat "Are you sure you want to delete " item.id "?")
               showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index 7212c3893e..44987628ce 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -61,7 +61,7 @@
                   <li class="action">
                     {{#confirm-action
                       confirmButtonClasses="button is-primary"
-                      buttonClasses="link"
+                      buttonClasses="link is-destroy"
                       onConfirmAction=(perform disableMethod method)
                       confirmMessage=(concat "Are you sure you want to disable auth via " method.id "?")
                       showConfirm=(get this (concat "shouldDelete-" method.id))
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index 14f86b9349..c9e6c302a3 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -120,7 +120,7 @@
                         <li class="action">
                           {{#confirm-action
                             confirmButtonClasses="button is-primary"
-                            buttonClasses="link"
+                            buttonClasses="link is-destroy"
                             onConfirmAction=(action "deletePolicy" item)
                             confirmMessage=(concat "Are you sure you want to delete " item.id "?")
                             showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs b/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs
index e40e40f796..733829f617 100644
--- a/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs
+++ b/ui/app/templates/vault/cluster/replication/mode/secondaries/index.hbs
@@ -18,7 +18,7 @@
                           confirmMessage=(concat "Are you sure you want to revoke " secondary "?")
                           confirmButtonText="Revoke"
                           cancelButtonText="Cancel"
-                          buttonClasses="button link"
+                          buttonClasses="button link is-destroy"
                           confirmButtonClasses="is-danger is-outlined button"
                           showConfirm=(get this (concat secondary '-isRevoking'))
                           containerClasses="is-block"

From da127b0a2313b62e395af8b5ea6653125717be4b Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Fri, 25 May 2018 09:36:23 -0600
Subject: [PATCH 5/7] Make popup menus consistent

---
 ui/app/models/cluster.js                      |   2 +-
 ui/app/styles/components/popup-menu.scss      |  66 ++++++++---
 ui/app/styles/components/status-menu.scss     |  95 ----------------
 ui/app/templates/components/auth-info.hbs     | 107 +++++++++---------
 ui/app/templates/components/popup-menu.hbs    |   2 +-
 ui/app/templates/components/status-menu.hbs   |   2 +-
 .../replication-mode-summary-menu.hbs         |   4 +-
 ui/app/templates/partials/status/cluster.hbs  |  20 ++--
 .../templates/partials/status/replication.hbs |  59 +++++-----
 .../svg/icons/checkmark-circled-outline.hbs   |   1 +
 10 files changed, 154 insertions(+), 204 deletions(-)
 create mode 100644 ui/app/templates/svg/icons/checkmark-circled-outline.hbs

diff --git a/ui/app/models/cluster.js b/ui/app/models/cluster.js
index ca4f20742d..9eac03c4ee 100644
--- a/ui/app/models/cluster.js
+++ b/ui/app/models/cluster.js
@@ -72,7 +72,7 @@ export default DS.Model.extend({
   }),
 
   stateGlyph(state) {
-    const glyph = 'checkmark';
+    const glyph = 'checkmark-circled-outline';
 
     const glyphs = {
       'stream-wals': 'android-sync',
diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
index cab7f3b062..3594d830f9 100644
--- a/ui/app/styles/components/popup-menu.scss
+++ b/ui/app/styles/components/popup-menu.scss
@@ -11,7 +11,7 @@
   }
 
   &.is-wide > .box {
-    width: 200px;
+    width: 300px;
   }
 
   .confirm-action span .button {
@@ -21,20 +21,22 @@
   }
 
   .menu {
+    padding: $size-11 0;
+
     button.link,
     a {
-      color: $menu-item-color;
-      font-size: $size-7;
-      font-weight: $font-weight-semibold;
-      display: block;
-      padding: $size-9 $size-6;
+      background: transparent;
       box-shadow: none;
       border: none;
-      background: transparent;
+      color: $menu-item-color;
+      display: block;
       height: auto;
-      width: 100%;
+      font-size: $size-7;
+      font-weight: $font-weight-semibold;
+      padding: $size-9 $size-8;
       text-align: left;
       text-decoration: none;
+      width: 100%;
 
       &:hover {
         background-color: $menu-item-hover-background-color;
@@ -58,23 +60,57 @@
   }
 
   .menu-label {
-    background: $grey-lighter;
+    color: $grey-dark;
     font-size: $size-8;
+    font-weight: $font-weight-semibold;
     letter-spacing: 0;
     margin: 0;
-    padding: $size-10 calc(#{$size-6} + .1rem);
+    padding: $size-10 $size-8 $size-11;
     text-transform: none;
   }
 
-  .menu-list {
-    margin: 0.1rem;
+  .menu-content {
+    padding: $size-10 $size-8;
+  }
+
+  hr {
+    background-color: $grey-light;
+    margin: $size-11 0;
   }
 }
 
 .popup-menu-trigger {
-  min-width: auto;
+  height: 2rem;
+  min-width: 0;
+  padding: 0 $size-10;
 }
 
-.ember-basic-dropdown-content--left.popup-menu {
-  margin: 0px 0 0 -8px;
+.status-menu-content {
+  margin-top: 8px;
+}
+
+.ember-basic-dropdown-content {
+  &--left.popup-menu {
+    margin: 0px 0 0 -8px;
+  }
+
+  &--below {
+    &.ember-basic-dropdown--transitioning-in {
+      animation: drop-fade-above .15s;
+    }
+
+    &.ember-basic-dropdown--transitioning-out {
+      animation: drop-fade-above .15s reverse;
+    }
+  }
+
+  &--above {
+    &.ember-basic-dropdown--transitioning-in {
+      animation: drop-fade-below .15s;
+    }
+
+    &.ember-basic-dropdown--transitioning-out {
+      animation: drop-fade-below .15s reverse;
+    }
+  }
 }
diff --git a/ui/app/styles/components/status-menu.scss b/ui/app/styles/components/status-menu.scss
index 1c6937dae0..044a6682aa 100644
--- a/ui/app/styles/components/status-menu.scss
+++ b/ui/app/styles/components/status-menu.scss
@@ -1,62 +1,3 @@
-.status-menu-content {
-  max-width: 360px;
-  min-width: 280px;
-  border-radius: 3px;
-  margin: 0 -17px 0 0;
-  will-change: transform, opacity;
-
-  .card {
-    position: relative;
-    border-radius: 2px;
-    border: $base-border;
-    box-shadow: 0 0 4px rgba($black, 0.21);
-    color: $black;
-    @include css-top-arrow(8px, $grey-lighter, 1px, $grey, 100%, -25px);
-    .card-content {
-      padding: $size-6 $size-3;
-    }
-  }
-
-  .card-header-title,
-  .menu-label {
-    background: $grey-lighter;
-    color: $grey-dark;
-    font-size: $size-7;
-    font-weight: normal;
-    letter-spacing: 0;
-    margin: 0;
-    padding: 8px $size-3;
-    text-transform: uppercase;
-  }
-
-  .replication-card {
-    @include css-top-arrow(8px, $grey-lighter, 1px, $grey, 100%, -98px);
-    .box-label {
-      box-shadow: none;
-    }
-    a.is-active,
-    a:hover {
-      box-shadow: 0 0 0 1px $blue;
-    }
-  }
-
-  &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
-    animation: drop-fade-above .15s;
-  }
-  &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
-    animation: drop-fade-above .15s reverse;
-  }
-  &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
-    animation: drop-fade-below .15s;
-  }
-  &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
-    animation: drop-fade-below .15s reverse;
-  }
-}
-.status-menu-content-replication {
-  margin-top: 5px;
-}
-
 .is-status-chevron {
   line-height: 0;
   padding: 0.25em 0 0.25em 0.25em;
@@ -73,39 +14,3 @@
     min-width: 0;
   }
 }
-
-.status-menu-content .menu {
-  button.link,
-  a {
-    font-size: $size-6;
-    font-weight: 500;
-    padding: $size-9 $size-3;
-    border-radius: $menu-item-radius;
-    color: $menu-item-color;
-    display: block;
-    padding: $size-9 $size-3;
-    box-shadow: none;
-    border: none;
-    background: transparent;
-    height: auto;
-    width: 100%;
-    text-align: left;
-
-    .icon {
-      color: $menu-item-hover-background-color;
-    }
-    &:hover {
-      background-color: $menu-item-hover-background-color;
-      color: $menu-item-hover-color;
-      .icon {
-        color: $menu-item-hover-color;
-      }
-
-    }
-
-    &.is-active {
-      background-color: $menu-item-active-background-color;
-      color: $menu-item-active-color;
-    }
-  }
-}
diff --git a/ui/app/templates/components/auth-info.hbs b/ui/app/templates/components/auth-info.hbs
index 80e0d4f9eb..e2f83610e4 100644
--- a/ui/app/templates/components/auth-info.hbs
+++ b/ui/app/templates/components/auth-info.hbs
@@ -1,56 +1,57 @@
-<div class="card has-arrow">
-  <header class="card-header is-grey">
-    <p class="card-header-title is-uppercase has-background-grey-lighter has-text-grey-dark is-size-7">
+<div class="popup-menu-content">
+  <div class="box">
+    <div class="menu-label">
       {{auth.authData.displayName}}
-    </p>
-  </header>
-  <nav class="menu">
-    <ul class="menu-list">
-      {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
-        {{#if auth.authData.renewable}}
-          <li class="action">
-            <button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
-              Renew token
-            </button>
-          </li>
-          <li class="action">
-            {{#confirm-action
-            onConfirmAction=(action "revokeToken")
-            confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
-            confirmButtonText="Revoke"
-            confirmButtonClasses="button is-primary"
-            buttonClasses="button link"
-            showConfirm=shouldRevoke
-            class=(if shouldRevoke "message is-block is-warning is-outline")
-            containerClasses="message-body is-block"
-            messageClasses="is-block"
-            }}
-              Revoke token
-            {{/confirm-action}}
-          </li>
-        {{else}}
-          <li class="action text-right">
-            {{#confirm-action
-            onConfirmAction=(action "revokeToken")
-            confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
-            confirmButtonText="Revoke"
-            confirmButtonClasses="button is-primary"
-            buttonClasses="button link"
-            showConfirm=shouldRevoke
-            class=(if shouldRevoke "message is-block is-warning is-outline")
-            containerClasses="message-body is-block"
-            messageClasses="is-block"
-            }}
-              Revoke token
-            {{/confirm-action}}
-          </li>
+    </div>
+
+    <nav class="menu">
+      <ul class="menu-list">
+        {{#if (is-before (now interval=1000) auth.tokenExpirationDate)}}
+          {{#if auth.authData.renewable}}
+            <li class="action">
+              <button type="button" {{action "renewToken"}} class="link button {{if isRenewing 'is-loading'}}">
+                Renew token
+              </button>
+            </li>
+            <li class="action">
+              {{#confirm-action
+              onConfirmAction=(action "revokeToken")
+              confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
+              confirmButtonText="Revoke"
+              confirmButtonClasses="button is-primary"
+              buttonClasses="button link"
+              showConfirm=shouldRevoke
+              class=(if shouldRevoke "message is-block is-warning is-outline")
+              containerClasses="message-body is-block"
+              messageClasses="is-block"
+              }}
+                Revoke token
+              {{/confirm-action}}
+            </li>
+          {{else}}
+            <li class="action text-right">
+              {{#confirm-action
+              onConfirmAction=(action "revokeToken")
+              confirmMessage=(concat "Are you sure you want to revoke the token for " (get auth 'authData.displayName') "?")
+              confirmButtonText="Revoke"
+              confirmButtonClasses="button is-primary"
+              buttonClasses="button link"
+              showConfirm=shouldRevoke
+              class=(if shouldRevoke "message is-block is-warning is-outline")
+              containerClasses="message-body is-block"
+              messageClasses="is-block"
+              }}
+                Revoke token
+              {{/confirm-action}}
+            </li>
+          {{/if}}
         {{/if}}
-      {{/if}}
-      <li class="action">
-        <a href="{{href-to "vault.cluster.logout" activeClusterName }}" id="logout">
-          Sign out
-        </a>
-      </li>
-    </ul>
-  </nav>
+        <li class="action">
+          <a href="{{href-to "vault.cluster.logout" activeClusterName }}" id="logout">
+            Sign out
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
 </div>
diff --git a/ui/app/templates/components/popup-menu.hbs b/ui/app/templates/components/popup-menu.hbs
index 5be8ed129a..461cb29243 100644
--- a/ui/app/templates/components/popup-menu.hbs
+++ b/ui/app/templates/components/popup-menu.hbs
@@ -1,5 +1,5 @@
 {{#basic-dropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen=onOpen as |d|}}
-  {{#d.trigger tagName="button" class=(concat "popup-menu-trigger button is-ghost " (if d.isOpen "is-active")) data-test-popup-menu-trigger=true}}
+  {{#d.trigger tagName="button" class=(concat "popup-menu-trigger button is-ghost" (if d.isOpen "is-active")) data-test-popup-menu-trigger=true}}
     {{i-con
       glyph="more"
       class="has-text-black auto-width"
diff --git a/ui/app/templates/components/status-menu.hbs b/ui/app/templates/components/status-menu.hbs
index f3ac08fcc8..50a16e3775 100644
--- a/ui/app/templates/components/status-menu.hbs
+++ b/ui/app/templates/components/status-menu.hbs
@@ -1,4 +1,4 @@
-{{#basic-dropdown-hover horizontalPosition="auto-right" verticalPosition="below" as |d|}}
+{{#basic-dropdown-hover horizontalPosition="auto-left" verticalPosition="below" as |d|}}
   {{#d.trigger tagName=(if (eq type "replication") "span" "button") class=(if (eq type "replication") "" "button is-transparent")}}
     {{#if (eq type "user")}}
       <div class="status-menu-user-trigger">
diff --git a/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs b/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
index 475a01fce6..52efaea030 100644
--- a/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
+++ b/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
@@ -29,7 +29,9 @@
   <div class="level-right">
     {{#if replicationEnabled}}
       {{#if (get cluster (concat mode 'StateGlyph'))}}
-        {{i-con size=14 glyph=(get cluster (concat mode 'StateGlyph'))}}
+        <span class="has-text-success">
+          {{i-con size=16 glyph=(get cluster (concat mode 'StateGlyph'))}}
+        </span>
       {{else if syncProgress}}
         <progress value="{{syncProgressPercent}}" max="100" class="progress is-small is-narrow is-info">
           {{syncProgress.progress}} of {{syncProgress.total}} keys
diff --git a/ui/app/templates/partials/status/cluster.hbs b/ui/app/templates/partials/status/cluster.hbs
index 91d0c7b5ba..252bf67fca 100644
--- a/ui/app/templates/partials/status/cluster.hbs
+++ b/ui/app/templates/partials/status/cluster.hbs
@@ -1,12 +1,14 @@
-<div class="card has-arrow">
-  <header class="card-header is-grey">
-    <p class="card-header-title is-uppercase has-background-grey-lighter has-text-grey-dark is-size-7">
-    In case of emergency
-    </p>
-  </header>
-  <div class="card-content">
-    <div class="content">
-      <p class="is-size-7">If you suspect your data has been compromised, you can <a href="{{href-to 'vault.cluster.settings.seal' cluster.name}}" onclick={{action d.actions.close}} class="link">seal your vault</a> to prevent access to your secrets.</p>
+<div class="popup-menu-content is-wide">
+  <div class="box">
+    <div class="menu-label">
+      In case of emergency
+    </div>
+    <div class="menu-content">
+      <p>
+        If you suspect your data has been compromised, you can
+        <a href="{{href-to 'vault.cluster.settings.seal' cluster.name}}" onclick={{action d.actions.close}} class="link">seal your vault</a>
+        to prevent access to your secrets.
+      </p>
     </div>
   </div>
 </div>
diff --git a/ui/app/templates/partials/status/replication.hbs b/ui/app/templates/partials/status/replication.hbs
index be58af87e0..5aaeccacd6 100644
--- a/ui/app/templates/partials/status/replication.hbs
+++ b/ui/app/templates/partials/status/replication.hbs
@@ -1,28 +1,31 @@
-<div class="card replication-card">
-  <nav class="menu">
-    <p class="menu-label">Disaster Recovery</p>
-    <ul>
-      <li>
-        {{replication-mode-summary
-          mode="dr"
-          display='menu'
-          cluster=cluster
-          tagName='a'
-          click=(action d.actions.close)
-        }}
-      </li>
-    </ul>
-    <p class="menu-label">Performance</p>
-    <ul>
-      <li>
-        {{replication-mode-summary
-          mode="performance"
-          display='menu'
-          cluster=cluster
-          tagName='a'
-          click=(action d.actions.close)
-        }}
-      </li>
-    </ul>
-  </nav>
- </div>
+<div class="popup-menu-content is-wide is-top-nav-popup">
+  <div class="box">
+    <nav class="menu">
+      <p class="menu-label">Disaster Recovery</p>
+      <ul>
+        <li>
+          {{replication-mode-summary
+            mode="dr"
+            display='menu'
+            cluster=cluster
+            tagName='a'
+            click=(action d.actions.close)
+          }}
+        </li>
+      </ul>
+      <hr />
+      <p class="menu-label">Performance</p>
+      <ul>
+        <li>
+          {{replication-mode-summary
+            mode="performance"
+            display='menu'
+            cluster=cluster
+            tagName='a'
+            click=(action d.actions.close)
+          }}
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
diff --git a/ui/app/templates/svg/icons/checkmark-circled-outline.hbs b/ui/app/templates/svg/icons/checkmark-circled-outline.hbs
new file mode 100644
index 0000000000..805556b804
--- /dev/null
+++ b/ui/app/templates/svg/icons/checkmark-circled-outline.hbs
@@ -0,0 +1 @@
+<path d="M256,512 C114.615104,512 0,397.384896 0,256 C0,114.615104 114.615104,0 256,0 C397.384896,0 512,114.615104 512,256 C512,397.384896 397.384896,512 256,512 Z M256,480 C379.711784,480 480,379.711784 480,256 C480,132.288216 379.711784,32 256,32 C132.288216,32 32,132.288216 32,256 C32,379.711784 132.288216,480 256,480 Z M385.548422,144 L416,174.545548 L217.753913,376.759626 L96,260.314527 L127.007564,227.142329 L217.753913,312.691266 L385.548422,144 Z"/>

From 1dbfa9f55397a15b031080a3f625c62630826bc0 Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Fri, 25 May 2018 10:16:33 -0600
Subject: [PATCH 6/7] Simpler type tags

---
 ui/app/styles/components/linked-block.scss         |  2 ++
 ui/app/styles/components/sidebar.scss              |  3 ++-
 ui/app/styles/core/tags.scss                       |  9 +++++++--
 .../identity/item-alias/alias-details.hbs          |  2 +-
 .../templates/components/identity/item-aliases.hbs |  2 +-
 .../templates/components/identity/popup-alias.hbs  |  2 +-
 .../components/identity/popup-members.hbs          |  2 +-
 .../components/identity/popup-metadata.hbs         |  2 +-
 .../templates/components/identity/popup-policy.hbs |  2 +-
 .../replication/replication-mode-summary-menu.hbs  |  4 ++--
 .../replication/replication-mode-summary.hbs       |  4 ++--
 ui/app/templates/svg/vault-loading.hbs             |  4 ++--
 ui/app/templates/vault/cluster/access/methods.hbs  | 12 +++++-------
 ui/app/templates/vault/cluster/policies/index.hbs  |  6 ++----
 ui/app/templates/vault/cluster/policy/edit.hbs     |  6 ++----
 ui/app/templates/vault/cluster/policy/show.hbs     |  3 +--
 .../templates/vault/cluster/secrets/backends.hbs   | 14 ++++++--------
 17 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss
index 8f6af8fe0d..8dc3ec8726 100644
--- a/ui/app/styles/components/linked-block.scss
+++ b/ui/app/styles/components/linked-block.scss
@@ -1,6 +1,8 @@
 .linked-block {
   cursor: pointer;
   transition: box-shadow $speed;
+  will-change: box-shadow;
+
   &:hover,
   &:focus,
   &:active {
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 8f580a5bc0..521486199e 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -55,7 +55,8 @@
   }
 
   .menu-label {
-    color: $grey-light;
+    color: $grey;
+    font-weight: $font-weight-semibold;
     font-size: $size-small;
     line-height: 1;
     margin-bottom: $size-8;
diff --git a/ui/app/styles/core/tags.scss b/ui/app/styles/core/tags.scss
index 99eb6be525..8ad30752e5 100644
--- a/ui/app/styles/core/tags.scss
+++ b/ui/app/styles/core/tags.scss
@@ -1,17 +1,21 @@
 .tag:not(body) {
   background-color: lighten($grey-light, 17%);
   border-radius: 2px;
+  color: $grey-dark;
   height: auto;
-  padding: 0 0.75em;
+  padding: 0 $size-10;
   margin-right: 0.5rem;
   font-weight: normal;
+
   code {
-    color: $grey;
+    color: $grey-dark;
   }
 }
+
 .tag.is-outlined {
   border: 1px solid currentColor;
 }
+
 .tag.is-inverted {
   border-color: $grey;
   background: none;
@@ -19,6 +23,7 @@
     color: $grey-dark;
   }
 }
+
 .tag.is-bold {
   font-weight: bold;
 }
diff --git a/ui/app/templates/components/identity/item-alias/alias-details.hbs b/ui/app/templates/components/identity/item-alias/alias-details.hbs
index 6ccbcb8448..d83cb0b20f 100644
--- a/ui/app/templates/components/identity/item-alias/alias-details.hbs
+++ b/ui/app/templates/components/identity/item-alias/alias-details.hbs
@@ -12,7 +12,7 @@
   <div>
     {{model.mountPath}}
     <div>
-      <span class="tag"><code>{{model.mountType}}</code></span>
+      <span class="tag">{{model.mountType}}</span>
       <code class="has-text-grey is-size-8">{{model.mountAccessor}}</code>
     </div>
   </div>
diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs
index 72aaaaab3f..afe3f7cddf 100644
--- a/ui/app/templates/components/identity/item-aliases.hbs
+++ b/ui/app/templates/components/identity/item-aliases.hbs
@@ -14,7 +14,7 @@
             size=14
             class="has-text-grey-light"
             }}{{item.name}}</a>
-        <span class="tag"><code>{{item.mountType}}</code></span>
+        <span class="tag">{{item.mountType}}</span>
         <code class="has-text-grey is-size-8">{{item.mountAccessor}}</code>
       </div>
       <div class="column has-text-right">
diff --git a/ui/app/templates/components/identity/popup-alias.hbs b/ui/app/templates/components/identity/popup-alias.hbs
index b708eed5fd..c2a6105f72 100644
--- a/ui/app/templates/components/identity/popup-alias.hbs
+++ b/ui/app/templates/components/identity/popup-alias.hbs
@@ -26,7 +26,7 @@
             {{#confirm-action
               data-test-item-delete=true
               confirmButtonClasses="button is-primary"
-              buttonClasses="link"
+              buttonClasses="link is-destroy"
               onConfirmAction=(action "performTransaction" item)
               confirmMessage=(concat "Are you sure you want to delete " item.id "?")
               showConfirm=(get this (concat "shouldDelete-" item.id))
diff --git a/ui/app/templates/components/identity/popup-members.hbs b/ui/app/templates/components/identity/popup-members.hbs
index 2b8f4cfc6b..eca4a68872 100644
--- a/ui/app/templates/components/identity/popup-members.hbs
+++ b/ui/app/templates/components/identity/popup-members.hbs
@@ -5,7 +5,7 @@
         {{#confirm-action
           confirmButtonClasses="button is-primary"
           confirmButtonText="Remove"
-          buttonClasses="link"
+          buttonClasses="link is-destroy"
           onConfirmAction=(action "performTransaction" model groupArray memberId)
           confirmMessage=(concat "Are you sure you want to remove " memberId "?")
           showConfirm=(get this (concat "shouldDelete-" memberId))
diff --git a/ui/app/templates/components/identity/popup-metadata.hbs b/ui/app/templates/components/identity/popup-metadata.hbs
index 32ec5500a6..8f251aae80 100644
--- a/ui/app/templates/components/identity/popup-metadata.hbs
+++ b/ui/app/templates/components/identity/popup-metadata.hbs
@@ -5,7 +5,7 @@
         {{#confirm-action
           confirmButtonClasses="button is-primary"
           confirmButtonText="Remove"
-          buttonClasses="link"
+          buttonClasses="link is-destroy"
           onConfirmAction=(action "performTransaction" model key)
           confirmMessage=(concat "Are you sure you want to remove " key "?")
           showConfirm=(get this (concat "shouldDelete-" key))
diff --git a/ui/app/templates/components/identity/popup-policy.hbs b/ui/app/templates/components/identity/popup-policy.hbs
index 55a5fc4831..4371a88def 100644
--- a/ui/app/templates/components/identity/popup-policy.hbs
+++ b/ui/app/templates/components/identity/popup-policy.hbs
@@ -15,7 +15,7 @@
         {{#confirm-action
           confirmButtonClasses="button is-primary"
           confirmButtonText="Remove"
-          buttonClasses="link"
+          buttonClasses="link is-destroy"
           onConfirmAction=(action "performTransaction" model policyName)
           confirmMessage=(concat "Are you sure you want to remove " policyName "?")
           showConfirm=(get this (concat "shouldDelete-" policyName))
diff --git a/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs b/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
index 52efaea030..efb24a35ca 100644
--- a/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
+++ b/ui/app/templates/partials/replication/replication-mode-summary-menu.hbs
@@ -10,13 +10,13 @@
           {{capitalize modeForUrl}}
         </span>
         {{#if secondaryId}}
-          <span class="tag is-light">
+          <span class="tag">
             <code>
               {{secondaryId}}
             </code>
           </span>
         {{/if}}
-        <span class="tag is-light">
+        <span class="tag">
           <code>
             {{clusterIdDisplay}}
           </code>
diff --git a/ui/app/templates/partials/replication/replication-mode-summary.hbs b/ui/app/templates/partials/replication/replication-mode-summary.hbs
index 4377a49cde..dfedcd223d 100644
--- a/ui/app/templates/partials/replication/replication-mode-summary.hbs
+++ b/ui/app/templates/partials/replication/replication-mode-summary.hbs
@@ -18,13 +18,13 @@
         {{capitalize modeForUrl}}
       </span>
       {{#if secondaryId}}
-        <span class="tag is-light">
+        <span class="tag">
           <code>
             {{secondaryId}}
           </code>
         </span>
       {{/if}}
-      <span class="tag is-light">
+      <span class="tag">
         <code>
           {{clusterIdDisplay}}
         </code>
diff --git a/ui/app/templates/svg/vault-loading.hbs b/ui/app/templates/svg/vault-loading.hbs
index 8416af5390..9402fcfe68 100644
--- a/ui/app/templates/svg/vault-loading.hbs
+++ b/ui/app/templates/svg/vault-loading.hbs
@@ -3,7 +3,7 @@
     <g id="vault-loading-y1">
       <polygon class="vault-loading-order-4" points="0,0 5,10 10,0" style="transform-origin: 5px 5px" />
       <polygon class="vault-loading-order-2" points="5,10 10,0 15,10" style="transform-origin: 10px 5px" />
-      <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" xstyle="transform-origin: 15px 5px" />
+      <polygon class="vault-loading-order-3" points="10,0 15,10 20,0" style="transform-origin: 15px 5px" />
       <polygon class="vault-loading-order-1" points="15,10 20,0 25,10" style="transform-origin: 20px 5px" />
       <polygon class="vault-loading-order-3" points="20,0 25,10 30,0" style="transform-origin: 25px 5px" />
       <polygon class="vault-loading-order-2" points="25,10 30,0 35,10" style="transform-origin: 30px 5px" />
@@ -29,4 +29,4 @@
   <text id="vault-loading-static" x="20" y="20" text-anchor="middle">
     Loading...
   </text>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/ui/app/templates/vault/cluster/access/methods.hbs b/ui/app/templates/vault/cluster/access/methods.hbs
index 44987628ce..ce3d4b8aac 100644
--- a/ui/app/templates/vault/cluster/access/methods.hbs
+++ b/ui/app/templates/vault/cluster/access/methods.hbs
@@ -26,13 +26,11 @@
           {{i-con glyph="folder" size=14 class="has-text-grey-light"}} <span data-test-path data-test-id={{method.id}}>{{method.path}}</span>
           <br />
           <span class="tag">
-            <code>
-              {{#if (eq method.type 'plugin')}}
-                {{method.type}}: {{method.config.plugin_name}}
-              {{else}}
-                {{method.type}}
-              {{/if}}
-            </code>
+            {{#if (eq method.type 'plugin')}}
+              {{method.type}}: {{method.config.plugin_name}}
+            {{else}}
+              {{method.type}}
+            {{/if}}
           </span>
           <code class="has-text-grey is-size-8">
             {{method.accessor}}
diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs
index c9e6c302a3..7904c48558 100644
--- a/ui/app/templates/vault/cluster/policies/index.hbs
+++ b/ui/app/templates/vault/cluster/policies/index.hbs
@@ -5,10 +5,8 @@
         <h1 class="title is-3">
           {{uppercase policyType}} Policies
           {{#unless (eq policyType "acl")}}
-            <span class="tag is-inverted is-outlined" aria-label="Enforcement level: {{model.enforcementLevel}}">
-              <code>
-               Sentinel
-              </code>
+            <span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
+              Sentinel
             </span>
           {{/unless}}
         </h1>
diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs
index e565135585..b1d3e04982 100644
--- a/ui/app/templates/vault/cluster/policy/edit.hbs
+++ b/ui/app/templates/vault/cluster/policy/edit.hbs
@@ -10,10 +10,8 @@
       <h1 class="title is-3">
         {{model.id}}
         {{#if model.enforcementLevel}}
-          <span class="tag is-medium is-inverted is-outlined" aria-label="Enforcement level: {{model.enforcementLevel}}">
-            <code>
-              {{model.enforcementLevel}}
-            </code>
+          <span class="tag is-medium" aria-label="Enforcement level: {{model.enforcementLevel}}">
+            {{model.enforcementLevel}}
           </span>
         {{/if}}
       </h1>
diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs
index 593336270e..fd4b291fd3 100644
--- a/ui/app/templates/vault/cluster/policy/show.hbs
+++ b/ui/app/templates/vault/cluster/policy/show.hbs
@@ -12,7 +12,7 @@
       <h1 class="title is-3" data-test-policy-name="true">
         {{model.id}}
         {{#if model.enforcementLevel}}
-          <span class="tag is-inverted is-outlined is-font-mono has-text-grey-dark" aria-label="Enforcement level: {{model.enforcementLevel}}">
+          <span class="tag" aria-label="Enforcement level: {{model.enforcementLevel}}">
             {{model.enforcementLevel}}
           </span>
         {{/if}}
@@ -81,4 +81,3 @@
     }}
   </div>
 </div>
-
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index e112cceba5..f8135d2fc2 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -18,7 +18,7 @@
   {{#linked-block
     "vault.cluster.secrets.backend.list-root"
     backend.id
-    class="box is-marginless has-pointer"
+    class="box is-sideless is-marginless has-pointer"
     data-test-secret-backend-row=backend.id
   }}
     <div class="level is-mobile">
@@ -30,13 +30,11 @@
              >{{i-con glyph="folder" size=14 class="has-text-grey-light"}}{{backend.path}}</a>
           <br />
           <span class="tag">
-            <code>
-              {{#if (eq backend.type 'plugin')}}
-                {{backend.type}}: {{backend.config.plugin_name}}
-              {{else}}
-                {{backend.type}}
-              {{/if}}
-            </code>
+            {{#if (eq backend.type 'plugin')}}
+              {{backend.type}}: {{backend.config.plugin_name}}
+            {{else}}
+              {{backend.type}}
+            {{/if}}
           </span>
           <code class="has-text-grey is-size-8">
           {{#if (eq backend.options.version 2)}}

From 51c69f734a352b3e01d56e772b030f67eb938bc2 Mon Sep 17 00:00:00 2001
From: Joshua Ogle <joshua@joshuaogle.com>
Date: Fri, 25 May 2018 15:28:03 -0600
Subject: [PATCH 7/7] Add shadow to console

---
 ui/app/styles/components/console-ui-panel.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
index 9649bb8bb1..31d91603bd 100644
--- a/ui/app/styles/components/console-ui-panel.scss
+++ b/ui/app/styles/components/console-ui-panel.scss
@@ -117,8 +117,10 @@
 }
 
 .panel-open .console-ui-panel-scroller  {
+  box-shadow: $box-shadow-highest;
   transform: translate3d(0, 0, 0);
 }
+
 .panel-open .console-ui-panel-scroller.fullscreen  {
   bottom: 0;
   top: 0;