diff --git a/.changelog/10081.txt b/.changelog/10081.txt new file mode 100644 index 0000000000..6177d6c986 --- /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 0000000000..f6152df806 --- /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 825361cf32..d69f37a1e9 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 3916860abf..0987bfd6a5 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 c248b9cc18..aa474ee3c9 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 1fe3cc5096..22242ba502 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 8f797eda4a..2c42130f3c 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 88d989ad5f..5edde07b73 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 10fa4cecd6..a33eb3660e 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 6bc28f79b3..fa3c56b0c0 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 c764bf3621..0000000000 Binary files a/ui/packages/consul-ui/public/assets/mstile-144x144.png and /dev/null differ 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 fdb13a6371..0000000000 Binary files a/ui/packages/consul-ui/public/assets/mstile-150x150.png and /dev/null differ 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 41449a193c..0000000000 Binary files a/ui/packages/consul-ui/public/assets/mstile-310x150.png and /dev/null differ 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 74b7777804..0000000000 Binary files a/ui/packages/consul-ui/public/assets/mstile-310x310.png and /dev/null differ 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 481cae2e53..0000000000 Binary files a/ui/packages/consul-ui/public/assets/mstile-70x70.png and /dev/null differ 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 010e88a90d..0000000000 --- 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 - - - - - - - - - - - - -