Update brand assets (#10081)

* Update header logo and inline icon

* Update full logos + layout on loading screen

* Update favicon assets and strategy
- Switches to serve an ico file alongside an SVG file
- Introduces an apple-touch-icon

* Removes unused favicon/meta assets

* Changelog item for ui

* Create component for logo

* Simplify logo component, set brand color

* Fix docs loading state CSS issue

.changelog/10081.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: updates the ui with the new consul brand assets
+```

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

@@ -7,12 +7,7 @@
     <:home-nav>
       <a
         href={{href-to 'index'}}
-      ><svg width="34" height="34" xmlns="http://www.w3.org/2000/svg">
+      ><Consul::Logo /></a>
-        <title>Consul</title>
-        <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"/>
-        <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>
 
     <:main-nav>

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

@@ -1,7 +1,7 @@
 @import './brand-loader/index';
-html body > svg {
+html body > .brand-loader {
   display: none;
 }
-html.ember-loading body > svg {
+html.ember-loading body > .brand-loader {
   @extend %brand-loader;
 }

ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss

@@ -1,10 +1,7 @@
 %brand-loader {
-  display: block;
+  display: flex;
-}
+  align-items: center;
-%brand-loader {
+  justify-content: center;
-  position: absolute;
+  width: 100vw;
-  top: 50%;
+  height: 100vh;
-  margin-top: -26px;
-  left: 50%;
-  margin-left: -84px;
 }

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

@@ -4,7 +4,14 @@
 // temporary component debugging setup
 @import 'consul-ui/components/main-nav-vertical/debug';
 
+.is-debug .brand-loader {
+  display: none !important;
+}
+
 .docs {
+  [role='banner'] nav:first-of-type {
+    height: calc(100vh - var(--chrome-height, 47px));
+  }
   .tabular-collection,
   .list-collection {
     height: 300px !important;

ui/packages/consul-ui/app/styles/variables/skin.scss

@@ -17,7 +17,7 @@
   // --brand-300: #{$magenta-300};
   // --brand-400: #{$magenta-400};
   // --brand-500: #{$magenta-500};
-  --brand-600: #{$magenta-600};
+  --brand-600: #e03875;
   // --brand-700: #{$magenta-700};
   --brand-800: #{$magenta-800};
   // --brand-900: #{$magenta-900};

ui/packages/consul-ui/lib/startup/templates/head.html.js

@@ -4,8 +4,9 @@
 
 module.exports = ({ appName, environment, rootURL, config }) => `
   <!-- CONSUL_VERSION: ${config.CONSUL_VERSION} -->
-  <link rel="icon" type="image/png" href="${rootURL}assets/favicon-32x32.png" sizes="32x32">
+  <link rel="icon" href="${rootURL}assets/favicon.ico">
-  <link rel="icon" type="image/png" href="${rootURL}assets/favicon-16x16.png" sizes="16x16">
+  <link rel="icon" href="${rootURL}assets/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="${rootURL}assets/apple-touch-icon.png">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/vendor.css">
   <link integrity="" rel="stylesheet" href="${rootURL}assets/${
   environment === 'development' ? 'debug' : appName

ui/packages/consul-ui/public/assets/safari-pinned-tab.svg

@@ -1,61 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,16.000000) scale(0.003030,-0.003030)"
-fill="#000000" stroke="none">
-<path d="M2457 5024 c-1 -1 -40 -5 -87 -8 -47 -3 -94 -8 -105 -10 -11 -2 -42
--7 -70 -10 -27 -4 -57 -9 -65 -11 -8 -2 -26 -6 -40 -9 -55 -9 -198 -46 -240
--61 -25 -9 -52 -18 -60 -20 -93 -21 -379 -160 -514 -249 -55 -36 -103 -66
--107 -66 -4 0 -9 -3 -11 -7 -1 -5 -37 -35 -78 -67 -100 -80 -239 -212 -307
--293 -10 -12 -26 -31 -36 -43 -158 -188 -314 -456 -399 -684 -31 -82 -85 -261
--94 -306 -2 -14 -9 -48 -15 -76 -19 -95 -18 -88 -36 -269 -12 -121 -6 -413 11
--505 3 -14 7 -42 10 -62 14 -93 19 -117 37 -188 11 -41 22 -83 24 -93 17 -73
-92 -270 148 -387 228 -480 596 -855 1069 -1091 83 -42 135 -66 158 -74 3 -1
-14 -5 25 -10 57 -24 122 -47 136 -50 9 -2 38 -11 65 -20 56 -19 245 -61 319
--71 28 -3 58 -8 68 -10 139 -26 479 -20 667 11 14 3 40 7 59 10 18 3 52 10 75
-16 22 6 50 13 61 15 44 8 112 27 142 40 17 8 37 14 43 14 7 0 54 16 104 36
-196 79 367 173 548 302 l48 34 -62 81 c-34 45 -66 83 -70 85 -4 2 -8 8 -8 12
-0 11 -139 194 -150 198 -7 3 -69 -39 -117 -78 -7 -6 -15 -10 -19 -10 -4 0 -15
--6 -23 -14 -30 -27 -318 -168 -351 -171 -3 -1 -34 -10 -70 -22 -120 -40 -205
--58 -379 -79 -112 -14 -364 -8 -486 12 -16 2 -39 6 -50 8 -11 2 -33 6 -50 10
--16 3 -39 8 -50 10 -11 2 -40 10 -65 17 -25 7 -51 13 -57 15 -15 3 -144 51
--193 73 -19 8 -37 15 -40 16 -14 3 -143 73 -200 108 -349 217 -605 522 -773
-922 -40 94 -86 264 -112 410 -30 173 -23 472 16 665 102 507 408 951 851 1233
-111 70 359 187 399 187 8 0 19 3 23 8 4 4 12 8 17 8 5 1 10 2 12 4 5 4 184 47
-227 54 19 3 46 8 60 11 105 21 409 22 530 1 14 -3 43 -7 65 -11 64 -9 201 -43
-240 -59 19 -8 35 -13 35 -11 0 2 44 -14 97 -36 125 -51 266 -126 372 -199 l85
--58 104 136 c138 182 144 189 169 219 l22 26 -37 30 c-20 16 -46 34 -57 39
--11 6 -22 14 -25 18 -3 3 -23 17 -45 30 -22 13 -42 26 -45 29 -10 12 -224 121
--310 159 -59 26 -283 102 -318 108 -15 3 -40 9 -57 14 -37 11 -184 37 -245 44
--146 15 -196 19 -298 20 -62 1 -114 1 -115 0z"/>
-<path d="M4476 3999 c-99 -23 -173 -116 -177 -224 -5 -127 109 -240 236 -236
-96 4 163 46 206 130 89 173 -72 373 -265 330z"/>
-<path d="M4808 3267 c-27 -5 -48 -13 -48 -18 0 -5 -6 -9 -14 -9 -24 0 -94 -86
--106 -131 -13 -46 -9 -118 8 -160 17 -41 71 -98 116 -121 44 -23 133 -28 176
--11 14 6 28 10 32 9 14 -2 80 70 100 109 15 28 21 58 20 100 -1 86 -2 89 -41
-141 -59 79 -147 111 -243 91z"/>
-<path d="M4198 3265 c-2 -2 -19 -5 -38 -7 -197 -23 -274 -269 -127 -409 44
--43 92 -61 159 -61 114 0 206 73 229 182 28 133 -47 252 -183 288 -20 6 -38 9
--40 7z"/>
-<path d="M2479 3156 c-2 -2 -21 -6 -43 -9 -21 -3 -73 -22 -115 -43 -177 -87
--284 -267 -276 -466 4 -103 7 -120 34 -187 109 -272 437 -393 703 -260 171 85
-281 260 280 447 -1 143 -32 231 -122 348 -24 31 -112 99 -150 117 -47 21 -90
-38 -115 44 -26 6 -191 14 -196 9z"/>
-<path d="M3500 2882 c-125 -41 -194 -134 -185 -251 15 -199 255 -293 400 -156
-91 86 99 212 20 327 -17 24 -78 65 -110 73 -38 10 -105 14 -125 7z"/>
-<path d="M4781 2477 c-49 -16 -124 -95 -140 -147 -26 -87 -4 -175 59 -239 49
--48 96 -66 172 -65 59 0 73 5 116 33 72 50 117 132 114 209 -3 74 -66 164
--142 201 -42 20 -131 24 -179 8z"/>
-<path d="M4130 2473 c-120 -44 -182 -130 -175 -244 3 -61 26 -109 72 -153 122
--118 318 -72 381 89 21 53 22 120 4 166 -16 41 -71 98 -115 121 -39 20 -137
-32 -167 21z"/>
-<path d="M4451 1729 c-46 -14 -127 -97 -140 -145 -46 -167 72 -320 238 -308
-161 12 263 186 195 330 -20 42 -82 103 -121 119 -36 15 -128 17 -172 4z"/>
-</g>
-</svg>