From 9a5a12da508961a7e3f44d922968f9456ebefd0d Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Fri, 8 Mar 2024 14:40:12 +0100
Subject: [PATCH] fix: updated icons

---
 .../features/approver/approver.stories.tsx    | 21 +++++++++++++++++--
 .../approver/components/approver-header.tsx   |  2 +-
 .../components/approver-subheader.tsx         | 12 ++++++++++-
 src/app/ui/components/item/item.layout.tsx    |  9 ++++----
 theme/semantic-tokens.ts                      |  4 +---
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/app/features/approver/approver.stories.tsx b/src/app/features/approver/approver.stories.tsx
index 441dc22a851..c0c581e1b55 100644
--- a/src/app/features/approver/approver.stories.tsx
+++ b/src/app/features/approver/approver.stories.tsx
@@ -6,6 +6,7 @@ import { Callout } from '@app/ui/components/callout/callout';
 import { Flag } from '@app/ui/components/flag/flag';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { ZapIcon } from '@app/ui/icons';
 
 import { Approver } from './approver';
 
@@ -32,8 +33,24 @@ export const ExampleOne: Story = {
         <Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
         <Callout title="Some callout">Hey watch out for this sketchy app</Callout>
         <Approver.Section>
-          <Approver.Subheader>Example flag content</Approver.Subheader>
-          <Flag img={<Circle size="40px" backgroundColor="ink.border-default" />} align="top">
+          <Approver.Subheader>
+            Subheader with icon <ZapIcon variant="small" />
+          </Approver.Subheader>
+          <ItemInteractive>
+            <ItemLayout
+              flagImg={<Circle size="40px" backgroundColor="ink.border-default" />}
+              titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
+              titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
+              captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
+              captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
+            />
+          </ItemInteractive>
+          <Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
+          <Flag
+            img={<Circle size="40px" backgroundColor="ink.border-default" />}
+            align="top"
+            mb="space.03"
+          >
             <Box width="90%" height="16px" backgroundColor="ink.border-default" />
             <Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
           </Flag>
diff --git a/src/app/features/approver/components/approver-header.tsx b/src/app/features/approver/components/approver-header.tsx
index 3b1135e0a11..dd9f8e13028 100644
--- a/src/app/features/approver/components/approver-header.tsx
+++ b/src/app/features/approver/components/approver-header.tsx
@@ -17,7 +17,7 @@ export function ApproverHeader({ title, requester }: ApproverHeaderProps) {
         <styled.h1 textStyle="heading.03">{title}</styled.h1>
       </ApproverHeaderAnimation>
       <ApproverHeaderAnimation delay={0.04}>
-        <styled.p textStyle="label.02" mt="space.03">
+        <styled.p textStyle="label.03" mt="space.03">
           Requested by {requester}
         </styled.p>
       </ApproverHeaderAnimation>
diff --git a/src/app/features/approver/components/approver-subheader.tsx b/src/app/features/approver/components/approver-subheader.tsx
index 760cd7bf069..aa83095c376 100644
--- a/src/app/features/approver/components/approver-subheader.tsx
+++ b/src/app/features/approver/components/approver-subheader.tsx
@@ -6,5 +6,15 @@ type ApproverSubheaderProps = HTMLStyledProps<'h2'>;
 
 export function ApproverSubheader(props: ApproverSubheaderProps) {
   useRegisterApproverChild('subheader');
-  return <styled.h2 textStyle="label.01" mb="space.03" {...props} />;
+  return (
+    <styled.h2
+      display="flex"
+      textStyle="label.01"
+      alignItems="center"
+      minH="40px"
+      mb="space.03"
+      gap="space.01"
+      {...props}
+    />
+  );
 }
diff --git a/src/app/ui/components/item/item.layout.tsx b/src/app/ui/components/item/item.layout.tsx
index 236e96144c7..ccb8e3a5630 100644
--- a/src/app/ui/components/item/item.layout.tsx
+++ b/src/app/ui/components/item/item.layout.tsx
@@ -31,7 +31,6 @@ export function ItemLayout({
       <Flex alignItems="center" justifyContent="space-between" width="100%">
         <Stack
           alignItems="start"
-          flexGrow={2}
           gap="2px"
           overflow="hidden"
           textOverflow="ellipsis"
@@ -41,7 +40,7 @@ export function ItemLayout({
             {isValidElement(titleLeft) ? (
               titleLeft
             ) : (
-              <styled.span fontWeight={500} textStyle="label.02">
+              <styled.span fontWeight={500} textStyle="label.03">
                 {titleLeft}
               </styled.span>
             )}
@@ -56,18 +55,18 @@ export function ItemLayout({
           )}
         </Stack>
         <HStack gap="space.03">
-          <Stack alignItems="end" gap="2px" height="42px">
+          <Stack alignItems="end" gap="2px">
             {isValidElement(titleRight) ? (
               titleRight
             ) : (
-              <styled.span fontWeight={500} textStyle="label.02">
+              <styled.span fontWeight={500} textStyle="label.03">
                 {titleRight}
               </styled.span>
             )}
             {isValidElement(captionRight) ? (
               captionRight
             ) : (
-              <styled.span className={itemCaptionStyles} textStyle="caption.02">
+              <styled.span className={itemCaptionStyles} textStyle="caption.01">
                 {captionRight}
               </styled.span>
             )}
diff --git a/theme/semantic-tokens.ts b/theme/semantic-tokens.ts
index cc2dd434cd9..de35a593b44 100644
--- a/theme/semantic-tokens.ts
+++ b/theme/semantic-tokens.ts
@@ -2,6 +2,4 @@ import { semanticTokens as leatherSemanticTokens } from '@leather-wallet/tokens'
 import { defineSemanticTokens } from '@pandacss/dev';
 
 // ts-unused-exports:disable-next-line
-export const semanticTokens = defineSemanticTokens({
-  ...leatherSemanticTokens,
-});
+export const semanticTokens = defineSemanticTokens({ ...leatherSemanticTokens });