fix: move gap property to another component (#194)

DLC-link · Oct 23, 2024 · 370bda9 · 370bda9
1 parent 636ec8e
commit 370bda9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/...nents/vault.detaills/components/vault.details.button-group/vault.details.button-group.tsx b/...nents/vault.detaills/components/vault.details.button-group/vault.details.button-group.tsx
@@ -1,4 +1,4 @@
-import { Divider, HStack, VStack } from '@chakra-ui/react';
+import { HStack, VStack } from '@chakra-ui/react';
 import { VaultState } from 'dlc-btc-lib/models';
 
 import { VaultExpandedInformationButton } from './components/vault.details.button-group.button';
@@ -36,8 +36,7 @@ export function VaultExpandedInformationButtonGroup({
 
   return (
     <VStack w={'100%'}>
-      <Divider w={'100%'} borderColor={'grey.01'} borderStyle={'dashed'} />
-      <HStack w={'100%'} justifyContent={'space-between'}>
+      <HStack w={'100%'} justifyContent={'space-between'} pt={'10px'}>
         <VaultExpandedInformationButton
           label={'Mint dlcBTC'}
           onClick={handleDepositClick}

diff --git a/src/app/components/vault/vault.tsx b/src/app/components/vault/vault.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { VStack } from '@chakra-ui/react';
 import { Vault as VaultModel } from '@models/vault';
 import { BitcoinTransactionConfirmationsContext } from '@providers/bitcoin-query-provider';
 import { mintUnmintActions } from '@store/slices/mintunmint/mintunmint.actions';
@@ -36,24 +37,27 @@ export function Vault({ vault, variant }: VaultProps): React.JSX.Element {
   return (
     <VaultLayout>
       <VaultHeader vaultUUID={vault.uuid} vaultCreationTimestamp={vault.timestamp} />
-      <VaultMainStack
-        vaultState={vault.state}
-        vaultTotalLockedValue={vault.valueLocked}
-        vaultTotalMintedValue={vault.valueMinted}
-        isVaultExpanded={isVaultExpanded}
-        variant={variant}
-        handleButtonClick={handleMainButtonClick}
-      />
-      <VaultDetails
-        variant={variant}
-        vaultUUID={vault.uuid}
-        vaultState={vault.state}
-        vaultTotalLockedValue={vault.valueLocked}
-        vaultTotalMintedValue={vault.valueMinted}
-        isVaultExpanded={isVaultExpanded}
-        vaultFundingTX={vault.fundingTX}
-        vaultWithdrawDepositTX={vault.withdrawDepositTX}
-      />
+      <VStack width={'100%'} gap={'0px'}>
+        <VaultMainStack
+          vaultState={vault.state}
+          vaultTotalLockedValue={vault.valueLocked}
+          vaultTotalMintedValue={vault.valueMinted}
+          isVaultExpanded={isVaultExpanded}
+          variant={variant}
+          handleButtonClick={handleMainButtonClick}
+        />
+        <VaultDetails
+          variant={variant}
+          vaultUUID={vault.uuid}
+          vaultState={vault.state}
+          vaultTotalLockedValue={vault.valueLocked}
+          vaultTotalMintedValue={vault.valueMinted}
+          isVaultExpanded={isVaultExpanded}
+          vaultFundingTX={vault.fundingTX}
+          vaultWithdrawDepositTX={vault.withdrawDepositTX}
+        />
+      </VStack>
+
       <VaultProgressBar
         bitcoinTransactionConfirmations={confirmations}
         vaultState={vault.state}