feat: ui changes in inscription flow

Nithishvb · Sep 6, 2023 · 23ab7f0 · 23ab7f0
1 parent c15b223
commit 23ab7f0
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx
@@ -1,5 +1,6 @@
-import { Box, Flex, Text, color, transition } from '@stacks/ui';
+import { Box, transition } from '@stacks/ui';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
+import { Flex, styled } from 'leather-styles/jsx';
 import { token } from 'leather-styles/tokens';
 
 interface FeesListItemProps {
@@ -22,10 +23,10 @@ export function FeesListItem({
 }: FeesListItemProps) {
   return (
     <Box
-      _hover={{ background: '#F9F9FA' }}
+      _hover={{ background: token('colors.accent.component-background-hover') }}
       as="button"
       border={isSelected ? '4px solid' : '1px solid'}
-      borderColor={isSelected ? token('colors.brown.12') : token('colors.ink.7')}
+      borderColor={token('colors.accent.action-primary-default')}
       borderRadius="16px"
       boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04)"
       data-testid={SharedComponentsSelectors.FeesListItem}
@@ -35,14 +36,19 @@ export function FeesListItem({
       width="100%"
       {...props}
     >
-      <Flex justifyContent="center" mb="base-tight" fontWeight={500}>
-        <Text mr="tight">{feeType}</Text>
-        <Text>{arrivesIn}</Text>
+      <Flex justifyContent="center" mb="base-tight">
+        <styled.span textStyle="label.01" mr="tight">
+          {feeType}
+        </styled.span>
+        <styled.span textStyle="label.01">{arrivesIn}</styled.span>
       </Flex>
-      <Flex justifyContent="center" color={color('text-caption')}>
-        <Text
+      <Flex justifyContent="center">
+        <styled.span
+          textStyle="caption.02"
           data-testid={SharedComponentsSelectors.FeesListItemFeeValue}
-        >{`${feeFiatValue} | ${feeRate} sats/vB | ${feeAmount}`}</Text>
+        >
+          {`${feeFiatValue} | ${feeRate} sats/vB | ${feeAmount}`}
+        </styled.span>
       </Flex>
     </Box>
   );

diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
@@ -31,7 +31,6 @@ export const Header: React.FC<HeaderProps> = memo(props => {
   const navigate = useNavigate();
 
   const [desktopViewport] = useMediaQuery(`(min-width: ${token('sizes.desktopViewportMinWidth')})`);
-  const [isNarrowViewport] = useMediaQuery('(max-width: 640px)');
 
   const leatherLogoIsClickable = useMemo(() => {
     return (
@@ -63,7 +62,6 @@ export const Header: React.FC<HeaderProps> = memo(props => {
       p="base"
       minHeight={['', '80px']}
       position="relative"
-      background={isNarrowViewport ? token('colors.brown.1') : token('colors.brown.2')}
       {...rest}
     >
       {onClose ? (

diff --git a/src/app/components/inscription-preview-card/inscription-preview-card.tsx b/src/app/components/inscription-preview-card/inscription-preview-card.tsx
@@ -1,4 +1,4 @@
-import { figmaTheme } from '@app/common/utils/figma-theme';
+import { token } from 'leather-styles/tokens';
 
 import { Flag } from '../layout/flag';
 import { InscriptionMetadata } from './components/inscription-metadata';
@@ -25,7 +25,7 @@ export function InscriptionPreviewCard({
     <Flag
       align="middle"
       border={hideBorder ? 'unset' : '1px solid'}
-      borderColor={hideBorder ? 'unset' : figmaTheme.border}
+      borderColor={hideBorder ? 'unset' : token('colors.accent.border-default')}
       borderRadius={hideBorder ? 'unset' : '10px'}
       img={image}
       p={hideBorder ? 'unset' : 'base'}

diff --git a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@stacks/ui';
+import { token } from 'leather-styles/tokens';
 
 import { SpaceBetween } from '@app/components/layout/space-between';
 import { Text } from '@app/components/typography';
@@ -12,7 +13,7 @@ export function CollectibleAsset({ icon, name, symbol }: CollectibleAssetProps)
   return (
     <Flex
       alignItems="center"
-      border="1px solid #DCDDE2"
+      border={`1px solid ${token('colors.accent.border-default')}`}
       borderRadius="10px"
       minHeight="64px"
       mb="base"