From d8fb480ca11d220e2f153dbc198f35dcad9b96e1 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 22 Sep 2020 18:20:44 +0100
Subject: [PATCH] ui: Various CSS amends (#8708)

* ui: Various CSS amends

1. Split out %icon-definition from %composite-row
2. Add hover effect to node listing
3. Fix up proxy level list components
4. Rename our various pills to use a 100-900 scale
5. Reogranize other icon related things (consul-kind and
consul-external-source)

* Fix up upstream test
---
 .../consul-exposed-path-list/index.hbs        |   4 +-
 .../consul-external-source/index.hbs          |  26 ++---
 ui-v2/app/components/consul-kind/index.hbs    |  14 +--
 .../consul-service-instance-list/index.hbs    |   9 +-
 .../consul-upstream-instance-list/index.hbs   |   4 +-
 .../styles/base/components/pill/layout.scss   |  45 +++-----
 .../app/styles/base/components/pill/skin.scss |  37 ------
 ui-v2/app/styles/components.scss              |   5 +-
 ui-v2/app/styles/components/app-view.scss     |  15 +--
 .../styles/components/app-view/layout.scss    |  10 +-
 .../app/styles/components/composite-row.scss  |  60 ++++++++++
 .../components/composite-row/index.scss       |  28 -----
 .../components/composite-row/layout.scss      |   9 ++
 .../styles/components/composite-row/skin.scss | 107 ------------------
 .../consul-intention-list/index.scss          |   9 +-
 .../index.scss                                |   7 +-
 .../components/discovery-chain/skin.scss      |   2 +-
 ui-v2/app/styles/components/filter-bar.scss   |  23 ----
 .../styles/components/icon-definition.scss    |  64 +++++++++++
 .../components/icon-definition/index.scss     |   2 +
 .../components/icon-definition/layout.scss    |  18 +++
 .../components/icon-definition/skin.scss      |   2 +
 ui-v2/app/styles/components/list-row.scss     |   4 -
 .../app/styles/components/list-row/index.scss |   6 +
 .../styles/components/list-row/layout.scss    |  34 ++----
 .../app/styles/components/list-row/skin.scss  |   7 ++
 ui-v2/app/styles/components/modal-dialog.scss |   6 +
 ui-v2/app/styles/components/pill.scss         |  93 +++++++++------
 ui-v2/app/styles/components/table.scss        |  13 ---
 .../components/tooltip-panel/layout.scss      |  16 +--
 .../styles/components/tooltip-panel/skin.scss |   3 +
 ui-v2/app/styles/components/tooltip.scss      |   5 -
 ui-v2/app/styles/routes.scss                  |   2 -
 ui-v2/app/styles/routes/dc/acls/index.scss    |  15 ++-
 .../styles/routes/dc/acls/tokens/index.scss   |  12 --
 .../app/styles/routes/dc/intention/index.scss |   0
 ui-v2/app/styles/routes/dc/nodes/index.scss   |  18 ---
 .../app/styles/routes/dc/services/index.scss  |  15 ++-
 ui-v2/app/styles/typography.scss              |   1 -
 .../templates/dc/services/show/upstreams.hbs  |   3 +-
 ui-v2/tests/pages/dc/services/show.js         |   2 +-
 41 files changed, 331 insertions(+), 424 deletions(-)
 create mode 100644 ui-v2/app/styles/components/icon-definition.scss
 create mode 100644 ui-v2/app/styles/components/icon-definition/index.scss
 create mode 100644 ui-v2/app/styles/components/icon-definition/layout.scss
 create mode 100644 ui-v2/app/styles/components/icon-definition/skin.scss
 delete mode 100644 ui-v2/app/styles/components/list-row.scss
 delete mode 100644 ui-v2/app/styles/routes/dc/acls/tokens/index.scss
 delete mode 100644 ui-v2/app/styles/routes/dc/intention/index.scss

diff --git a/ui-v2/app/components/consul-exposed-path-list/index.hbs b/ui-v2/app/components/consul-exposed-path-list/index.hbs
index 72d085db6..19c102e87 100644
--- a/ui-v2/app/components/consul-exposed-path-list/index.hbs
+++ b/ui-v2/app/components/consul-exposed-path-list/index.hbs
@@ -1,7 +1,7 @@
 <ul data-test-proxy-exposed-paths>
 {{#each items as |path|}}
   <li>
-    <div>
+    <div class="header">
     {{#let (concat address ':' path.Path) as |combinedAddress|}}
       <p class="combined-address">
         <span>
@@ -14,7 +14,7 @@
       </p>
     {{/let}}
     </div>
-    <div>
+    <div class="detail">
     {{#if path.Protocol}}
       <dl class="protocol">
         <dt>
diff --git a/ui-v2/app/components/consul-external-source/index.hbs b/ui-v2/app/components/consul-external-source/index.hbs
index cfa37d491..bb1a46f18 100644
--- a/ui-v2/app/components/consul-external-source/index.hbs
+++ b/ui-v2/app/components/consul-external-source/index.hbs
@@ -1,23 +1,17 @@
 {{#if item}}
-  {{#let (if _externalSource _externalSource (service/external-source item)) as |externalSource|}}
+  {{#let (service/external-source item) as |externalSource|}}
     {{#if externalSource}}
-      {{#if (has-block)}}
-        {{yield
-          (component 'consul-external-source' item=item _externalSource=externalSource)
-        }}
-      {{else}}
-        <span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
-          {{#if label}}
-            {{label}}
+      <span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
+        {{#if label}}
+          {{label}}
+        {{else}}
+          {{#if (eq externalSource 'aws')}}
+            Registered via {{uppercase externalSource}}
           {{else}}
-            {{#if (eq externalSource 'aws')}}
-              <span>Registered via {{uppercase externalSource}}</span>
-            {{else}}
-              <span>Registered via {{capitalize externalSource}}</span>
-            {{/if}}
+            Registered via {{capitalize externalSource}}
           {{/if}}
-        </span>
-      {{/if}}
+        {{/if}}
+      </span>
     {{/if}}
   {{/let}}
 {{/if}}
diff --git a/ui-v2/app/components/consul-kind/index.hbs b/ui-v2/app/components/consul-kind/index.hbs
index 884d22d39..e5bfc6d44 100644
--- a/ui-v2/app/components/consul-kind/index.hbs
+++ b/ui-v2/app/components/consul-kind/index.hbs
@@ -1,15 +1,10 @@
 {{#if item.Kind}}
   {{#let (titleize (humanize item.Kind)) as |Name|}}
-    {{#if (has-block)}}
-      {{yield
-        (component 'consul-kind' item=item withInfo=withInfo)
-      }}
-    {{else}}
     {{#if withInfo}}
         <dl class="tooltip-panel">
           <dt>
-            <span data-test-kind={{item.Kind}} class="consul-kind gateway">
-                <span>{{Name}}</span>
+            <span data-test-kind={{item.Kind}} class="consul-kind">
+              {{Name}}
             </span>
           </dt>
           <dd>
@@ -86,10 +81,9 @@
           </dd>
         </dl>
       {{else}}
-          <span data-test-kind={{item.Kind}} class="consul-kind gateway">
-              <span>{{Name}}</span>
+          <span data-test-kind={{item.Kind}} class="consul-kind">
+            {{Name}}
           </span>
       {{/if}}
-    {{/if}}
   {{/let}}
 {{/if}}
diff --git a/ui-v2/app/components/consul-service-instance-list/index.hbs b/ui-v2/app/components/consul-service-instance-list/index.hbs
index b6ab32f5c..0785f3f6d 100644
--- a/ui-v2/app/components/consul-service-instance-list/index.hbs
+++ b/ui-v2/app/components/consul-service-instance-list/index.hbs
@@ -61,14 +61,17 @@
       </dl>
 {{/if}}
 {{#if (and checks item.Port)}}
-      <dl>
+      <dl class="port">
         <dt>
+          Port
+        </dt>
+        <dd data-test-service-port={{item.Port}}>
           <CopyButton
             @value={{item.Port}}
             @name="Port"
           />
-        </dt>
-        <dd data-test-service-port={{item.Port}}>:{{item.Port}}</dd>
+          :{{item.Port}}
+        </dd>
       </dl>
 {{/if}}
 {{#if checks}}
diff --git a/ui-v2/app/components/consul-upstream-instance-list/index.hbs b/ui-v2/app/components/consul-upstream-instance-list/index.hbs
index 99a6c6868..a72bd79c0 100644
--- a/ui-v2/app/components/consul-upstream-instance-list/index.hbs
+++ b/ui-v2/app/components/consul-upstream-instance-list/index.hbs
@@ -1,12 +1,12 @@
 <ul data-test-proxy-upstreams>
 {{#each items as |item|}}
   <li>
-    <div>
+    <div class="header">
       <p data-test-destination-name>
         {{item.DestinationName}}
       </p>
     </div>
-    <div>
+    <div class="detail">
   {{#if (env 'CONSUL_NSPACES_ENABLED')}}
     {{#if (not-eq item.DestinationType 'prepared_query')}}
       <dl class="nspace">
diff --git a/ui-v2/app/styles/base/components/pill/layout.scss b/ui-v2/app/styles/base/components/pill/layout.scss
index 4133d21ce..e38eb941b 100644
--- a/ui-v2/app/styles/base/components/pill/layout.scss
+++ b/ui-v2/app/styles/base/components/pill/layout.scss
@@ -1,40 +1,23 @@
 %pill {
   display: inline-flex;
-  align-items: center;
-  padding: 1px 5px;
   position: relative;
+  align-items: center;
+  white-space: nowrap;
 }
-%pill button {
-  padding: 0;
-  width: 9px;
-  height: 9px;
+%pill::before {
   margin-right: 4px;
-  font-size: 0;
+  font-size: 0.8em;
 }
-%increased-pill {
+%pill-200 {
   @extend %pill;
-  padding: 5px 10px;
+  padding: 0 8px;
+}
+%pill-500 {
+  @extend %pill;
+  padding: 1px 5px;
+}
+%pill-700 {
+  @extend %pill;
+  padding: 4px 8px;
   min-width: 87px;
 }
-%reduced-pill {
-  background-color: $gray-100;
-  padding: 0 8px;
-  border-radius: $decor-radius-100;
-  display: inline-block;
-}
-%reduced-pill > span {
-  font-size: 14px;
-  font-weight: normal;
-  position: relative;
-  color: $gray-500;
-}
-%reduced-pill::before {
-  width: 14px;
-  height: 14px;
-  margin-right: 2px;
-  margin-top: 1px;
-  position: relative;
-}
-%reduced-pill.leader::before {
-  margin-right: 4px;
-}
diff --git a/ui-v2/app/styles/base/components/pill/skin.scss b/ui-v2/app/styles/base/components/pill/skin.scss
index 2ba8e1ff9..5b53403b4 100644
--- a/ui-v2/app/styles/base/components/pill/skin.scss
+++ b/ui-v2/app/styles/base/components/pill/skin.scss
@@ -1,40 +1,3 @@
 %pill {
   border-radius: $decor-radius-100;
 }
-%pill button {
-  background-color: $transparent;
-  /* font-size: 0; */
-  cursor: pointer;
-}
-%pill button::before {
-  @extend %with-cancel-plain-icon;
-  @extend %as-pseudo;
-  width: 10px;
-  height: 10px;
-}
-%reduced-pill::before {
-  @extend %as-pseudo;
-}
-%reduced-pill.kubernetes::before {
-  @extend %with-kubernetes-logo-color-icon;
-}
-%reduced-pill.terraform::before {
-  @extend %with-terraform-logo-color-icon;
-}
-%reduced-pill.nomad::before {
-  @extend %with-nomad-logo-color-icon;
-}
-%reduced-pill.consul::before {
-  @extend %with-consul-logo-color-icon;
-}
-%reduced-pill.aws::before {
-  @extend %with-logo-aws-color-icon;
-}
-%reduced-pill.gateway::before {
-  @extend %with-gateway-mask;
-  background-color: $gray-500;
-}
-%reduced-pill.leader::before {
-  @extend %with-star-outline-mask;
-  background-color: $gray-500;
-}
diff --git a/ui-v2/app/styles/components.scss b/ui-v2/app/styles/components.scss
index 9bcb8c879..fb2b3d5d0 100644
--- a/ui-v2/app/styles/components.scss
+++ b/ui-v2/app/styles/components.scss
@@ -3,12 +3,15 @@
 /**/
 
 @import './components/card/index';
+@import './components/list-row/index';
+@import './components/expanded-single-select/index';
+
+@import './components/icon-definition';
 @import './components/form-elements';
 @import './components/breadcrumbs';
 @import './components/anchors';
 @import './components/progress';
 @import './components/buttons';
-@import './components/list-row';
 @import './components/composite-row';
 @import './components/secret-button';
 @import './components/tabs';
diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss
index 4f605fb17..28541712b 100644
--- a/ui-v2/app/styles/components/app-view.scss
+++ b/ui-v2/app/styles/components/app-view.scss
@@ -1,19 +1,13 @@
 @import './app-view/index';
 
+main {
+  @extend %app-view;
+}
 %app-view-actions label + div {
   /* We need this extra to allow tooltips to show */
   overflow: visible !important;
 }
 
-main {
-  @extend %app-view;
-}
-%app-view > div > header {
-  @extend %app-view-header;
-}
-%app-view > div > div {
-  @extend %app-view-content;
-}
 %app-view > div.unauthorized,
 %app-view > div.error {
   @extend %app-view-error;
@@ -25,9 +19,6 @@ main {
 %app-view-actions button {
   @extend %button-compact;
 }
-%app-view-content div > dl {
-  @extend %form-row;
-}
 [role='tabpanel'] > p:only-child,
 %app-view-content > p:only-child {
   @extend %app-view-content-empty;
diff --git a/ui-v2/app/styles/components/app-view/layout.scss b/ui-v2/app/styles/components/app-view/layout.scss
index 3e1a50714..898ec8310 100644
--- a/ui-v2/app/styles/components/app-view/layout.scss
+++ b/ui-v2/app/styles/components/app-view/layout.scss
@@ -7,16 +7,13 @@
   align-items: center;
   white-space: nowrap;
   position: relative;
-  z-index: 1;
+  z-index: 4;
 }
 %app-view-actions {
   margin-left: auto;
   display: flex;
   align-items: flex-start;
 }
-%app-view-header dl {
-  float: left;
-}
 /* units */
 %app-view {
   margin-top: 50px;
@@ -37,11 +34,6 @@
 %app-view-actions > *:not(:last-child) {
   margin-right: 12px;
 }
-%app-view-header dl {
-  margin-top: 19px;
-  margin-bottom: 23px;
-  margin-right: 50px;
-}
 
 /* content */
 %app-view-content h2 {
diff --git a/ui-v2/app/styles/components/composite-row.scss b/ui-v2/app/styles/components/composite-row.scss
index 0b5d9b155..bed4365d9 100644
--- a/ui-v2/app/styles/components/composite-row.scss
+++ b/ui-v2/app/styles/components/composite-row.scss
@@ -8,6 +8,7 @@
 /* hoverable rows */
 %composite-row.linkable,
 .consul-service-instance-list > ul > li:not(:first-child),
+.consul-node-list > ul > li:not(:first-child),
 .consul-token-list > ul > li:not(:first-child),
 .consul-policy-list > ul > li:not(:first-child),
 .consul-role-list > ul > li:not(:first-child) {
@@ -29,8 +30,67 @@
 .consul-service-list li > div:first-child > dl:first-child dd {
   margin-top: 1px;
 }
+.consul-service-list .detail,
+.consul-service-instance-list .detail {
+  overflow-x: visible !important;
+}
 .consul-intention-permission-list > ul,
 .proxy-exposed-paths > ul,
 .proxy-upstreams > ul {
   border-top: 1px solid $gray-200;
 }
+.consul-service-instance-list .port dt,
+.consul-service-instance-list .port dt::before {
+  display: none;
+}
+.consul-service-instance-list .port .copy-button {
+  margin-right: 0;
+}
+// Copy Button
+%composite-row .copy-button {
+  display: inline-flex;
+}
+%composite-row-header .copy-button {
+  margin-left: 4px;
+}
+%composite-row-detail .copy-button {
+  margin-right: 4px;
+  margin-top: 2px;
+}
+%composite-row .copy-button button {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+/* buttons need to be displayed in order for the tooltip */
+/* to track them */
+%composite-row-header .copy-button button {
+  opacity: 0;
+}
+%composite-row-header:hover .copy-button button {
+  opacity: 1;
+}
+%composite-row .copy-button button:hover {
+  background-color: transparent !important;
+}
+
+%composite-row-detail > .consul-kind:first-child,
+%composite-row-detail > .consul-external-source:first-child {
+  margin-left: -5px;
+}
+
+%composite-row-detail .policy::before {
+  @extend %with-file-fill-mask, %as-pseudo;
+  margin-right: 3px;
+}
+%composite-row-detail .role::before {
+  @extend %with-user-plain-mask, %as-pseudo;
+  margin-right: 3px;
+}
+%composite-row-detail .policy-management::before {
+  margin-right: 3px;
+}
+%composite-row-header .policy-management dd::before,
+%composite-row-detail .policy-management::before {
+  @extend %with-star-fill-mask, %as-pseudo;
+  background-color: var(--brand-600);
+}
diff --git a/ui-v2/app/styles/components/composite-row/index.scss b/ui-v2/app/styles/components/composite-row/index.scss
index cb2246723..763357c31 100644
--- a/ui-v2/app/styles/components/composite-row/index.scss
+++ b/ui-v2/app/styles/components/composite-row/index.scss
@@ -17,31 +17,3 @@
 %with-composite-row-intent:active {
   @extend %list-row-intent;
 }
-%list-row-header > dl:first-child {
-  @extend %list-row-header-icon;
-}
-
-// TODO: %defined-by-icon
-// Copy Button
-%composite-row .copy-button {
-  display: inline-flex;
-}
-%composite-row .copy-button button {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-%composite-row-detail .copy-button {
-  margin-right: 4px;
-  margin-top: 2px;
-}
-%composite-row-header .copy-button {
-  margin-left: 4px;
-}
-/* buttons need to be displayed in order for the tooltip */
-/* to track them */
-%composite-row-header .copy-button button {
-  opacity: 0;
-}
-%composite-row-header:hover .copy-button button {
-  opacity: 1;
-}
diff --git a/ui-v2/app/styles/components/composite-row/layout.scss b/ui-v2/app/styles/components/composite-row/layout.scss
index e865385f4..ee66dd5bd 100644
--- a/ui-v2/app/styles/components/composite-row/layout.scss
+++ b/ui-v2/app/styles/components/composite-row/layout.scss
@@ -25,3 +25,12 @@
   justify-self: center;
   align-self: center;
 }
+
+%composite-row-header:nth-last-child(2) {
+  grid-column-start: header;
+  grid-column-end: actions;
+}
+%composite-row-detail:last-child {
+  grid-column-start: detail;
+  grid-column-end: actions;
+}
diff --git a/ui-v2/app/styles/components/composite-row/skin.scss b/ui-v2/app/styles/components/composite-row/skin.scss
index fef9fc925..e69de29bb 100644
--- a/ui-v2/app/styles/components/composite-row/skin.scss
+++ b/ui-v2/app/styles/components/composite-row/skin.scss
@@ -1,107 +0,0 @@
-// TODO: %defined-by-icon
-
-%composite-row-detail .policy::before {
-  @extend %with-file-fill-mask, %as-pseudo;
-  background-color: $gray-500;
-  margin-right: 3px;
-}
-%composite-row-detail .role::before {
-  @extend %with-user-plain-mask, %as-pseudo;
-  background-color: $gray-500;
-  margin-right: 3px;
-}
-%composite-row-detail .policy-management::before {
-  margin-right: 3px;
-}
-%composite-row-detail .policy-management::before,
-%composite-row-header .policy-management dd::before {
-  @extend %with-star-fill-mask, %as-pseudo;
-  background-color: var(--brand-600);
-}
-// Health Checks
-%composite-row-detail dl.passing dt::before,
-%composite-row-header .passing dd::before {
-  @extend %with-check-circle-fill-color-mask, %as-pseudo;
-  background-color: $green-500;
-}
-%composite-row-detail dl.warning dt::before,
-%composite-row-header .warning dd::before {
-  @extend %with-alert-triangle-color-mask, %as-pseudo;
-  background-color: $orange-500;
-}
-%composite-row-detail dl.critical dt::before,
-%composite-row-header .critical dd::before {
-  @extend %with-cancel-square-fill-color-mask, %as-pseudo;
-  background-color: $red-500;
-}
-%composite-row-detail dl.empty dt::before,
-%composite-row-header .empty dd::before {
-  @extend %with-minus-square-fill-color-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-
-%composite-row-header [rel='me'] dd::before {
-  @extend %with-check-circle-fill-mask, %as-pseudo;
-  background-color: $blue-500;
-}
-// Metadata
-%composite-row .node a {
-  color: $gray-500;
-}
-%composite-row .node a:hover {
-  color: $color-action;
-  text-decoration: underline;
-}
-%composite-row dl.node dt::before {
-  @extend %with-git-commit-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row dl.address dt::before {
-  @extend %with-public-default-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row dl.proxy dt::before {
-  @extend %with-swap-horizontal-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.nspace dt::before {
-  @extend %with-folder-outline-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.datacenter dt::before {
-  @extend %with-user-organization-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.path dt::before {
-  @extend %with-path-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.port dt::before {
-  @extend %with-port-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.protocol dt::before {
-  @extend %with-protocol-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.lock-delay dt::before {
-  @extend %with-delay-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.ttl dt::before {
-  @extend %with-history-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.behavior dt::before {
-  @extend %with-info-circle-outline-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-%composite-row-detail dl.checks dt::before {
-  @extend %with-health-mask, %as-pseudo;
-  background-color: $gray-500;
-}
-// In this case we do not need a background on the icon
-%composite-row .combined-address .copy-button button:hover,
-%composite-row-detail dt .copy-button button:hover {
-  background-color: transparent !important;
-}
diff --git a/ui-v2/app/styles/components/consul-intention-list/index.scss b/ui-v2/app/styles/components/consul-intention-list/index.scss
index 8192f54e8..d049a9e8f 100644
--- a/ui-v2/app/styles/components/consul-intention-list/index.scss
+++ b/ui-v2/app/styles/components/consul-intention-list/index.scss
@@ -5,12 +5,15 @@
 %consul-intention-list td.destination {
   @extend %tbody-th;
 }
+%consul-intention-list td strong {
+  @extend %pill-700;
+}
 %consul-intention-list td.intent-allow strong {
-  @extend %increased-pill, %pill-allow;
+  @extend %pill-allow;
 }
 %consul-intention-list td.intent-deny strong {
-  @extend %increased-pill, %pill-deny;
+  @extend %pill-deny;
 }
 %consul-intention-list td.intent-l7-rules strong {
-  @extend %increased-pill, %pill-l7;
+  @extend %pill-l7;
 }
diff --git a/ui-v2/app/styles/components/consul-intention-permission-list/index.scss b/ui-v2/app/styles/components/consul-intention-permission-list/index.scss
index 755ed8e6d..a46573bbd 100644
--- a/ui-v2/app/styles/components/consul-intention-permission-list/index.scss
+++ b/ui-v2/app/styles/components/consul-intention-permission-list/index.scss
@@ -3,9 +3,12 @@
 %consul-intention-permission-list > ul > li {
   @extend %list-row, %list-row-detail;
 }
+%consul-intention-permission-list strong {
+  @extend %pill-500;
+}
 %consul-intention-permission-list .intent-allow {
-  @extend %pill, %pill-allow;
+  @extend %pill-allow;
 }
 %consul-intention-permission-list .intent-deny {
-  @extend %pill, %pill-deny;
+  @extend %pill-deny;
 }
diff --git a/ui-v2/app/styles/components/discovery-chain/skin.scss b/ui-v2/app/styles/components/discovery-chain/skin.scss
index fdfcf93aa..5016e7182 100644
--- a/ui-v2/app/styles/components/discovery-chain/skin.scss
+++ b/ui-v2/app/styles/components/discovery-chain/skin.scss
@@ -8,7 +8,7 @@
   @extend %with-tooltip;
 }
 %route-card > header ul li {
-  @extend %pill, %frame-gray-900;
+  @extend %pill-500, %frame-gray-900;
 }
 %discovery-chain-tween {
   transition-duration: 0.1s;
diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss
index 935cfe6a6..f0b87006a 100644
--- a/ui-v2/app/styles/components/filter-bar.scss
+++ b/ui-v2/app/styles/components/filter-bar.scss
@@ -1,5 +1,4 @@
 @import './filter-bar/index';
-@import './expanded-single-select/index';
 .filter-bar {
   @extend %filter-bar;
 }
@@ -11,12 +10,6 @@
 %filter-bar [role='menuitem'] {
   justify-content: normal !important;
 }
-html.template-acl.template-list .filter-bar {
-  @extend %filter-bar-reversed;
-}
-html.template-acl.template-list .filter-bar [role='radiogroup'] {
-  @extend %expanded-single-select;
-}
 %filter-bar span::before {
   margin-right: 9px;
   opacity: 0.4;
@@ -27,19 +20,3 @@ html.template-acl.template-list .filter-bar [role='radiogroup'] {
   color: $blue-500;
   background-color: $gray-100;
 }
-
-%filter-bar .value-passing span::before {
-  @extend %with-check-circle-fill-icon, %as-pseudo;
-}
-%filter-bar .value-warning span::before {
-  @extend %with-alert-triangle-icon, %as-pseudo;
-}
-%filter-bar .value-critical span::before {
-  @extend %with-cancel-square-fill-icon, %as-pseudo;
-}
-%filter-bar .value-allow span::before {
-  @extend %with-arrow-right-icon, %as-pseudo;
-}
-%filter-bar .value-deny span::before {
-  @extend %with-deny-icon, %as-pseudo;
-}
diff --git a/ui-v2/app/styles/components/icon-definition.scss b/ui-v2/app/styles/components/icon-definition.scss
new file mode 100644
index 000000000..205c69ca3
--- /dev/null
+++ b/ui-v2/app/styles/components/icon-definition.scss
@@ -0,0 +1,64 @@
+@import './icon-definition/index';
+
+%icon-definition.passing dt::before,
+%composite-row-header .passing dd::before {
+  @extend %with-check-circle-fill-mask, %as-pseudo;
+  color: $green-500;
+}
+%icon-definition.warning dt::before,
+%composite-row-header .warning dd::before {
+  @extend %with-alert-triangle-mask, %as-pseudo;
+  color: $orange-500;
+}
+%icon-definition.critical dt::before,
+%composite-row-header .critical dd::before {
+  @extend %with-cancel-square-fill-mask, %as-pseudo;
+  color: $red-500;
+}
+%icon-definition.empty dt::before,
+%composite-row-header .empty dd::before {
+  @extend %with-minus-square-fill-mask, %as-pseudo;
+  color: $gray-500;
+}
+
+%composite-row-header [rel='me'] dd::before {
+  @extend %with-check-circle-fill-mask, %as-pseudo;
+  color: $blue-500;
+}
+
+%icon-definition.node dt::before {
+  @extend %with-git-commit-mask, %as-pseudo;
+}
+%icon-definition.address dt::before {
+  @extend %with-public-default-mask, %as-pseudo;
+}
+%icon-definition.proxy dt::before {
+  @extend %with-swap-horizontal-mask, %as-pseudo;
+}
+%icon-definition.nspace dt::before {
+  @extend %with-folder-outline-mask, %as-pseudo;
+}
+%icon-definition.datacenter dt::before {
+  @extend %with-user-organization-mask, %as-pseudo;
+}
+%icon-definition.path dt::before {
+  @extend %with-path-mask, %as-pseudo;
+}
+%icon-definition.port dt::before {
+  @extend %with-port-mask, %as-pseudo;
+}
+%icon-definition.protocol dt::before {
+  @extend %with-protocol-mask, %as-pseudo;
+}
+%icon-definition.lock-delay dt::before {
+  @extend %with-delay-mask, %as-pseudo;
+}
+%icon-definition.ttl dt::before {
+  @extend %with-history-mask, %as-pseudo;
+}
+%icon-definition.behavior dt::before {
+  @extend %with-info-circle-outline-mask, %as-pseudo;
+}
+%icon-definition.checks dt::before {
+  @extend %with-health-mask, %as-pseudo;
+}
diff --git a/ui-v2/app/styles/components/icon-definition/index.scss b/ui-v2/app/styles/components/icon-definition/index.scss
new file mode 100644
index 000000000..bc1825219
--- /dev/null
+++ b/ui-v2/app/styles/components/icon-definition/index.scss
@@ -0,0 +1,2 @@
+@import './skin';
+@import './layout';
diff --git a/ui-v2/app/styles/components/icon-definition/layout.scss b/ui-v2/app/styles/components/icon-definition/layout.scss
new file mode 100644
index 000000000..2bfc368a5
--- /dev/null
+++ b/ui-v2/app/styles/components/icon-definition/layout.scss
@@ -0,0 +1,18 @@
+%icon-definition {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+%icon-definition {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+%icon-definition > dt {
+  align-self: center;
+}
+%icon-definition > dt > * {
+  display: none;
+}
+%icon-definition > dd {
+  margin-left: 4px;
+  white-space: nowrap;
+}
diff --git a/ui-v2/app/styles/components/icon-definition/skin.scss b/ui-v2/app/styles/components/icon-definition/skin.scss
new file mode 100644
index 000000000..e449ba871
--- /dev/null
+++ b/ui-v2/app/styles/components/icon-definition/skin.scss
@@ -0,0 +1,2 @@
+%icon-definition {
+}
diff --git a/ui-v2/app/styles/components/list-row.scss b/ui-v2/app/styles/components/list-row.scss
deleted file mode 100644
index b9db58f16..000000000
--- a/ui-v2/app/styles/components/list-row.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import './list-row/index';
-.list-row {
-  @extend %list-row;
-}
diff --git a/ui-v2/app/styles/components/list-row/index.scss b/ui-v2/app/styles/components/list-row/index.scss
index bc1825219..38d905149 100644
--- a/ui-v2/app/styles/components/list-row/index.scss
+++ b/ui-v2/app/styles/components/list-row/index.scss
@@ -1,2 +1,8 @@
 @import './skin';
 @import './layout';
+%list-row-detail dl {
+  @extend %icon-definition;
+}
+%list-row-header > dl:first-child {
+  @extend %list-row-header-icon;
+}
diff --git a/ui-v2/app/styles/components/list-row/layout.scss b/ui-v2/app/styles/components/list-row/layout.scss
index 22df4a5ae..a11685a98 100644
--- a/ui-v2/app/styles/components/list-row/layout.scss
+++ b/ui-v2/app/styles/components/list-row/layout.scss
@@ -4,9 +4,15 @@
   /* whilst this isn't in the designs this makes our temporary rollover look better */
   padding-left: 12px;
 }
-%list-row dl {
-  margin: 0;
-  padding: 0;
+%list-row-detail,
+%list-row-header-icon {
+  margin-right: 6px;
+}
+%list-row-header dt {
+  display: none;
+}
+%list-row-header dd::before {
+  font-size: 0.9em;
 }
 %list-row-detail,
 %list-row-header {
@@ -14,11 +20,6 @@
   flex-wrap: nowrap;
   overflow-x: hidden;
 }
-%list-row-detail ul,
-%list-row-detail dl,
-%list-row-header dl {
-  display: inline-flex;
-}
 %list-row-header *,
 %list-row-detail * {
   white-space: nowrap;
@@ -29,20 +30,3 @@
 %list-row-detail > span {
   margin-right: 18px;
 }
-%list-row-detail dl.node dt::before {
-  margin-top: 3px;
-}
-%list-row-detail dl dt::before {
-  margin-right: 4px;
-  margin-top: 2px;
-}
-%list-row-header-icon {
-  margin-right: 6px;
-  margin-left: -2px;
-}
-%list-row-header dt {
-  display: none;
-}
-%list-row-header dd::before {
-  font-size: 0.9em;
-}
diff --git a/ui-v2/app/styles/components/list-row/skin.scss b/ui-v2/app/styles/components/list-row/skin.scss
index 38af5f0fd..9c79bafdc 100644
--- a/ui-v2/app/styles/components/list-row/skin.scss
+++ b/ui-v2/app/styles/components/list-row/skin.scss
@@ -21,3 +21,10 @@
 %list-row-detail {
   color: $gray-500;
 }
+%list-row-detail a {
+  color: inherit;
+}
+%list-row-detail a:hover {
+  color: $color-action;
+  text-decoration: underline;
+}
diff --git a/ui-v2/app/styles/components/modal-dialog.scss b/ui-v2/app/styles/components/modal-dialog.scss
index 25c2fc8fd..1fcb8c54f 100644
--- a/ui-v2/app/styles/components/modal-dialog.scss
+++ b/ui-v2/app/styles/components/modal-dialog.scss
@@ -10,3 +10,9 @@ html.template-with-modal {
 %modal-dialog table {
   min-height: 149px;
 }
+// TODO: float right here is too specific, this is currently used just for the role/policy selectors
+label.type-dialog {
+  @extend %anchor;
+  cursor: pointer;
+  float: right;
+}
diff --git a/ui-v2/app/styles/components/pill.scss b/ui-v2/app/styles/components/pill.scss
index 205ba65cb..d103eb89e 100644
--- a/ui-v2/app/styles/components/pill.scss
+++ b/ui-v2/app/styles/components/pill.scss
@@ -1,47 +1,15 @@
-%pill-allow:before,
-%pill-deny:before,
-%pill-l7:before {
-  @extend %as-pseudo;
-  margin-right: 5px;
-  font-size: 0.9em;
-}
-%pill-allow {
-  color: $green-800;
-  background-color: $green-100;
-}
-%pill-allow::before {
-  @extend %with-arrow-right-color-mask;
-}
-%pill-deny {
-  color: $red-800;
-  background-color: $red-100;
-}
-%pill-deny::before {
-  @extend %with-deny-color-mask;
-}
-%pill-l7 {
-  @extend %frame-gray-900;
-}
-%pill-l7::before {
-  @extend %with-layers-mask;
-}
-td strong {
-  @extend %pill, %frame-gray-900;
-  margin-right: 3px;
-}
-
 span.policy-service-identity,
 span.policy-node-identity,
 .consul-external-source,
 .consul-kind,
 .leader {
-  @extend %reduced-pill;
+  @extend %pill-200, %frame-gray-600;
 }
 span.policy-service-identity::before,
 span.policy-node-identity::before {
-  display: inline-block;
   width: auto;
-  vertical-align: baseline;
+  align-self: start;
+  font-size: inherit;
 }
 span.policy-node-identity::before {
   content: 'Node Identity: ';
@@ -49,3 +17,58 @@ span.policy-node-identity::before {
 span.policy-service-identity::before {
   content: 'Service Identity: ';
 }
+%pill.kubernetes::before {
+  @extend %with-kubernetes-logo-color-icon, %as-pseudo;
+}
+%pill.terraform::before {
+  @extend %with-terraform-logo-color-icon, %as-pseudo;
+}
+%pill.nomad::before {
+  @extend %with-nomad-logo-color-icon, %as-pseudo;
+}
+%pill.consul::before {
+  @extend %with-consul-logo-color-icon, %as-pseudo;
+}
+%pill.aws::before {
+  @extend %with-logo-aws-color-icon, %as-pseudo;
+}
+%pill.consul-kind::before {
+  @extend %with-gateway-mask, %as-pseudo;
+}
+%pill.leader::before {
+  @extend %with-star-outline-mask, %as-pseudo;
+}
+%pill-allow:before,
+%pill-deny:before,
+%pill-l7:before {
+  @extend %as-pseudo;
+  margin-right: 5px;
+  font-size: 0.9em;
+}
+%pill-allow,
+%pill-deny,
+%pill-l7 {
+  text-transform: capitalize;
+  font-weight: $typo-weight-normal;
+  font-size: $typo-size-600;
+}
+%pill-allow {
+  color: $green-800;
+  background-color: $green-100;
+}
+%pill-deny {
+  color: $red-800;
+  background-color: $red-100;
+}
+%pill-l7 {
+  @extend %frame-gray-900;
+}
+%pill-allow::before {
+  @extend %with-arrow-right-color-mask;
+}
+%pill-deny::before {
+  @extend %with-deny-color-mask;
+}
+%pill-l7::before {
+  @extend %with-layers-mask;
+}
diff --git a/ui-v2/app/styles/components/table.scss b/ui-v2/app/styles/components/table.scss
index 61ae76c4f..7133d95db 100644
--- a/ui-v2/app/styles/components/table.scss
+++ b/ui-v2/app/styles/components/table.scss
@@ -10,19 +10,6 @@
   right: 5px;
 }
 
-/*TODO: Rename this to %app-view-brand-icon or similar */
-%with-external-source-icon {
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 18px;
-  height: 18px;
-
-  --kubernetes-icon: #{$kubernetes-logo-color-svg};
-  --terraform-icon: #{$terraform-logo-color-svg};
-  --nomad-icon: #{$nomad-logo-color-svg};
-  --consul-icon: #{$consul-logo-color-svg};
-  --aws-icon: #{$aws-logo-color-svg};
-}
 table.consul-metadata-list tbody tr {
   cursor: default;
 }
diff --git a/ui-v2/app/styles/components/tooltip-panel/layout.scss b/ui-v2/app/styles/components/tooltip-panel/layout.scss
index eb80a7141..4fe7f6d77 100644
--- a/ui-v2/app/styles/components/tooltip-panel/layout.scss
+++ b/ui-v2/app/styles/components/tooltip-panel/layout.scss
@@ -1,16 +1,16 @@
-%tooltip-panel {
-  margin: 0 !important;
-}
-%tooltip-panel dd > div {
-  top: auto !important;
-  overflow: visible;
-}
+%tooltip-panel,
 %tooltip-panel dt {
-  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+}
+%tooltip-panel dd > div.menu-panel {
+  top: auto;
+  overflow: visible;
 }
 %tooltip-panel dd {
   display: none;
   position: relative;
+  z-index: 1;
   padding-top: 10px;
   margin-bottom: -10px;
 }
diff --git a/ui-v2/app/styles/components/tooltip-panel/skin.scss b/ui-v2/app/styles/components/tooltip-panel/skin.scss
index 746fb7f5d..3d112e4e5 100644
--- a/ui-v2/app/styles/components/tooltip-panel/skin.scss
+++ b/ui-v2/app/styles/components/tooltip-panel/skin.scss
@@ -1,3 +1,6 @@
+%tooltip-panel dt {
+  cursor: pointer;
+}
 /* This is the top chevron */
 %tooltip-panel dd > div::before {
   @extend %as-pseudo;
diff --git a/ui-v2/app/styles/components/tooltip.scss b/ui-v2/app/styles/components/tooltip.scss
index dc369de5b..485e8f9f5 100644
--- a/ui-v2/app/styles/components/tooltip.scss
+++ b/ui-v2/app/styles/components/tooltip.scss
@@ -1,8 +1,3 @@
-%app-view h1 span[data-tooltip] {
-  @extend %with-pseudo-tooltip;
-  text-indent: -9000px;
-  font-size: 0;
-}
 /* override structure min-width for the moment */
 /* TODO: Clarify whether these should actually use */
 /* the min-width from structure */
diff --git a/ui-v2/app/styles/routes.scss b/ui-v2/app/styles/routes.scss
index 31a81ff15..ec4b5b2e0 100644
--- a/ui-v2/app/styles/routes.scss
+++ b/ui-v2/app/styles/routes.scss
@@ -1,7 +1,5 @@
 @import 'routes/dc/settings/index';
 @import 'routes/dc/services/index';
 @import 'routes/dc/nodes/index';
-@import 'routes/dc/intention/index';
 @import 'routes/dc/kv/index';
 @import 'routes/dc/acls/index';
-@import 'routes/dc/acls/tokens/index';
diff --git a/ui-v2/app/styles/routes/dc/acls/index.scss b/ui-v2/app/styles/routes/dc/acls/index.scss
index 8219c401f..f2e039d8b 100644
--- a/ui-v2/app/styles/routes/dc/acls/index.scss
+++ b/ui-v2/app/styles/routes/dc/acls/index.scss
@@ -1,9 +1,12 @@
-td a.is-management::after {
-  @extend %with-star-fill-mask, %as-pseudo;
-  background-color: var(--swatch-brand-600, $black);
-  height: 16px;
-  top: 2px;
-  padding-left: 32px;
+html.template-acl.template-list main td strong {
+  @extend %pill-500, %frame-gray-900;
+  margin-right: 3px;
+}
+html.template-acl.template-list .filter-bar {
+  @extend %filter-bar-reversed;
+}
+html.template-acl.template-list .filter-bar [role='radiogroup'] {
+  @extend %expanded-single-select;
 }
 @media #{$--horizontal-tabs} {
   .template-policy.template-list main header .actions,
diff --git a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss b/ui-v2/app/styles/routes/dc/acls/tokens/index.scss
deleted file mode 100644
index 8a62e6027..000000000
--- a/ui-v2/app/styles/routes/dc/acls/tokens/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// TODO: Move this out of here and into probably modal
-.type-dialog {
-  @extend %anchor;
-  cursor: pointer;
-  float: right;
-}
-.template-token.template-edit main dd {
-  display: flex;
-}
-.template-token.template-edit main dl {
-  @extend %form-row;
-}
diff --git a/ui-v2/app/styles/routes/dc/intention/index.scss b/ui-v2/app/styles/routes/dc/intention/index.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss
index 443e9e847..58d89f088 100644
--- a/ui-v2/app/styles/routes/dc/nodes/index.scss
+++ b/ui-v2/app/styles/routes/dc/nodes/index.scss
@@ -1,21 +1,3 @@
-html.template-node.template-show .sessions td:last-child {
-  justify-content: flex-end;
-}
-html.template-node.template-show .sessions td:first-child {
-  @extend %tbody-th;
-}
-html.template-node.template-list .unhealthy h2 {
-  margin-bottom: 0.7em;
-}
 html.template-node.template-show #meta-data table tr {
   cursor: default;
 }
-html.template-node.template-show #services table tbody td em {
-  display: inline-block;
-}
-.healthy > div > ul > li {
-  padding-top: 16px;
-}
-.healthy h2 {
-  margin-bottom: 0em !important;
-}
diff --git a/ui-v2/app/styles/routes/dc/services/index.scss b/ui-v2/app/styles/routes/dc/services/index.scss
index e3f31746b..f444421e9 100644
--- a/ui-v2/app/styles/routes/dc/services/index.scss
+++ b/ui-v2/app/styles/routes/dc/services/index.scss
@@ -1,7 +1,10 @@
-@media #{$--horizontal-tabs} {
-  .template-service.template-show main header .actions {
-    position: relative;
-    top: 48px;
-    margin-top: 0;
-  }
+/* instance detail dl text*/
+html.template-instance.template-show .app-view > header dl {
+  float: left;
+  margin-top: 19px;
+  margin-bottom: 23px;
+  margin-right: 50px;
+}
+html.template-instance.template-show .app-view > header dt {
+  font-weight: $typo-weight-bold;
 }
diff --git a/ui-v2/app/styles/typography.scss b/ui-v2/app/styles/typography.scss
index 995e3c28f..05ace9d10 100644
--- a/ui-v2/app/styles/typography.scss
+++ b/ui-v2/app/styles/typography.scss
@@ -82,7 +82,6 @@ pre code,
 %button {
   font-weight: $typo-weight-semibold;
 }
-%app-view-header dt,
 %menu-panel dt,
 %route-card section dt,
 %route-card header:not(.short) dd,
diff --git a/ui-v2/app/templates/dc/services/show/upstreams.hbs b/ui-v2/app/templates/dc/services/show/upstreams.hbs
index 0a376080c..7a09b008d 100644
--- a/ui-v2/app/templates/dc/services/show/upstreams.hbs
+++ b/ui-v2/app/templates/dc/services/show/upstreams.hbs
@@ -26,8 +26,9 @@
   {{#let (sort-by (comparator 'service' sort) filtered) as |sorted|}}
       <ChangeableSet @dispatcher={{searchable 'service' sorted}} @terms={{search}}>
         <BlockSlot @name="set" as |searched|>
-          <ConsulServiceList
+          <ConsulUpstreamList
             @items={{searched}}
+            @dc={{dc}}
             @nspace={{nspace}}
           />
         </BlockSlot>
diff --git a/ui-v2/tests/pages/dc/services/show.js b/ui-v2/tests/pages/dc/services/show.js
index 68cf5ea65..0630edbe9 100644
--- a/ui-v2/tests/pages/dc/services/show.js
+++ b/ui-v2/tests/pages/dc/services/show.js
@@ -23,7 +23,7 @@ export default function(visitable, attribute, collection, text, intentions, filt
     intentions: intentions(),
   };
   page.tabs.upstreamsTab = {
-    services: collection('.consul-service-list > ul > li:not(:first-child)', {
+    services: collection('.consul-upstream-list > ul > li:not(:first-child)', {
       name: text('[data-test-service-name]'),
     }),
   };