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 @@
+
\ 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>
+ >
<: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 }) => `
-
+
+
+
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 }) => `
-
-
+
+
+
+
\ 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 @@
-
-
-