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

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

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

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 {

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;
+}
+/**/