UI: CSS Additions (mainly %frames) (#4623)

* Move almost everything to use %frames * Fix pill styles of ACL types * Remove horizontal scrollbars from dom recycling scroller component * Make text areas look ok in Firefox * Remove ember-bulma-css * New form elements, break out %toggle * %button design tweaks * %form-element design tweaks * Better hashicorp logo * Small screen CSS improvements (#4624) 1. Reduce header size when there are no breadcrumbs 2. Make the filters toggleable, closed by default 3. Reduce the size of the footer on small screens 4. Hide all non-primary columns for forms 5. Slightly change the layout of various items, mainly buttons within forms 6. Make some confirmation dialogs work vertically on small screens. Guessing we might be better just using native confirmations on small screens
2018-09-21 10:18:32 +01:00 · 2018-09-21 10:18:32 +01:00 · d0405ba8b9
parent 28421bffb3
commit d0405ba8b9
47 changed files with 558 additions and 281 deletions
--- a/ui-v2/app/mixins/with-resizing.js
+++ b/ui-v2/app/mixins/with-resizing.js
@ -3,7 +3,7 @@ import { get } from '@ember/object';
 import { assert } from '@ember/debug';
 export default Mixin.create({
  resize: function(e) {
-   assert('with-resizing.resize needs to be overridden', false);
+    assert('with-resizing.resize needs to be overridden', false);
  },
  win: window,
  init: function() {
@ -17,14 +17,14 @@ export default Mixin.create({
  },
  didInsertElement: function() {
    this._super(...arguments);
-    get(this, 'win').addEventListener('resize', this.handler);
+    get(this, 'win').addEventListener('resize', this.handler, false);
    this.didAppear();
  },
  didAppear: function() {
    this.handler({ target: get(this, 'win') });
  },
  willDestroyElement: function() {
-    get(this, 'win').removeEventListener('resize', this.handler);
+    get(this, 'win').removeEventListener('resize', this.handler, false);
    this._super(...arguments);
  },
 });
--- a/ui-v2/app/styles/app.scss
+++ b/ui-v2/app/styles/app.scss
@ -10,6 +10,7 @@
@import 'components/anchors';
@import 'components/buttons';
@import 'components/tabs';
+@import 'components/pill';
@import 'components/table';
@import 'components/form-elements';

@ -38,3 +39,4 @@
@import 'routes/dc/nodes/index';
@import 'routes/dc/intention/index';
@import 'routes/dc/kv/index';
+@import 'routes/dc/acls/index';
--- a/ui-v2/app/styles/base/color/box-placeholders.scss
+++ b/ui-v2/app/styles/base/color/box-placeholders.scss
@ -1,16 +0,0 @@
-%box-border-000 {
-  /* same as decor-border-000 - but need to think about being able to import color on its own*/
-  border-style: solid;
-  border-width: 0;
-}
-%box-color-yellow-500 {
-  @extend %box-border-000;
-  background-color: $ui-yellow-050;
-  border-color: $ui-color-warning;
-}
-%box-color-gray-500 {
-  @extend %box-border-000;
-  background-color: $ui-gray-050;
-  border-color: $ui-gray-300;
-  color: $ui-gray-400;
-}
--- a/ui-v2/app/styles/base/color/frame-placeholders.scss
+++ b/ui-v2/app/styles/base/color/frame-placeholders.scss
@ -0,0 +1,86 @@
+/*TODO: Move this to the reset */
+* {
+  border-width: 0;
+}
+%frame-border-000 {
+  /* same as decor-border-000 - but need to think about being able to import color on its own*/
+  border-style: solid;
+  // border-width: 0;
+}
+%frame-yellow-500 {
+  @extend %frame-border-000;
+  background-color: $ui-yellow-050;
+  border-color: $ui-color-warning;
+}
+%frame-green-500 {
+  @extend %frame-border-000;
+  background-color: $ui-green-050;
+  border-color: $ui-green-500;
+  color: $ui-green-500;
+}
+%frame-gray-500 {
+  @extend %frame-border-000;
+  background-color: $ui-gray-050;
+  border-color: $ui-gray-300;
+  color: $ui-gray-400;
+}
+%frame-blue-600 {
+  @extend %frame-border-000;
+  background-color: $ui-blue-200;
+  border-color: $ui-gray-400;
+  color: $ui-blue-050;
+}
+%frame-blue-700 {
+  @extend %frame-border-000;
+  background-color: $ui-blue-400;
+  border-color: $ui-blue-800;
+  color: $ui-white;
+}
+%frame-blue-800 {
+  @extend %frame-border-000;
+  background-color: $ui-blue-500;
+  border-color: $ui-blue-800;
+  color: $ui-white;
+}
+%frame-blue-900 {
+  @extend %frame-border-000;
+  background-color: $ui-blue-700;
+  border-color: $ui-blue-800;
+  color: $ui-white;
+}
+%frame-red-300 {
+  @extend %frame-border-000;
+  background-color: $ui-white;
+  border-color: $ui-red-500;
+  color: $ui-red-500;
+}
+%frame-red-500 {
+  @extend %frame-border-000;
+  background-color: $ui-red-050;
+  border-color: $ui-red-500;
+  color: $ui-red-800;
+}
+%frame-red-600 {
+  @extend %frame-border-000;
+  background-color: $ui-red-200;
+  border-color: $ui-gray-400;
+  color: $ui-white;
+}
+%frame-red-700 {
+  @extend %frame-border-000;
+  background-color: $ui-red-500;
+  border-color: $ui-red-800;
+  color: $ui-white;
+}
+%frame-red-900 {
+  @extend %frame-border-000;
+  background-color: $ui-red-700;
+  border-color: $ui-red-800;
+  color: $ui-white;
+}
+%frame-magenta-300 {
+  @extend %frame-border-000;
+  background-color: $ui-white;
+  border-color: $brand-magenta-600;
+  color: $brand-magenta-600;
+}
--- a/ui-v2/app/styles/base/color/index.scss
+++ b/ui-v2/app/styles/base/color/index.scss
@ -1,3 +1,3 @@
@import './base-variables';
@import './semantic-variables';
-@import './box-placeholders';
+@import './frame-placeholders';
--- a/ui-v2/app/styles/base/icons/index.scss
+++ b/ui-v2/app/styles/base/icons/index.scss
@ -1,3 +1,5 @@
+$hashicorp-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 107 114" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><path d="M44.54 0L0 25.69V87.41l16.73 9.66V35.35L44.54 19.3z"/><path d="M62.32 0v49.15H44.54V30.81L27.8 40.47v62.97l16.74 9.68V64.11h17.78v18.22l16.73-9.66V9.66z"/><path d="M62.32 113.14l44.54-25.69V25.73l-16.74-9.66v61.72l-27.8 16.05z"/></svg>');
+
 $consul-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M8.693 10.707a1.862 1.862 0 1 1-.006-3.724 1.862 1.862 0 0 1 .006 3.724" fill="%23961D59"/><path d="M12.336 9.776a.853.853 0 1 1 0-1.707.853.853 0 0 1 0 1.707M15.639 10.556a.853.853 0 1 1 .017-.07c-.01.022-.01.044-.017.07M14.863 8.356a.855.855 0 0 1-.925-1.279.855.855 0 0 1 1.559.255c.024.11.027.222.009.333a.821.821 0 0 1-.642.691M17.977 10.467a.849.849 0 1 1-1.67-.296.849.849 0 0 1 .982-.692c.433.073.74.465.709.905a.221.221 0 0 0-.016.076M17.286 8.368a.853.853 0 1 1-.279-1.684.853.853 0 0 1 .279 1.684M16.651 13.371a.853.853 0 1 1-1.492-.828.853.853 0 0 1 1.492.828M16.325 5.631a.853.853 0 1 1-.84-1.485.853.853 0 0 1 .84 1.485" fill="%23D62783"/><path d="M8.842 17.534c-4.798 0-8.687-3.855-8.687-8.612C.155 4.166 4.045.31 8.842.31a8.645 8.645 0 0 1 5.279 1.77l-1.056 1.372a6.987 6.987 0 0 0-7.297-.709 6.872 6.872 0 0 0 0 12.356 6.987 6.987 0 0 0 7.297-.709l1.056 1.374a8.66 8.66 0 0 1-5.279 1.77z" fill="%23D62783" fill-rule="nonzero"/></g></svg>');
 $nomad-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path fill="%231F9967" d="M11.569 6.871v2.965l-2.064 1.192-1.443-.894v7.74l.04.002 7.78-4.47V4.48h-.145z"/><path fill="%2325BA81" d="M7.997 0L.24 4.481l5.233 3.074 1.06-.645 2.57 1.435v-2.98l2.465-1.481v2.987l4.314-2.391v-.011z"/><path fill="%2325BA81" d="M7.02 9.54v2.976l-2.347 1.488V8.05l.89-.548L.287 4.48.24 4.48v8.926l7.821 4.467v-7.74z"/></g></svg>');
-$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
+$terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
--- a/ui-v2/app/styles/components/buttons/layout.scss
+++ b/ui-v2/app/styles/components/buttons/layout.scss
@ -9,3 +9,9 @@
 %button:not(:last-child) {
  margin-right: 7px;
 }
+%button-compact {
+  // @extend %button;
+  padding-left: calc(1.75em - 1px);
+  padding-right: calc(1.75em - 1px);
+  height: 2.1em;
+}
--- a/ui-v2/app/styles/components/buttons/skin.scss
+++ b/ui-v2/app/styles/components/buttons/skin.scss
@ -4,87 +4,84 @@
  cursor: pointer;
  white-space: nowrap;
 }
-%primary-button,
-%secondary-button,
-%copy-button,
-%dangerous-button {
-  @extend %button;
+%button:disabled {
+  cursor: default;
+  box-shadow: none;
+}
+%copy-button {
+  @extend %button, %with-clipboard;
 }
 %primary-button,
 %secondary-button,
 %dangerous-button {
-  border: $decor-border-100;
+  @extend %button;
+  border-width: 1px;
  border-radius: $radius-small;
  box-shadow: 0 3px 1px 0 rgba($ui-black, 0.12);
 }
-%primary-button,
-%copy-button {
-  border: 0;
-}
-%copy-button {
-  @extend %with-clipboard;
-}
 /* color */
-%secondary-button,
-%dangerous-button,
-%copy-button {
-  border-color: currentColor;
-}
-%secondary-button {
-  color: $ui-gray-400;
-}
-%secondary-button:hover,
-%secondary-button:focus {
-  color: $ui-gray-600;
-}
-%secondary-button:active {
-  color: $ui-gray-600;
-}
-%primary-button {
-  background-color: $ui-color-action;
-  color: $ui-white;
-}
-%primary-button:hover,
-%primary-button:focus {
-  background-color: $ui-blue-700;
-}
-%primary-button:disabled {
-  color: rgba($ui-white, 0.5);
-  background-color: rgba($ui-blue-700, 0.5);
-  box-shadow: none;
-}
-%primary-button:active {
-  background-color: $ui-blue-900;
-}
-%dangerous-button {
-  color: $ui-color-danger;
-}
-%dangerous-button:hover,
-%dangerous-button:focus {
-  background-color: $ui-color-danger;
-  border-color: $ui-color-danger;
-  color: $ui-white;
-}
-%dangerous-button:disabled {
-  color: rgba($ui-color-danger, 0.5);
-  border-color: rgba($ui-color-danger, 0.5);
-  background-color: $ui-white;
-  box-shadow: none;
-}
-%dangerous-button:active {
-  background-color: $ui-red-700;
-  border-color: $ui-red-700;
-  color: $ui-white;
-}
 %copy-button {
  color: $ui-color-action;
  background-color: $ui-color-transparent;
 }
-%copy-button:hover,
+%copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
  color: $ui-color-action;
  background-color: $ui-gray-050;
 }
+%copy-button:disabled {
+}
 %copy-button:active {
  background-color: $ui-gray-200;
 }
+%primary-button {
+  @extend %frame-blue-800;
+}
+%primary-button:hover:not(:disabled):not(:active),
+%primary-button:focus {
+  @extend %frame-blue-700;
+}
+%primary-button:disabled {
+  @extend %frame-blue-600;
+}
+%primary-button:hover:active {
+  @extend %frame-blue-900;
+}
+/**/
+%secondary-button {
+  /* %frame-gray-something */
+  color: $ui-gray-800;
+  background-color: $ui-gray-050;
+  border-color: $ui-gray-300;
+  border-style: solid;
+}
+%secondary-button:hover:not(:disabled):not(:active),
+%secondary-button:focus {
+  /* %frame-gray-something */
+  background-color: $ui-white;
+  color: $ui-gray-800;
+  border-color: $ui-gray-700;
+}
+%secondary-button:disabled {
+  color: $ui-gray-600;
+}
+%secondary-button:active {
+  /* %frame-gray-something */
+  background-color: $ui-gray-200;
+  color: $ui-gray-800;
+  border-color: $ui-gray-700;
+}
+/**/
+%dangerous-button {
+  @extend %frame-red-300;
+}
+%dangerous-button:hover:not(:disabled):not(:active),
+%dangerous-button:focus {
+  @extend %frame-red-700;
+}
+%dangerous-button:disabled {
+  @extend %frame-red-600;
+}
+%dangerous-button:hover:active {
+  @extend %frame-red-900;
+}
--- a/ui-v2/app/styles/components/confirmation-dialog.scss
+++ b/ui-v2/app/styles/components/confirmation-dialog.scss
@ -2,3 +2,19 @@
 div.with-confirmation {
  @extend %confirmation-dialog, %confirmation-dialog-inline;
 }
+table div.with-confirmation.confirming {
+  position: absolute;
+  right: 0;
+}
+@media #{$--lt-wide-form} {
+  %confirmation-dialog {
+    float: none;
+    margin-top: 1em;
+  }
+  %confirmation-dialog-inline {
+    display: block;
+  }
+  %confirmation-dialog-inline p {
+    margin-bottom: 1em;
+  }
+}
--- a/ui-v2/app/styles/components/confirmation-dialog/layout.scss
+++ b/ui-v2/app/styles/components/confirmation-dialog/layout.scss
@ -10,7 +10,3 @@
  align-items: center;
  line-height: 1;
 }
-table div.with-confirmation.confirming {
-  position: absolute;
-  right: 0;
-}
--- a/ui-v2/app/styles/components/feedback-dialog.scss
+++ b/ui-v2/app/styles/components/feedback-dialog.scss
@ -2,3 +2,13 @@
 main .with-feedback {
  @extend %feedback-dialog-inline;
 }
+@media #{$--lt-spacious-page-header} {
+  .actions .with-feedback p {
+    bottom: auto;
+    top: 0px;
+  }
+  .actions .with-feedback p::after {
+    bottom: auto;
+    top: -5px;
+  }
+}
--- a/ui-v2/app/styles/components/flash-message/skin.scss
+++ b/ui-v2/app/styles/components/flash-message/skin.scss
@ -1,27 +1,16 @@
+%flash-message p {
+  border-width: 1px;
+  border-radius: $decor-radius-100;
+}
 %flash-message p.success strong {
  @extend %with-passing;
 }
 %flash-message p.error strong {
  @extend %with-critical;
 }
-%flash-message p {
-  border: $decor-border-100;
-  border-radius: $radius-small;
-}
 %flash-message p.success {
-  border-color: $ui-color-success;
-  background-color: $ui-green-050;
-}
-%flash-message p {
-  color: $ui-color-success;
+  @extend %frame-green-500;
 }
 %flash-message p.error {
-  border-color: $ui-color-failure;
-  background-color: $ui-red-050;
-}
-%flash-message p.error {
-  color: $ui-color-failure;
-}
-%flash-message p strong {
-  color: inherit;
+  @extend %frame-red-500;
 }
--- a/ui-v2/app/styles/components/form-elements.scss
+++ b/ui-v2/app/styles/components/form-elements.scss
@ -1,4 +1,5 @@
@import './form-elements/index';
+@import './toggle/index';
 .type-toggle {
  @extend %toggle;
 }
@ -8,3 +9,10 @@ label span {
 .has-error {
  @extend %form-element-error;
 }
+%app-content .type-text,
+%app-content .type-toggle {
+  @extend %form-element;
+}
+%app-content [role='radiogroup'] {
+  @extend %radio-group;
+}
--- a/ui-v2/app/styles/components/form-elements/layout.scss
+++ b/ui-v2/app/styles/components/form-elements/layout.scss
@ -1,94 +1,76 @@
-%toggle {
-  float: right;
-  margin-bottom: 0 !important;
+%form-element,
+%form-element > em,
+%form-element > span,
+%form-element textarea {
+  display: block;
+}
+%form-element > em > code {
+  display: inline-block;
+}
+%form-element [type='text'],
+%form-element [type='password'] {
+  display: inline-flex;
+  justify-content: flex-start;
+}
+%form-element textarea {
+  resize: vertical;
 }
 %form-element > span {
-  display: block;
  margin-bottom: 0.5em;
 }
 %form-element textarea {
-  display: block;
  max-width: 100%;
  min-width: 100%;
  min-height: 70px;
  padding: 0.625em 15px;
-  resize: vertical;
 }
 %form-element [type='text'],
 %form-element [type='password'] {
  max-width: 100%;
  width: 100%;
-  display: inline-flex;
-  justify-content: flex-start;
  height: 2.25em;
 }
-%form-element,
 %form-element > em {
-  display: block;
+  margin-top: 2px;
 }
-%form-element > em {
-  margin-left: 8px;
-  margin-top: 10px;
+%form-element > em > code {
+  padding: 0 4px;
+}
+%form-element [type='text'],
+%form-element [type='password'],
+%form-element textarea {
+  padding: 17px 13px;
+}
+%form-element textarea {
+  padding: 6px 13px;
+}
+%form-element > span {
+  margin-bottom: 0.4em !important;
 }
 %form-element,
 %radio-group {
  margin-bottom: 1.55em;
 }
-%form-element > span {
-  margin-bottom: 0.4em !important;
-}
 %radio-group {
  overflow: hidden;
-  padding-left: 1px;
 }
 %radio-group label {
  float: left;
 }
+%radio-group label > span {
+  float: right;
+}
+%radio-group {
+  padding-left: 1px;
+}
 %radio-group label:not(:last-child) {
  margin-right: 25px;
 }
 %radio-group label > span {
  margin-left: 1em;
  margin-top: 0.2em;
-  float: right;
 }
 %radio-group label,
 %radio-group label > span {
  margin-bottom: 0 !important;
 }
-%form-element [type='text'],
-%form-element [type='password'] {
-  padding: 17px 15px;
-}
-%toggle {
-  position: relative;
-}
-%toggle input {
-  display: none;
-}
-%toggle span {
-  display: inline-block;
-  padding-left: 25px;
-}
-%toggle span::before,
-%toggle span::after {
-  position: absolute;
-  display: block;
-  content: '';
-  top: 50%;
-}
-%toggle span::before {
-  left: 0px;
-  width: 20px;
-  height: 12px;
-  margin-top: -8px;
-}
-%toggle span::after {
-  left: 2px;
-  margin-top: -6px;
-  width: 8px;
-  height: 8px;
-}
-%toggle input:checked + span::after {
-  left: 10px;
-}
--- a/ui-v2/app/styles/components/form-elements/skin.scss
+++ b/ui-v2/app/styles/components/form-elements/skin.scss
@ -1,55 +1,40 @@
+%radio-group label {
+  @extend %form-element;
+}
 %form-element-error > input,
 %form-element-error > textarea {
  border: $decor-border-100;
 }
-%radio-group label {
-  @extend %form-element;
-}
-[type='radio'],
-%toggle span::before,
-%toggle span::after {
-  cursor: pointer;
-}
 %form-element [type='text'],
-%form-element [type='password'] {
-  border: $decor-border-100;
+%form-element [type='password'],
+%form-element textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
-}
-%form-element [type='text'],
-%form-element [type='password'] {
-  box-shadow: none;
-  border-radius: $radius-small;
+  box-shadow: inset 0 4px 1px rgba(0, 0, 0, .06);
+  border-radius: $decor-radius-100;
+  border: $decor-border-100;
 }
 %form-element [type='text']:focus,
 %form-element [type='password']:focus,
 %form-element textarea:focus {
  outline: none;
-  box-shadow: none;
-  border-color: $ui-gray-400;
+}
+%form-element > em > code {
+  border-radius: $decor-radius-100;
 }
 %form-element-error > input {
  border-color: $ui-color-failure !important;
 }
-%toggle input:checked + span::before {
-  background-color: $ui-color-success;
-}
-%toggle span {
-  color: $ui-gray-900;
-}
 %form-element > em {
  color: $ui-gray-400;
 }
-%toggle span::after {
-  border-radius: 100%;
-  background-color: $ui-white;
-}
-%toggle span::before {
-  background-color: $ui-gray-300;
-  border-radius: 7px;
+%form-element > em > code {
+  background-color: $ui-gray-200;
+  color: $brand-magenta-600;
+  border-radius: $decor-radius-100;
 }
 %form-element > span {
-  color: $ui-gray-500;
+  color: $ui-black;
 }
 %form-element [type='text'],
 %form-element [type='password'],
@ -58,16 +43,16 @@
 }
 %form-element [type='text'],
 %form-element [type='password'],
-%form-element textarea {
-  background-color: $ui-gray-050;
-}
-%form-element [type='text'],
-%form-element [type='password'],
 %form-element textarea {
  border-color: $ui-gray-300;
 }
 %form-element [type='text']:hover,
 %form-element [type='password']:hover,
 %form-element textarea:hover {
-  border-color: $ui-color-action;
+  border-color: $ui-gray-500;
+}
+%form-element [type='text']:focus,
+%form-element [type='password']:focus,
+%form-element textarea:focus {
+  border-color: $ui-blue-500;
 }
--- a/ui-v2/app/styles/components/healthcheck-status.scss
+++ b/ui-v2/app/styles/components/healthcheck-status.scss
@ -12,3 +12,24 @@
 %healthcheck-status.critical {
  @extend %with-critical;
 }
+@media #{$--lt-spacious-healthcheck-status} {
+  .healthcheck-status button.copy-btn {
+    margin-top: -11px;
+    margin-right: -18px;
+    padding: 0;
+    width: 20px;
+    visibility: hidden;
+  }
+  %healthcheck-status {
+    padding-left: 30px;
+    padding-top: 10px;
+    padding-bottom: 15px;
+    padding-right: 13px;
+  }
+  %healthcheck-status::before {
+    width: 15px !important;
+    height: 15px !important;
+    left: 9px;
+    top: 13px !important;
+  }
+}
--- a/ui-v2/app/styles/components/healthcheck-status/skin.scss
+++ b/ui-v2/app/styles/components/healthcheck-status/skin.scss
@ -1,9 +1,9 @@
 %healthcheck-status {
-  border: $decor-border-100;
+  border-width: 1px;
 }
 %healthcheck-status,
 %healthcheck-status pre {
-  border-radius: $radius-small;
+  border-radius: $decor-radius-100;
 }
 %healthcheck-status dd:first-of-type {
  color: $ui-gray-400;
@ -13,19 +13,23 @@
  color: $ui-white;
 }
 %healthcheck-status.passing {
+  /* TODO: this should be a gray frame */
+  // @extend %frame-green-500;
+  color: $ui-gray-900;
  border-color: $ui-gray-200;
+  border-style: solid;
+}
+%healthcheck-status.warning {
+  @extend %frame-yellow-500;
+  color: $ui-gray-900;
+}
+%healthcheck-status.critical {
+  @extend %frame-red-500;
+  color: $ui-gray-900;
 }
 %healthcheck-status.passing::before {
  background-color: $ui-color-success !important;
 }
-%healthcheck-status.critical {
-  border-color: $ui-color-danger;
-  background-color: rgba($ui-color-danger, 0.1);
-}
 %healthcheck-status.critical::before {
  background-color: $ui-color-danger !important;
 }
-%healthcheck-status.warning {
-  border-color: $ui-color-alert;
-  background-color: rgba($ui-color-alert, 0.1);
-}
--- a/ui-v2/app/styles/components/icons/index.scss
+++ b/ui-v2/app/styles/components/icons/index.scss
@ -58,13 +58,18 @@
  padding-left: 10px;
  display: inline-block;
 }
+%with-hashicorp {
+  background-color: $ui-white;
+}
 %with-hashicorp::before {
  @extend %pseudo-icon;
-  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="23" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="%23a5b0b7"><path d="M9.753 1L1 5.541v10.911l3.288 1.707V7.25l5.465-2.837z"/><path d="M13.247 1v8.688H9.753V6.446l-3.29 1.708v11.131l3.29 1.711v-8.663h3.494v3.22l3.288-1.707V2.708z"/><path d="M13.247 21L22 16.459V5.548l-3.29-1.707v10.91l-5.463 2.837z"/></g></svg>');
-  width: 23px;
-  height: 22px;
+  opacity: .45;
+  background-image: $hashicorp-svg;
+  background-size: cover;
+  width: 20px;
+  height: 20px;
  left: -25px;
-  margin-top: -11px;
+  margin-top: -10px;
  background-color: $ui-color-transparent;
 }
 %with-clipboard {
--- a/ui-v2/app/styles/components/notice/skin.scss
+++ b/ui-v2/app/styles/components/notice/skin.scss
@ -1,5 +1,6 @@
 %notice {
  border-radius: $radius-small;
+  border-width: 1px;
 }
 %notice-success,
 %notice-info,
@ -26,8 +27,7 @@
  color: $ui-color-action; /* change to info */
 }
 %notice-warning {
-  @extend %box-color-yellow-500, %with-warning;
-  border-width: 1px;
+  @extend %frame-yellow-500, %with-warning;
 }
 %notice-error {
  @extend %with-critical;
--- a/ui-v2/app/styles/components/product.scss
+++ b/ui-v2/app/styles/components/product.scss
@ -1,6 +1,5 @@
@import './product/index';
@import './filter-bar';
-@import './form-elements/index';
 html body > svg {
  display: none;
 }
@ -19,12 +18,10 @@ main {
 %app-view header form {
  @extend %filter-bar;
 }
-%app-content .type-text,
-%app-content .type-toggle {
-  @extend %form-element;
-}
-%app-content [role='radiogroup'] {
-  @extend %radio-group;
+@media #{$--lt-spacious-page-header} {
+  %app-view header .actions {
+    margin-top: 5px;
+  }
 }
 %loader circle {
  fill: $brand-magenta-100;
@ -49,3 +46,37 @@ main {
 #wrapper > footer {
  @extend %footer;
 }
+/*TODO: This should go in reset, and probably needs select etc adding  */
+@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) {
+  input {
+    font-size: 16px !important;
+  }
+}
+/* toggleable toolbar for short screens */
+[for='toolbar-toggle'] {
+  @extend %with-magnifier;
+  color: $ui-blue-500;
+  width: 20px;
+  height: 20px;
+  margin-left: 15px;
+  top: -3px;
+}
+#toolbar-toggle {
+  display: none;
+}
+@media #{$--expanded-filters} {
+  [for='toolbar-toggle'] {
+    display: none;
+  }
+}
+@media #{$--lt-expanded-filters} {
+  %app-view header h1 {
+    display: inline-block;
+  }
+  #toolbar-toggle + * {
+    display: none;
+  }
+  #toolbar-toggle:checked + * {
+    display: block;
+  }
+}
--- a/ui-v2/app/styles/components/product/app-view.scss
+++ b/ui-v2/app/styles/components/product/app-view.scss
@ -48,8 +48,7 @@
 }
 %app-view header .actions a,
 %app-view header .actions button {
-  padding: calc(0.375em - 1px) calc(2.2em - 1px);
-  height: 2.25em;
+  @extend %button-compact;
 }

 // content
--- a/ui-v2/app/styles/components/product/footer.scss
+++ b/ui-v2/app/styles/components/product/footer.scss
@ -5,7 +5,7 @@
  border-top: $decor-border-100;
 }
 %footer {
-  border-color: $keyline-mid;
+  border-color: $ui-gray-200;
  background-color: $ui-white;
 }
 %footer > * {
@ -16,9 +16,31 @@
  justify-content: center;
  position: relative;
  z-index: 1;
-  padding: 25px;
 }
 %footer > * {
  display: block;
-  padding: 11px;
+}
+@media #{$--tall-footer} {
+  %footer {
+    padding-top: 25px;
+    padding-bottom: 25px;
+  }
+}
+@media #{$--wide-footer} {
+  %footer {
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+  %footer > * {
+    padding: 11px;
+  }
+}
+@media #{$--lt-wide-footer} {
+  %footer > :first-child {
+    padding: 5px;
+    margin-left: 20px;
+  }
+  %footer > :not(:first-child) {
+    display: none;
+  }
 }
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@ -81,7 +81,8 @@ table td a {
  display: block;
 }
 tbody {
-  overflow-x: visible !important;
+  /* important required as ember-collection will inline an overflow: visible*/
+  overflow-x: hidden !important;
 }
 th,
 td:not(.actions),
@ -124,3 +125,32 @@ td dd {
  margin-left: 22px;
  padding-right: 10px;
 }
+/* hide actions on narrow screens, you can always click in do everything from there */
+@media #{$--lt-wide-table} {
+  tr > .actions {
+    display: none;
+  }
+}
+/* ideally these would be in route css files, but left here as they */
+/* accomplish the same thing (hide non-essential columns for tables) */
+@media #{$--lt-wide-table} {
+  html.template-intention.template-list tr > :nth-last-child(2) {
+    display: none;
+  }
+  html.template-service.template-list tr > :last-child {
+    display: none;
+  }
+  html.template-node.template-show #services tr > :last-child {
+    display: none;
+  }
+  html.template-node.template-show #lock-sessions tr >
+  :not(:first-child):not(:last-child) {
+    display: none;
+  }
+  html.template-node.template-show #lock-sessions td:last-child {
+    padding: 0;
+  }
+  html.template-node.template-show #lock-sessions td:last-child button {
+    float: right;
+  }
+}
--- a/ui-v2/app/styles/components/tabs.scss
+++ b/ui-v2/app/styles/components/tabs.scss
@ -1,5 +1,5 @@
@import './tabs/index';
-main header nav:last-child {
+main header nav:last-of-type:not(:first-of-type) {
  @extend %tab-nav;
 }
 .tab-section {
--- a/ui-v2/app/styles/components/tabs/layout.scss
+++ b/ui-v2/app/styles/components/tabs/layout.scss
@ -1,4 +1,5 @@
 %tab-section {
+  /* this keeps in-tab-section toolbars flush to the top, see Node Detail > Services */
  margin-top: 0 !important;
 }
@media #{$--horizontal-tabs} {
@ -6,12 +7,9 @@
    display: flex;
    align-items: center;
  }
-  %tab-nav ul li:not(:first-child) {
-    margin-left: 37px;
-  }
  %tab-nav a {
-    padding-left: 5px;
-    padding-right: 5px;
+    padding-left: 16px;
+    padding-right: 16px;
  }
 }
@media #{$--lt-horizontal-tabs} {
@ -21,10 +19,9 @@
 }
 %tab-nav a {
  display: block;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  padding-top: 13px;
+  padding-bottom: 13px;
 }
-%tab-nav input[type='radio'],
 %tab-section > input[type='radio'],
 %tab-section > input[type='radio'] + * {
  display: none;
--- a/ui-v2/app/styles/components/tabs/skin.scss
+++ b/ui-v2/app/styles/components/tabs/skin.scss
@ -1,24 +1,24 @@
 %tab-nav label {
  cursor: pointer;
 }
-%tab-nav ul {
-  border: 0;
+%tab-nav a {
+  white-space: nowrap;
 }
 %tab-nav a {
-  border-bottom: $decor-border-300;
+  border-bottom: $decor-border-200;
 }
 %tab-nav a {
  border-color: $ui-color-transparent;
  color: $ui-gray-500;
 }
-%tab-nav a:hover,
-%tab-nav a:focus,
-%tab-nav a:active,
+%tab-nav li:not(.selected) a:hover,
+%tab-nav li:not(.selected) a:focus,
+%tab-nav li:not(.selected) a:active {
+  /* %frame-gray-something */
+  border-color: $ui-color-transparent;
+  background-color: $ui-gray-100;
+}
 %tab-nav .selected a {
-  border-color: $brand-magenta-600;
-  color: $brand-magenta-600;
+  @extend %frame-magenta-300;
 }

-%tab-nav a {
-  white-space: nowrap;
-}
--- a/ui-v2/app/styles/components/toggle/index.scss
+++ b/ui-v2/app/styles/components/toggle/index.scss
@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
--- a/ui-v2/app/styles/components/toggle/layout.scss
+++ b/ui-v2/app/styles/components/toggle/layout.scss
@ -0,0 +1,33 @@
+%toggle {
+  position: relative;
+}
+%toggle input {
+  display: none;
+}
+%toggle span {
+  display: inline-block;
+  padding-left: 25px;
+}
+%toggle span::before,
+%toggle span::after {
+  position: absolute;
+  display: block;
+  content: '';
+  top: 50%;
+}
+%toggle span::before {
+  left: 0px;
+  width: 20px;
+  height: 12px;
+  margin-top: -8px;
+}
+%toggle span::after {
+  left: 2px;
+  margin-top: -6px;
+  width: 8px;
+  height: 8px;
+}
+%toggle input:checked + span::after {
+  left: 10px;
+}
+
--- a/ui-v2/app/styles/components/toggle/skin.scss
+++ b/ui-v2/app/styles/components/toggle/skin.scss
@ -0,0 +1,25 @@
+/* TODO: Maybe move this to reset? */
+[type='radio'],
+%toggle span::before,
+%toggle span::after {
+  cursor: pointer;
+}
+%toggle span::after {
+  border-radius: $decor-radius-full;
+}
+%toggle span::before {
+  border-radius: 7px;
+}
+%toggle input:checked + span::before {
+  background-color: $ui-color-success;
+}
+%toggle span {
+  color: $ui-gray-900;
+}
+%toggle span::after {
+  background-color: $ui-white;
+}
+%toggle span::before {
+  background-color: $ui-gray-300;
+}
+
--- a/ui-v2/app/styles/core/layout.scss
+++ b/ui-v2/app/styles/core/layout.scss
@ -20,8 +20,26 @@ main,
 html.template-edit main {
  @extend %content-container-restricted;
 }
+
+@media #{$--lt-spacious-page-header} {
+  html.template-list:not(.template-kv) main {
+    margin-top: 10px;
+  }
+}
+@media #{$--lt-spacious-page-header} {
+  .actions button.copy-btn {
+    margin-top: -42px;
+    padding: 0;
+  }
+}
 /* TODO: keep margin below forms, move elsewhere */
 main form,
 main form + div .with-confirmation {
  margin-bottom: 2em;
 }
+@media #{$--lt-wide-form} {
+  main form [type="reset"] {
+    float: right;
+    margin-right: 0 !important;
+  }
+}
--- a/ui-v2/app/styles/core/typography.scss
+++ b/ui-v2/app/styles/core/typography.scss
@ -37,11 +37,13 @@ h2,
 %healthchecked-resource header span,
 %healthcheck-status dt,
 %copy-button,
-%form-element > span,
 %app-content div > dl > dt,
 td a {
  font-weight: $typo-weight-semibold;
 }
+%form-element > span {
+  font-weight: $typo-weight-semibold;
+}
 %button {
  font-weight: $typo-weight-semibold !important;
 }
@ -63,12 +65,6 @@ td:first-child em,
 %healthchecked-resource header em {
  font-style: normal;
 }
-%form-element > span {
-  text-transform: uppercase;
-}
-%form-element > span > * {
-  text-transform: none;
-}
 %footer > * {
  font-size: inherit;
 }
@ -87,6 +83,7 @@ td {
  font-size: $typo-size-600;
 }
 th,
+%form-element > span,
 %with-tooltip::before,
 %healthchecked-resource strong,
 %footer {
@ -100,9 +97,8 @@ th,
 %app-view > div.disabled > div,
 .template-error > div,
 %button,
-.with-confirmation p,
 %form-element > em,
-%form-element > span,
+.with-confirmation p,
 %feedback-dialog-inline p {
  font-size: $typo-size-800;
 }
--- a/ui-v2/app/styles/routes/dc/acls/index.scss
+++ b/ui-v2/app/styles/routes/dc/acls/index.scss
@ -0,0 +1,15 @@
+@media #{$--lt-wide-form} {
+  html.template-acl.template-edit main header .actions {
+    float: none;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1em;
+  }
+  html.template-acl.template-edit main header .actions .with-feedback {
+    position: absolute;
+    right: 0;
+  }
+  html.template-acl.template-edit main header .actions .with-confirmation {
+    margin-top: 0;
+  }
+}
--- a/ui-v2/app/styles/routes/dc/kv/index.scss
+++ b/ui-v2/app/styles/routes/dc/kv/index.scss
@ -2,3 +2,7 @@ html.template-kv.template-edit div > .with-confirmation {
  float: none;
  margin-top: 1.7em;
 }
+html.template-kv.template-edit .type-toggle {
+  float: right;
+  margin-bottom: 0 !important;
+}
--- a/ui-v2/app/styles/variables/custom-query.scss
+++ b/ui-v2/app/styles/variables/custom-query.scss
@ -16,3 +16,24 @@ $--lt-horizontal-session-list: '(max-width: 899px)';

 $--min-padding: '(max-width: 600px)';
 $--max-padding: '(min-width: 1260px)';
+
+$--tall-footer: '(min-height: 815px)';
+$--lt-tall-footer: '(max-height: 814px)';
+
+$--wide-footer: '(min-width: 421px)';
+$--lt-wide-footer: '(max-width: 420px)';
+
+$--expanded-filters: '(min-width: 421px) (min-height: 815px)';
+$--lt-expanded-filters: '(max-width: 420px) (max-height: 814px)';
+
+$--spacious-page-header: '(min-width: 421px) (min-height: 815px)';
+$--lt-spacious-page-header: '(max-width: 420px) (max-height: 814px)';
+
+$--spacious-healthcheck-status: '(min-width: 421px)';
+$--lt-spacious-healthcheck-status: '(max-width: 420px)';
+
+$--wide-form: '(min-width: 421px)';
+$--lt-wide-form: '(max-width: 420px)';
+
+$--wide-table: '(min-width: 421px)';
+$--lt-wide-table: '(max-width: 420px)';
--- a/ui-v2/app/templates/components/app-view.hbs
+++ b/ui-v2/app/templates/components/app-view.hbs
@ -19,7 +19,10 @@
            {{#yield-slot 'header'}}{{yield}}{{/yield-slot}}
        </div>
    </div>
-    {{#yield-slot 'toolbar'}}{{yield}}{{/yield-slot}}
+    {{#yield-slot 'toolbar'}}
+      <input type="checkbox" id="toolbar-toggle" />
+      {{yield}}
+    {{/yield-slot}}
 </header>
 {{/if}}
 <div>
--- a/ui-v2/app/templates/dc/acls/-form.hbs
+++ b/ui-v2/app/templates/dc/acls/-form.hbs
@ -7,7 +7,7 @@
        <div role="radiogroup" class={{if item.error.Type ' has-error'}}>
            {{#each types as |type|}}
                <label>
-                    <span>{{type}}</span>
+                    <span>{{capitalize type}}</span>
                    <input type="radio" name="Type" value="{{type}}" checked={{if (eq item.Type type) 'checked'}} onchange={{ action 'change' }}/>
                </label>
            {{/each}}
--- a/ui-v2/app/templates/dc/acls/index.hbs
+++ b/ui-v2/app/templates/dc/acls/index.hbs
@ -6,6 +6,7 @@
        <h1>
            ACL Tokens
        </h1>
+        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot 'actions'}}
        <a data-test-create href="{{href-to 'dc.acls.create'}}" class="type-create">Create</a>
--- a/ui-v2/app/templates/dc/intentions/-form.hbs
+++ b/ui-v2/app/templates/dc/intentions/-form.hbs
@ -43,7 +43,7 @@
        <div role="radiogroup" class={{if item.error.Action ' has-error'}}>
            {{#each intents as |intent|}}
                <label>
-                    <span>{{intent}}</span>
+                    <span>{{ capitalize intent }}</span>
                    <input type="radio" name="Action" value="{{intent}}" checked={{if (eq item.Action intent) 'checked'}} onchange={{ action 'change' }}/>
                </label>
            {{/each}}
--- a/ui-v2/app/templates/dc/intentions/index.hbs
+++ b/ui-v2/app/templates/dc/intentions/index.hbs
@ -6,6 +6,7 @@
        <h1>
            Intentions
        </h1>
+        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot 'actions'}}
        <a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
--- a/ui-v2/app/templates/dc/kv/index.hbs
+++ b/ui-v2/app/templates/dc/kv/index.hbs
@ -20,6 +20,7 @@
                {{ take 1 (drop 1 (reverse (split parent.Key '/'))) }}
            {{/if}}
        </h1>
+        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot 'toolbar'}}
 {{#if (gt items.length 0) }}
--- a/ui-v2/app/templates/dc/nodes/-services.hbs
+++ b/ui-v2/app/templates/dc/nodes/-services.hbs
@ -1,4 +1,5 @@
 {{#if (gt items.length 0) }}
+    <input type="checkbox" id="toolbar-toggle" />
    <form class="filter-bar">
        {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name/port"}}
    </form>
--- a/ui-v2/app/templates/dc/nodes/index.hbs
+++ b/ui-v2/app/templates/dc/nodes/index.hbs
@ -3,6 +3,7 @@
        <h1>
            Nodes
        </h1>
+        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot 'toolbar'}}
 {{#if (gt items.length 0) }}
--- a/ui-v2/app/templates/dc/nodes/show.hbs
+++ b/ui-v2/app/templates/dc/nodes/show.hbs
@ -12,6 +12,7 @@
        <h1>
          {{ item.Node }}
        </h1>
+        <label for="toolbar-toggle"></label>
        {{tab-nav
            items=(compact
              (array
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@ -7,6 +7,7 @@
        <h1>
            Services
        </h1>
+        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot 'toolbar'}}
 {{#if (gt items.length 0) }}
--- a/ui-v2/ember-cli-build.js
+++ b/ui-v2/ember-cli-build.js
@ -18,6 +18,9 @@ module.exports = function(defaults) {
    'ember-cli-babel': {
      includePolyfill: true
    },
+    'ember-cli-string-helpers': {
+      only: ['capitalize']
+    },
    'babel': {
      plugins: [
        'transform-object-rest-spread'
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@ -38,7 +38,6 @@
    "ember-ajax": "^3.0.0",
    "ember-block-slots": "^1.1.11",
    "ember-browserify": "^1.2.2",
-    "ember-bulma-css": "^0.2.1",
    "ember-changeset-validations": "^1.2.11",
    "ember-cli": "~2.18.2",
    "ember-cli-app-version": "^3.0.0",
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@ -1944,10 +1944,6 @@ builtins@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"

-bulma@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"
-
 bytes@1:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/bytes/-/bytes-1.0.0.tgz#3569ede8ba34315fab99c3e92cb04c7220de1fa8"
@ -3022,14 +3018,6 @@ ember-browserify@^1.2.2:
    through2 "^2.0.0"
    walk-sync "^0.2.7"

-ember-bulma-css@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/ember-bulma-css/-/ember-bulma-css-0.2.1.tgz#4b168a74191c127d5bfec21dd3ceb0b279c72b1c"
-  dependencies:
-    bulma "^0.6.2"
-    ember-cli-babel "^6.6.0"
-    ember-cli-sass "^7.2.0"
-
 ember-changeset-validations@^1.2.11:
  version "1.2.11"
  resolved "https://registry.yarnpkg.com/ember-changeset-validations/-/ember-changeset-validations-1.2.11.tgz#b769c3557f42fae05398869f3904200e21a005d7"
@ -3335,15 +3323,6 @@ ember-cli-sass@^7.1.4:
    broccoli-sass-source-maps "^2.1.0"
    ember-cli-version-checker "^2.1.0"

-ember-cli-sass@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/ember-cli-sass/-/ember-cli-sass-7.2.0.tgz#293d1a94c43c1fdbb3835378e43d255e8ad5c961"
-  dependencies:
-    broccoli-funnel "^1.0.0"
-    broccoli-merge-trees "^1.1.0"
-    broccoli-sass-source-maps "^2.1.0"
-    ember-cli-version-checker "^2.1.0"
-
 ember-cli-shims@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/ember-cli-shims/-/ember-cli-shims-1.2.0.tgz#0f53aff0aab80b5f29da3a9731bac56169dd941f"