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
This commit is contained in:
Hector Simpson 2021-05-03 16:19:09 +01:00 committed by GitHub
parent 2558197260
commit 0e9d4ceb0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
36 changed files with 53 additions and 156 deletions

3
.changelog/10081.txt Normal file
View File

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;

View File

@ -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};

File diff suppressed because one or more lines are too long

View File

@ -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/${
environment === 'development' ? 'debug' : appName

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -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>

Before

Width:  |  Height:  |  Size: 3.7 KiB