From f83d214524c9da744e691093d5cb12b882144114 Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Wed, 2 Aug 2023 21:28:22 -0500
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Update=20Target=20De?=
 =?UTF-8?q?tails=20header=20(#1818)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: ICU-10243
---
 ui/desktop/app/styles/app.scss                |  9 +++++++
 .../scopes/scope/projects/targets/target.hbs  | 25 ++++++-------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 28dd92628..dac214bdf 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -505,3 +505,12 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
     }
   }
 }
+
+.target-details-header {
+  display: flex;
+  align-items: center;
+
+  > * {
+    margin-right: 1rem;
+  }
+}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
index f79a98c73..ced82b27a 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
@@ -8,28 +8,19 @@
 <Rose::Layout::Page as |page|>
 
   <page.header>
-    <h2>
+    <h1 class='target-details-header'>
+      <Hds::IconTile @color='boundary' @icon='target' />
       {{@model.displayName}}
-    </h2>
-    <p>{{@model.description}}</p>
-    <p>
-      <Copyable
-        @text={{@model.id}}
-        @buttonText={{t 'actions.copy-to-clipboard'}}
-        @acknowledgeText={{t 'states.copied'}}
-      >
-        <code>{{@model.id}}</code>
-      </Copyable>
-    </p>
+    </h1>
   </page.header>
 
   <page.actions>
-    <Rose::Button
-      @style='primary'
+    <Hds::Button
+      @text={{t 'resources.session.actions.connect'}}
+      @icon='entry-point'
+      @iconPosition='trailing'
       {{on 'click' (route-action 'connect' @model)}}
-    >
-      {{t 'resources.session.actions.connect'}}
-    </Rose::Button>
+    />
   </page.actions>
 
   <page.body>