fix: improve styling of fund page in extension view

leather-io · Nov 1, 2023 · ce31f2c · ce31f2c
1 parent 7c65fb3
commit ce31f2c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/app/pages/fund/components/fiat-providers-list.tsx b/src/app/pages/fund/components/fiat-providers-list.tsx
@@ -40,7 +40,7 @@ export function FiatProvidersList(props: FiatProvidersProps) {
       justifyContent="center"
       mt={['space.04', 'space.08']}
       py="0"
-      px="space.08"
+      px={['space.05', 'space.08']}
       rowGap="1.5rem"
       placeItems="center"
       gridTemplateColumns={[

diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -38,7 +38,7 @@ export function FundAccountTile(props: FundAccountTileProps) {
       display="flex"
       onClick={onClickTile}
       textAlign="left"
-      width="17.5rem"
+      width={['100%', '17.5rem']}
       height="11.3rem"
     >
       <Stack

diff --git a/src/app/pages/fund/fund.layout.tsx b/src/app/pages/fund/fund.layout.tsx
@@ -13,20 +13,28 @@ export function FundLayout({ address }: FundLayoutProps) {
       flexDirection="column"
       minHeight={['70vh', '90vh']}
       justifyContent="start"
-      mb="loose"
+      mb="space.05"
     >
       <Stack
         alignItems={['left', 'center']}
-        pb={['space.05', 'unset']}
+        pb={['space.04', 'unset']}
         px={['space.05', 'space.05', 'unset']}
         gap={['space.04', 'space.05']}
-        mt={['space.04', 'unset']}
       >
-        <styled.h1 px={['unset', 'space.05']} textAlign={['left', 'center']} textStyle="heading.02">
+        <styled.h1
+          px={['unset', 'space.05']}
+          textAlign={['left', 'center']}
+          textStyle={['heading.04', 'heading.02']}
+        >
           Let's get funds into your wallet
         </styled.h1>
 
-        <styled.span textStyle="label.02" maxWidth="544px" textAlign={['left', 'center']}>
+        <styled.span
+          textStyle="body.01"
+          color="accent.text-subdued"
+          maxWidth="544px"
+          textAlign={['left', 'center']}
+        >
           Choose an exchange to fund your account with Stacks (STX) or deposit from elsewhere.
           Exchanges with “Fast checkout” make it easier to purchase STX for direct deposit into your
           wallet with a credit card.