fix: updated icons

leather-io · Mar 13, 2024 · a546d71 · a546d71
1 parent 3eeb913
commit a546d71
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -132,7 +132,7 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.10",
+    "@leather-wallet/tokens": "0.0.13",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",

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 });
diff --git a/theme/typography.ts b/theme/typography.ts
@@ -1,5 +1,5 @@
-import { textStyles as leatherTextStyles } from '@leather-wallet/tokens';
+import { getWebTextVariants } from '@leather-wallet/tokens';
 import { defineTextStyles } from '@pandacss/dev';
 
 // ts-unused-exports:disable-next-line
-export const textStyles = defineTextStyles({ ...leatherTextStyles });
+export const textStyles = defineTextStyles({ ...getWebTextVariants() });
diff --git a/yarn.lock b/yarn.lock
@@ -2667,10 +2667,10 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
-"@leather-wallet/tokens@0.0.10":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.10.tgz#8d944d6f63847a71d9739974163554496c92b79c"
-  integrity sha512-DhFBpPclCaDM5+o/H5+luPfTrnLuQ8aW9PGBRSc+yiIhSL1wNv/fuTljF/R4uHQQblG4EQQ2fjRyh5XKBEfKaQ==
+"@leather-wallet/tokens@0.0.13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.13.tgz#0162f59d888afcb15dd71fbbe7ab54b5b54b6386"
+  integrity sha512-ScXDDa0pyB86XqUHTWGoZPsrCpdWG/vEvhD5YyfSIBKnNnPdf/zP16/Wv88edPBXQfcR98YUOgIm+Uvjq75Fqw==
 
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.2.0":
   version "8.2.0"