From bdbeb9e3f65996c4951154714b4a8bdcd205c3e5 Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Tue, 25 Oct 2022 14:17:40 +0200
Subject: [PATCH] Use HDS utilities instead of tailwind peer details

---
 .../app/components/consul/peer/bento-box/index.hbs    | 11 ++++++-----
 .../app/templates/dc/peers/show/exported.hbs          |  6 ++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
index 8066b55cfa..a4414b3293 100644
--- a/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
+++ b/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs
@@ -2,7 +2,7 @@
   <div class="flex h-24 p-6 overflow-x-auto space-x-12">
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Status</div>
       <div class="flex items-center">
         <Peerings::Badge @peering={{@peering}} />
@@ -10,14 +10,15 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest heartbeat</div>
       <div class="flex items-center">
         {{#if @peering.LastHeartbeat}}
           {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
             <FlightIcon
               @name="activity"
-              class="mr-0.5 text-hds-foreground-faint fill-current"
+              @color="var(--token-color-foreground-faint)"
+              class="mr-0.5"
             />
             {{#if smartDate.isNearDate}}
               <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
@@ -32,7 +33,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest receipt</div>
       <div class="flex items-center">
         {{#if @peering.LastReceive}}
@@ -50,7 +51,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest send</div>
       <div class="flex items-center">
         {{#if @peering.LastSend}}
diff --git a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
index 10af30503c..86a020f994 100644
--- a/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
+++ b/ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs
@@ -53,10 +53,12 @@
                     @items={{search.data.items}}
                     as |service index|
                   >
-                    <li class="px-3 h-12 border-b border-hds-border-primary">
+                    <li
+                      class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0"
+                    >
                       <a
                         data-test-service-name
-                        class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
+                        class="hds-typography-display-300 hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
                         href={{href-to
                           "dc.services.show.index"
                           service.Name