ui: Side navigation tweaks (#9812)

* Remove footer and add the Consul version to the Help menu

* Tweak menu text and button styling

* Tweak some coloring and spacing

* Add slightly larger Consul logo

ui/packages/consul-ui/app/components/app/index.scss

@@ -34,7 +34,7 @@ main {
   z-index: 10;
 }
 main {
-  top: var(--chrome-height);
+  margin-top: var(--chrome-height);
   transition-property: margin-left;
 }
 

ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs

@@ -7,10 +7,11 @@
     <:home-nav>
       <a
         href={{href-to 'index'}}
-      ><svg width="28" height="27" xmlns="http://www.w3.org/2000/svg">
+      ><svg width="34" height="34" xmlns="http://www.w3.org/2000/svg">
         <title>Consul</title>
-        <path
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.879 19.9a3.027 3.027 0 1 1-.01-6.053 3.027 3.027 0 0 1 .01 6.054z" fill="#961D59"/>
-          d="M13.284 16.178a2.876 2.876 0 1 1-.008-5.751 2.876 2.876 0 0 1 .008 5.75zm5.596-1.547a1.333 1.333 0 1 1 0-2.667 1.333 1.333 0 0 1 0 2.667zm4.853 1.249a1.271 1.271 0 1 1 .027-.107c0 .031 0 .067-.027.107zm-.937-3.436a1.333 1.333 0 1 1 .986-1.595c.033.172.033.348 0 .52-.07.53-.465.96-.986 1.075zm4.72 3.29a1.333 1.333 0 1 1-1.076-1.538 1.333 1.333 0 0 1 1.116 1.417.342.342 0 0 0-.027.12h-.013zm-1.08-3.33a1.333 1.333 0 1 1 1.088-1.524c.014.114.014.229 0 .342a1.333 1.333 0 0 1-1.102 1.182h.014zm-.925 7.925a1.333 1.333 0 1 1 .165-.547c-.01.193-.067.38-.165.547zm-.48-12.191a1.333 1.333 0 1 1 .507-1.814c.14.237.198.514.164.787-.038.438-.289.828-.67 1.045v-.018zM13.333 26.667C5.97 26.667 0 20.697 0 13.333 0 5.97 5.97 0 13.333 0c2.929-.01 5.778.955 8.098 2.742L19.8 4.89a10.667 10.667 0 0 0-17.133 8.444 10.667 10.667 0 0 0 17.137 8.471l1.627 2.13a13.218 13.218 0 0 1-8.098 2.733z"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.802 18.387a1.387 1.387 0 1 1 0-2.775 1.387 1.387 0 0 1 0 2.775zM28.17 19.656a1.387 1.387 0 1 1 .028-.113c-.015.035-.015.07-.028.113zM26.909 16.08a1.386 1.386 0 1 1-.098-2.719c.555.09 1 .506 1.129 1.053.038.178.043.362.014.542a1.335 1.335 0 0 1-1.043 1.123M31.972 19.512a1.38 1.38 0 0 1-1.598 1.124 1.386 1.386 0 0 1-1.119-1.606 1.38 1.38 0 0 1 1.598-1.126c.703.12 1.202.756 1.153 1.472a.358.358 0 0 0-.027.123M30.848 16.098a1.387 1.387 0 1 1 1.157-1.239 1.38 1.38 0 0 1-1.157 1.24zM29.817 24.232a1.387 1.387 0 1 1 .17-.562c-.011.198-.07.39-.17.562zM29.286 11.65a1.387 1.387 0 1 1 .526-1.89c.142.242.202.523.171.801-.039.456-.3.863-.697 1.088z" fill="#C62A71"/>
+        <path d="M17.122 31C9.322 31 3 24.732 3 17S9.323 3 17.122 3a14.054 14.054 0 0 1 8.58 2.875l-1.716 2.232a11.359 11.359 0 0 0-11.862-1.152c-3.852 1.888-6.288 5.782-6.28 10.043-.008 4.26 2.428 8.155 6.28 10.043a11.359 11.359 0 0 0 11.862-1.152l1.717 2.233A14.078 14.078 0 0 1 17.122 31z" fill="#C62A71"/>
         </svg></a>
     </:home-nav>
 
@@ -153,6 +154,11 @@
               </BlockSlot>
               <BlockSlot @name="menu">
                 {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
+                  <MenuSeparator>
+                    <BlockSlot @name="label">
+                      Consul v{{env 'CONSUL_VERSION'}}
+                    </BlockSlot>
+                  </MenuSeparator>
                   <MenuItem
                     class="docs-link"
                     @href={{env 'CONSUL_DOCS_URL'}}
@@ -194,10 +200,10 @@
             >
               {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
                 <BlockSlot @name="unauthorized">
-                  <label tabindex="0" for={{concat guid "-login-toggle"}} onkeypress={{this.keypressClick}}>
+                  <label tabindex="0" for="login-toggle" onkeypress={{this.keypressClick}}>
                     <span>Log in</span>
                   </label>
-                  <ModalDialog @name={{concat guid "-login-toggle"}} @onclose={{this.close}} @onopen={{this.open}} as |api|>
+                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
                     <Ref @target={{this}} @name="modal" @value={{api}} />
                     <BlockSlot @name="header">
                       <h2>Log in to Consul</h2>
@@ -215,7 +221,7 @@
                   </ModalDialog>
                 </BlockSlot>
                 <BlockSlot @name="authorized">
-                  <ModalDialog @name={{concat guid "-login-toggle"}} @onclose={{this.close}} @onopen={{this.open}} as |api|>
+                  <ModalDialog @name="login-toggle" @onclose={{this.close}} @onopen={{this.open}} as |api|>
                     <Ref @target={{this}} @name="modal" @value={{api}} />
                     <BlockSlot @name="header">
                       <h2>Log in with a different token</h2>
@@ -268,21 +274,6 @@
     </:main>
 
     <:content-info>
-      <Action
-        @href={{concat (env 'CONSUL_COPYRIGHT_URL') '/'}}
-        @external={{true}}
-      >
-        &copy; {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp
-      </Action>
-      <p>
-        Consul {{env 'CONSUL_VERSION'}}
-      </p>
-      <Action
-        @href={{env 'CONSUL_DOCS_URL'}}
-        @external={{true}}
-      >
-        Documentation
-      </Action>
       {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
     </:content-info>
   </App>

ui/packages/consul-ui/app/components/main-nav-vertical/layout.scss

@@ -14,7 +14,7 @@
 %main-nav-vertical li.nspaces,
 %main-nav-vertical li.dcs {
   margin-bottom: 25px;
-  padding: 0 20px;
+  padding: 0 26px;
 }
 // TODO: We no longer have the rule that menu-panel buttons only contain two
 // items, left and right aligned. We should remove this and look to use
@@ -37,5 +37,5 @@
 }
 
 %main-nav-vertical-menu-panel {
-  min-width: 260px;
+  min-width: 248px;
 }

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -2,14 +2,16 @@
   cursor: pointer;
   border-right: $decor-border-400;
   border-color: $transparent;
-  font-size: $typo-size-600;
+  @extend %p1;
 }
 %main-nav-vertical-action > a {
   color: inherit;
   font-size: inherit;
 }
 %main-nav-vertical [role="separator"] {
+  @extend %p3;
   text-transform: uppercase;
+  font-weight: $typo-weight-medium;
 }
 %main-nav-vertical-action-intent {
   text-decoration: underline;

ui/packages/consul-ui/app/components/menu-panel/skin.scss

@@ -6,8 +6,20 @@
 %menu-panel > ul > li {
   list-style-type: none;
 }
+%menu-panel dt {
+  font-weight: $typo-weight-bold;
+}
+%menu-panel dl,
+%menu-panel-header {
+  @extend %p2;
+}
 %menu-panel-separator {
+  @extend %p3;
   text-transform: uppercase;
+  font-weight: $typo-weight-medium;
+}
+%menu-panel dt span {
+  font-weight: $typo-weight-normal;
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {
@@ -20,11 +32,15 @@
   border-color: var(--gray-300);
   background-color: var(--gray-000);
 }
+%menu-panel dt,
 %menu-panel dd {
-  color: $gray-500;
+  color: var(--gray-800);
+}
+%menu-panel dt span {
+  color: var(--gray-600);
 }
 %menu-panel-separator {
-  color: var(--gray-400);
+  color: var(--gray-600);
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {

ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss

@@ -151,7 +151,7 @@
 }
 %frame-red-300 {
   @extend %frame-border-000;
-  background-color: $white;
+  background-color: $transparent;
   border-color: $red-500;
   color: $red-500;
 }

ui/packages/consul-ui/app/styles/components.scss

@@ -38,7 +38,6 @@
 
 @import './components/brand-loader';
 @import './components/loader';
-@import './components/footer';
 
 /**/
 

ui/packages/consul-ui/app/styles/components/footer.scss

@@ -1,4 +0,0 @@
-@import './footer/index';
-#wrapper > footer {
-  @extend %footer;
-}

ui/packages/consul-ui/app/styles/components/footer/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

ui/packages/consul-ui/app/styles/components/footer/layout.scss

@@ -1,33 +0,0 @@
-%footer {
-  display: flex;
-  justify-content: center;
-  position: relative;
-  z-index: 1;
-}
-%footer > * {
-  display: block;
-}
-@media #{$--tall-footer} {
-  %footer {
-    padding-top: 12px;
-    padding-bottom: 12px;
-  }
-}
-@media #{$--wide-footer} {
-  %footer {
-    padding-left: 12px;
-    padding-right: 12px;
-  }
-  %footer > * {
-    padding: 11px;
-  }
-}
-@media #{$--lt-wide-footer} {
-  %footer > :first-child {
-    padding: 5px;
-    margin-left: 20px;
-  }
-  %footer > :not(:first-child) {
-    display: none;
-  }
-}

ui/packages/consul-ui/app/styles/components/footer/skin.scss

@@ -1,25 +0,0 @@
-/* This layout is to do with the logo */
-%footer > a:first-child {
-  position: relative;
-}
-%footer > a:first-child::before {
-  position: absolute;
-  top: 50%;
-  margin-top: -0.7em;
-  left: -25px;
-}
-%footer > a:first-child::before {
-  @extend %with-hashicorp-logo-mask, %as-pseudo;
-  background-color: $gray-400;
-  font-size: 1.4em;
-}
-%footer {
-  border-top: $decor-border-100;
-}
-%footer {
-  border-color: $gray-200;
-  background-color: $white;
-}
-%footer > * {
-  color: $gray-400;
-}

ui/packages/consul-ui/app/styles/layout.scss

@@ -54,13 +54,13 @@ html:not(.has-nspaces) [class*='nspace-'] {
 }
 #wrapper {
   @extend %viewport-container;
-}
+  display: flex;
-#wrapper {
+  min-height: 100vh;
-  @extend %with-sticky-footer;
+  flex-direction: column;
 }
 main {
-  @extend %with-sticky-footer-content;
   position: relative;
+  flex: 1;
 }
 main,
 #wrapper > footer {

ui/packages/consul-ui/app/styles/layouts/containers.scss

@@ -1,66 +0,0 @@
-$ideal-viewport-width-num: 1260;
-$ideal-viewport-width: #{$ideal-viewport-width-num}px;
-$ideal-content-width-num: 1150;
-$ideal-content-width: #{$ideal-content-width-num}px;
-$ideal-viewport-padding-num: 24;
-$ideal-viewport-padding: #{$ideal-viewport-padding-num}px;
-$minimum-viewport-padding: 10px;
-$ideal-content-padding: 33px;
-
-// workaround bulma's sweeping box-sizing
-// so we can verify the ideal widths are the same
-
-%viewport-container {
-  box-sizing: content-box;
-}
-%viewport-container {
-  margin-left: auto;
-  margin-right: auto;
-}
-%modal-dialog > *,
-%content-container > * {
-  box-sizing: border-box;
-}
-%content-container-restricted {
-  max-width: $ideal-content-width;
-}
-%viewport-container {
-  padding-left: 25px;
-  padding-right: calc(#{$ideal-viewport-padding-num}vw / (#{$ideal-viewport-width-num} / 100));
-}
-%content-container {
-  padding-left: calc(24vw / (#{$ideal-viewport-width-num} / 100));
-  padding-right: calc(24vw / (#{$ideal-viewport-width-num} / 100));
-}
-@media #{$--min-padding} {
-  %viewport-container {
-    padding-left: $minimum-viewport-padding;
-    padding-right: $minimum-viewport-padding;
-  }
-}
-@media #{$--max-padding} {
-  %viewport-container {
-    padding-left: $ideal-viewport-padding;
-    padding-right: $ideal-viewport-padding;
-  }
-  %content-container {
-    padding-left: $ideal-viewport-padding;
-    padding-right: $ideal-viewport-padding;
-  }
-}
-fieldset [role='group'] {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-}
-[role='group'] fieldset {
-  width: 50%;
-}
-[role='group'] fieldset:not(:first-of-type) {
-  padding-left: 20px;
-  border-left: 1px solid;
-  border-left: $gray-500;
-}
-[role='group'] fieldset:not(:last-of-type) {
-  padding-right: 20px;
-}

ui/packages/consul-ui/app/styles/layouts/index.scss

@@ -1,2 +1,33 @@
-@import './with-sticky-footer';
+// workaround bulma's sweeping box-sizing
-@import './containers';
+
+%viewport-container {
+  box-sizing: content-box;
+}
+%modal-dialog > *,
+%content-container > * {
+  box-sizing: border-box;
+}
+%content-container-restricted {
+  max-width: 1260px;
+}
+%viewport-container {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+fieldset [role='group'] {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+[role='group'] fieldset {
+  width: 50%;
+}
+[role='group'] fieldset:not(:first-of-type) {
+  padding-left: 20px;
+  border-left: 1px solid;
+  border-left: $gray-500;
+}
+[role='group'] fieldset:not(:last-of-type) {
+  padding-right: 20px;
+}

ui/packages/consul-ui/app/styles/layouts/with-sticky-footer.scss

@@ -1,8 +0,0 @@
-%with-sticky-footer {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-%with-sticky-footer-content {
-  flex: 1;
-}

ui/packages/consul-ui/app/styles/themes.scss

@@ -6,9 +6,6 @@
 %main-nav-horizontal {
   @extend %theme-dark;
 }
-%main-nav-horizontal .menu-panel {
-  @extend %theme-light;
-}
 %main-nav-vertical .nspaces .menu-panel > div {
   @extend %theme-light;
 }

ui/packages/consul-ui/app/styles/typography.scss

@@ -31,7 +31,6 @@ pre code,
 %tab-section p {
   @extend %p1;
 }
-%menu-panel dl,
 %empty-state-anchor,
 .type-dialog,
 %table td p,
@@ -40,7 +39,6 @@ pre code,
 %form-element-label,
 %stats-card header a span,
 %footer,
-%menu-panel-header,
 %app-view h1 span.kind-proxy {
   @extend %p2;
 }
@@ -49,7 +47,6 @@ pre code,
 %button,
 %main-content p,
 %form-element-note,
-%menu-panel-separator,
 %form-element-error > strong {
   @extend %p3;
 }
@@ -67,15 +64,11 @@ pre code,
 %button {
   font-weight: $typo-weight-semibold;
 }
-%menu-panel dt,
 %route-card section dt,
 %route-card header:not(.short) dd,
 %splitter-card > header {
   font-weight: $typo-weight-bold;
 }
-%menu-panel-separator {
-  font-weight: $typo-weight-medium;
-}
 /**/
 
 /* resets */

ui/packages/consul-ui/app/styles/variables/custom-query.scss

@@ -15,12 +15,6 @@ $--lt-horizontal-tabs: '(max-width: 614px)';
 $--min-padding: '(max-width: 600px)';
 $--max-padding: '(min-width: 1260px)';
 
-$--tall-footer: '(min-height: 668px)';
-$--lt-tall-footer: '(max-height: 667px)';
-
-$--wide-footer: '(min-width: 421px)';
-$--lt-wide-footer: '(max-width: 420px)';
-
 $--spacious-page-header: '(min-width: 850px)';
 $--lt-spacious-page-header: '(max-width: 849px)';