From c7d9177775b6c692dee1043710b09e2778cb3322 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Thu, 17 Dec 2020 13:57:07 -0500
Subject: [PATCH] ui: Add Local flag to local dc in dropdown (#9419)

* Add Local flag to local dc in dropdown

* Remove brand color from the check

* Move styling to main-nav-horizonal styling sheets
---
 .../consul-ui/app/components/hashicorp-consul/index.hbs     | 5 ++++-
 .../app/styles/base/components/menu-panel/skin.scss         | 1 -
 .../app/styles/components/main-nav-horizontal/layout.scss   | 6 ++++++
 .../app/styles/components/main-nav-horizontal/skin.scss     | 5 +++++
 4 files changed, 15 insertions(+), 2 deletions(-)

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 0f5078c3c0..753db0dbb8 100644
--- a/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
+++ b/ui/packages/consul-ui/app/components/hashicorp-consul/index.hbs
@@ -94,7 +94,10 @@
                                 @href={{href-mut (hash dc=item.Name)}}
                               >
                                 <BlockSlot @name="label">
-                                  {{item.Name}}
+                                  <span>{{item.Name}}</span>
+                                {{#if item.Local}}
+                                  <span>Local</span>
+                                {{/if}}
                                 </BlockSlot>
                               </MenuItem>
                             {{/each}}
diff --git a/ui/packages/consul-ui/app/styles/base/components/menu-panel/skin.scss b/ui/packages/consul-ui/app/styles/base/components/menu-panel/skin.scss
index 784df4f446..de06dbcad7 100644
--- a/ui/packages/consul-ui/app/styles/base/components/menu-panel/skin.scss
+++ b/ui/packages/consul-ui/app/styles/base/components/menu-panel/skin.scss
@@ -31,5 +31,4 @@
 }
 %menu-panel .is-active > *::after {
   @extend %with-check-plain-mask, %as-pseudo;
-  background-color: var(--swatch-brand-600, $black);
 }
diff --git a/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/layout.scss b/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/layout.scss
index 534ad871ed..32785cd153 100644
--- a/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/layout.scss
+++ b/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/layout.scss
@@ -17,6 +17,12 @@
 %main-nav-horizontal .popover-menu > label > button::after {
   top: 2px;
 }
+%main-nav-horizontal .is-local [role='menuitem'] {
+  display: inline-block;
+}
+%main-nav-horizontal .is-local [role='menuitem']:after {
+  display: inline-flex !important;
+}
 @media #{$--horizontal-nav} {
   %main-nav-horizontal > ul,
   %main-nav-horizontal-panel {
diff --git a/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/skin.scss b/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/skin.scss
index 3cc1575392..d498746148 100644
--- a/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/skin.scss
+++ b/ui/packages/consul-ui/app/styles/components/main-nav-horizontal/skin.scss
@@ -36,3 +36,8 @@
   }
 }
 /**/
+/* nav dropdown */
+%main-nav-horizontal .is-local span:nth-child(2) {
+  @extend %pill-200, %frame-gray-600;
+}
+/**/