From 0e9d4ceb0fc80d23ed0c0794ed3b0ab71c36aaac Mon Sep 17 00:00:00 2001 From: Hector Simpson Date: Mon, 3 May 2021 16:19:09 +0100 Subject: [PATCH] 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 | 3 + .../app/components/consul/logo/index.hbs | 4 ++ .../app/components/hashicorp-consul/index.hbs | 7 +-- .../app/styles/base/icons/base-variables.scss | 2 +- .../app/styles/components/brand-loader.scss | 4 +- .../components/brand-loader/layout.scss | 13 ++-- ui/packages/consul-ui/app/styles/debug.scss | 7 +++ .../consul-ui/app/styles/variables/skin.scss | 2 +- .../lib/startup/templates/body.html.js | 20 ++++-- .../lib/startup/templates/head.html.js | 5 +- .../public/assets/android-chrome-192x192.png | 3 - .../public/assets/android-chrome-512x512.png | 3 - .../assets/apple-touch-icon-114x114.png | 3 - .../assets/apple-touch-icon-120x120.png | 3 - .../assets/apple-touch-icon-144x144.png | 3 - .../assets/apple-touch-icon-152x152.png | 3 - .../public/assets/apple-touch-icon-57x57.png | 3 - .../public/assets/apple-touch-icon-60x60.png | 3 - .../public/assets/apple-touch-icon-72x72.png | 3 - .../public/assets/apple-touch-icon-76x76.png | 3 - .../public/assets/apple-touch-icon.png | 4 +- .../consul-ui/public/assets/consul-logo.png | 3 - .../consul-ui/public/assets/favicon-128.png | 3 - .../consul-ui/public/assets/favicon-16x16.png | 3 - .../public/assets/favicon-196x196.png | 3 - .../consul-ui/public/assets/favicon-32x32.png | 3 - .../consul-ui/public/assets/favicon-96x96.png | 3 - .../consul-ui/public/assets/favicon.ico | 4 +- .../consul-ui/public/assets/favicon.png | 3 - .../consul-ui/public/assets/favicon.svg | 7 +++ .../public/assets/mstile-144x144.png | 3 - .../public/assets/mstile-150x150.png | 3 - .../public/assets/mstile-310x150.png | 3 - .../public/assets/mstile-310x310.png | 3 - .../consul-ui/public/assets/mstile-70x70.png | 3 - .../public/assets/safari-pinned-tab.svg | 61 ------------------- 36 files changed, 53 insertions(+), 156 deletions(-) create mode 100644 .changelog/10081.txt create mode 100644 ui/packages/consul-ui/app/components/consul/logo/index.hbs delete mode 100644 ui/packages/consul-ui/public/assets/android-chrome-192x192.png delete mode 100644 ui/packages/consul-ui/public/assets/android-chrome-512x512.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-114x114.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-120x120.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-144x144.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-152x152.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-57x57.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-60x60.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-72x72.png delete mode 100644 ui/packages/consul-ui/public/assets/apple-touch-icon-76x76.png delete mode 100644 ui/packages/consul-ui/public/assets/consul-logo.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon-128.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon-16x16.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon-196x196.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon-32x32.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon-96x96.png delete mode 100644 ui/packages/consul-ui/public/assets/favicon.png create mode 100644 ui/packages/consul-ui/public/assets/favicon.svg delete mode 100644 ui/packages/consul-ui/public/assets/mstile-144x144.png delete mode 100644 ui/packages/consul-ui/public/assets/mstile-150x150.png delete mode 100644 ui/packages/consul-ui/public/assets/mstile-310x150.png delete mode 100644 ui/packages/consul-ui/public/assets/mstile-310x310.png delete mode 100644 ui/packages/consul-ui/public/assets/mstile-70x70.png delete mode 100644 ui/packages/consul-ui/public/assets/safari-pinned-tab.svg diff --git a/.changelog/10081.txt b/.changelog/10081.txt new file mode 100644 index 000000000..6177d6c98 --- /dev/null +++ b/.changelog/10081.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: updates the ui with the new consul brand assets +``` diff --git a/ui/packages/consul-ui/app/components/consul/logo/index.hbs b/ui/packages/consul-ui/app/components/consul/logo/index.hbs new file mode 100644 index 000000000..f6152df80 --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/logo/index.hbs @@ -0,0 +1,4 @@ + + Consul + + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs index 825361cf3..d69f37a1e 100644 --- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs +++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs @@ -7,12 +7,7 @@ <:home-nav> - Consul - - - - + > <:main-nav> diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index 3916860ab..0987bfd6a 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -35,7 +35,7 @@ $clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,'); $code-svg: url('data:image/svg+xml;charset=UTF-8,'); -$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-action-svg: url('data:image/svg+xml;charset=UTF-8,'); $copy-success-svg: url('data:image/svg+xml;charset=UTF-8,'); $database-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader.scss b/ui/packages/consul-ui/app/styles/components/brand-loader.scss index c248b9cc1..aa474ee3c 100644 --- a/ui/packages/consul-ui/app/styles/components/brand-loader.scss +++ b/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; } diff --git a/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss b/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss index 1fe3cc509..22242ba50 100644 --- a/ui/packages/consul-ui/app/styles/components/brand-loader/layout.scss +++ b/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; } diff --git a/ui/packages/consul-ui/app/styles/debug.scss b/ui/packages/consul-ui/app/styles/debug.scss index 8f797eda4..2c42130f3 100644 --- a/ui/packages/consul-ui/app/styles/debug.scss +++ b/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; diff --git a/ui/packages/consul-ui/app/styles/variables/skin.scss b/ui/packages/consul-ui/app/styles/variables/skin.scss index 88d989ad5..5edde07b7 100644 --- a/ui/packages/consul-ui/app/styles/variables/skin.scss +++ b/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}; diff --git a/ui/packages/consul-ui/lib/startup/templates/body.html.js b/ui/packages/consul-ui/lib/startup/templates/body.html.js index 10fa4cecd..a33eb3660 100644 --- a/ui/packages/consul-ui/lib/startup/templates/body.html.js +++ b/ui/packages/consul-ui/lib/startup/templates/body.html.js @@ -9,11 +9,21 @@ module.exports = ({ appName, environment, rootURL, config }) => ` - ${ - config.CONSUL_BINARY_TYPE !== 'oss' && config.CONSUL_BINARY_TYPE !== '' - ? `` - : `` - } +
+ + + + ${ + config.CONSUL_BINARY_TYPE !== 'oss' && config.CONSUL_BINARY_TYPE !== '' + ? ` + + ` + : `` + } + +
diff --git a/ui/packages/consul-ui/lib/startup/templates/head.html.js b/ui/packages/consul-ui/lib/startup/templates/head.html.js index 6bc28f79b..fa3c56b0c 100644 --- a/ui/packages/consul-ui/lib/startup/templates/head.html.js +++ b/ui/packages/consul-ui/lib/startup/templates/head.html.js @@ -4,8 +4,9 @@ module.exports = ({ appName, environment, rootURL, config }) => ` - - + + + + + favicon + + + + \ No newline at end of file diff --git a/ui/packages/consul-ui/public/assets/mstile-144x144.png b/ui/packages/consul-ui/public/assets/mstile-144x144.png deleted file mode 100644 index 872b2bb81..000000000 --- a/ui/packages/consul-ui/public/assets/mstile-144x144.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:ffd97deabe0e5f980e4794e61d9b38a133e1721dc7f6ac87d3d84eff1b5e67ae -size 20027 diff --git a/ui/packages/consul-ui/public/assets/mstile-150x150.png b/ui/packages/consul-ui/public/assets/mstile-150x150.png deleted file mode 100644 index 6b05fac13..000000000 --- a/ui/packages/consul-ui/public/assets/mstile-150x150.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:7143fda5c67f714e2a2a1340d1fe0f0c4e5da277ec9e48b42273921b5bcb4b2a -size 64646 diff --git a/ui/packages/consul-ui/public/assets/mstile-310x150.png b/ui/packages/consul-ui/public/assets/mstile-310x150.png deleted file mode 100644 index 60d7e6a8d..000000000 --- a/ui/packages/consul-ui/public/assets/mstile-310x150.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:204e9e8223a44c27dbcf6a9cf229fabdbe51853f4053bf3af318eb68d30bede1 -size 112362 diff --git a/ui/packages/consul-ui/public/assets/mstile-310x310.png b/ui/packages/consul-ui/public/assets/mstile-310x310.png deleted file mode 100644 index 44b51c30b..000000000 --- a/ui/packages/consul-ui/public/assets/mstile-310x310.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:983cc6b1f554d40596d72836b95476a9e3dc517975d7cd35bf0a5a09b1c6c1b0 -size 201893 diff --git a/ui/packages/consul-ui/public/assets/mstile-70x70.png b/ui/packages/consul-ui/public/assets/mstile-70x70.png deleted file mode 100644 index 274058a14..000000000 --- a/ui/packages/consul-ui/public/assets/mstile-70x70.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d3a19ef133df54abd8a7d032eab67f4737bf545ce4c7a4fe79659e595db4c185 -size 11154 diff --git a/ui/packages/consul-ui/public/assets/safari-pinned-tab.svg b/ui/packages/consul-ui/public/assets/safari-pinned-tab.svg deleted file mode 100644 index 010e88a90..000000000 --- a/ui/packages/consul-ui/public/assets/safari-pinned-tab.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - - -Created by potrace 1.11, written by Peter Selinger 2001-2013 - - - - - - - - - - - - -