feat: add padding and spacing to components

DLC-link · Dec 21, 2023 · 72e5bf7 · 72e5bf7
1 parent 8433eb2
commit 72e5bf7
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 11 deletions.
diff --git a/src/app/components/how-it-works/bottom/components/flow-step.tsx b/src/app/components/how-it-works/bottom/components/flow-step.tsx
@@ -18,7 +18,7 @@ export function FlowStep({
   badge,
 }: FlowStepProps): React.JSX.Element {
   return (
-    <VStack align={'left'} spacing={'0px'}>
+    <VStack align={'left'} spacing={'0px'} pb={'20px'}>
       <Text variant={'step'}>{step}</Text>
       {hasBadge ? (
         <HStack>

diff --git a/src/app/components/how-it-works/bottom/components/how-to-mint.tsx b/src/app/components/how-it-works/bottom/components/how-to-mint.tsx
@@ -1,4 +1,4 @@
-import { Button, Image, Text } from '@chakra-ui/react';
+import { Box, Button, Image, Text } from '@chakra-ui/react';
 import { IntroVideo } from '@components/how-it-works/top/components/intro-video';
 
 import { CustomCard } from '../../components/custom-card';
@@ -11,6 +11,7 @@ export function HowToMint(): React.JSX.Element {
         <>
           <Text variant={'title'}>How to Mint dlcBTC</Text>
           <Image src={'/images/mintBtc.png'} alt={'mint image'} h={'39px'} w={'185px'} />
+          <Box h={'25px'} />
           <FlowStep
             step={'Step 1'}
             title={'Deposit Adress'}
@@ -66,6 +67,7 @@ export function HowToMint(): React.JSX.Element {
             placeholderHeight={'262px'}
             placeholderWidth={'435px'}
           />
+          <Box h={'10px'} />
           <Button variant={'account'}>Mint dlcBTC</Button>
         </>
       }

diff --git a/src/app/components/how-it-works/bottom/components/how-to-unmint.tsx b/src/app/components/how-it-works/bottom/components/how-to-unmint.tsx
@@ -1,4 +1,4 @@
-import { Button, Image, Text } from '@chakra-ui/react';
+import { Box, Button, Image, Text } from '@chakra-ui/react';
 
 import { CustomCard } from '../../components/custom-card';
 import { FlowStep } from './flow-step';
@@ -10,6 +10,7 @@ export function HowToUnmint(): React.JSX.Element {
         <>
           <Text variant={'title'}>How to Unmint dlcBTC</Text>
           <Image src={'/images/unmintBtc.png'} alt={'unmint image'} h={'39px'} w={'185px'} />
+          <Box h={'25px'} />
           <FlowStep
             step={'Step 1'}
             title={'Unmint dlcBTC'}

diff --git a/...pp/components/how-it-works/bottom/components/supported-wallets/components/wallet-info.tsx b/...pp/components/how-it-works/bottom/components/supported-wallets/components/wallet-info.tsx
@@ -1,4 +1,4 @@
-import { Button, Image, Text, VStack } from '@chakra-ui/react';
+import { Box, Button, Image, Text, VStack } from '@chakra-ui/react';
 
 interface WalletInfoProps {
   src: string;
@@ -8,13 +8,25 @@ interface WalletInfoProps {
 
 export function WalletInfo({ src, coinName, content }: WalletInfoProps): React.JSX.Element {
   return (
-    <VStack align={'left'} spacing={'12px'} w={'206px'}>
-      <Image src={src} alt={''} w={'92px'} h={'14px'} />
-      <Button variant={'vault'}>Download</Button>
-      <Text color={'rgba(154, 201, 255, 1)'} fontStyle={'bold'}>
+    <VStack
+      align={'left'}
+      spacing={'12px'}
+      w={'200px'}
+      ml={src === '/images/metamask.png' ? '0px' : '15px'}
+    >
+      <Image
+        src={src}
+        alt={''}
+        w={src === '/images/metamask.png' ? '92px' : '66px'}
+        h={src === '/images/metamask.png' ? '12px' : '14px'}
+      />
+      <Box w={'92px'}>
+        <Button variant={'vault'}>Download</Button>
+      </Box>
+      <Text color={'light.blue.01'} fontStyle={'bold'}>
         {coinName}
       </Text>
-      {content}
+      <Box h={'140px'}>{content}</Box>
     </VStack>
   );
 }
diff --git a/src/app/components/how-it-works/bottom/components/supported-wallets/supported-wallets.tsx b/src/app/components/how-it-works/bottom/components/supported-wallets/supported-wallets.tsx
@@ -5,10 +5,12 @@ import { WalletInfo } from './components/wallet-info';
 
 export function SupportedWallets(): React.JSX.Element {
   return (
-    <CustomCard width={'488px'} height={'377px'} padding={'25px'}>
+    <CustomCard width={'488px'} height={'377px'} padding={'25px 0px 25px 25px'}>
       {
         <>
-          <Text variant={'title'}>Supported Wallets</Text>
+          <Text variant={'title'} pb={'30px'}>
+            Supported Wallets
+          </Text>
           <HStack divider={<StackDivider borderColor={'white.03'} />}>
             <WalletInfo
               src={'/images/metamask.png'}