fix: updated icons

leather-io · Mar 18, 2024 · 9a5a12d · 9a5a12d
1 parent 537745a
commit 9a5a12d
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 });