Update brand assets (1.9.x) (#10090)

* 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

* Component for logo, update brand color

* Restore data-enterprise-logo attribute

.changelog/10090.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

@@ -1,6 +1,6 @@
     <ModalLayer />
     <header role="banner" data-test-navigation>
-      <a data-test-main-nav-logo href={{href-to 'index'}}><svg width="28" height="27" xmlns="http://www.w3.org/2000/svg"><title>Consul</title><path 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" fill="#FFF"/></svg></a>
+      <a data-test-main-nav-logo href={{href-to 'index'}}><Consul::Logo /></a>
         <input type="checkbox" name="menu" id="main-nav-toggle" onchange={{action 'change'}} />
         <label for="main-nav-toggle">
           Toggle Menu

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;
-}
-%brand-loader {
-  position: absolute;
-  top: 50%;
-  margin-top: -26px;
-  left: 50%;
-  margin-left: -84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
 }

ui/packages/consul-ui/app/styles/components/main-header-horizontal/layout.scss

@@ -14,6 +14,7 @@
   height: 48px;
 }
 %main-header-horizontal > a {
+  color: #fff;
   display: block;
   margin-right: 12px;
   line-height: 0;

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" type="image/png" href="${rootURL}assets/favicon-16x16.png" sizes="16x16">
+  <link rel="icon" href="${rootURL}assets/favicon.ico">
+  <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/${appName}.css">
   ${

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>