Refactor for spacing between component

thesis · Dec 6, 2023 · 2dca2bf · 2dca2bf
1 parent 457f9fa
commit 2dca2bf
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 42 deletions.
diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { ChakraProvider, Flex } from "@chakra-ui/react"
+import { ChakraProvider } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
@@ -10,12 +10,12 @@ function DApp() {
   useDetectThemeMode()
 
   return (
-    <Flex p={6} gap={2} direction="column">
+    <>
       <Header />
       <main>
         <Overview />
       </main>
-    </Flex>
+    </>
   )
 }
 

diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -37,7 +37,7 @@ function ConnectButton({
     <Button
       variant="outline"
       sx={styles}
-      leftIcon={<Icon as={leftIcon} h="28px" w="28px" />}
+      leftIcon={<Icon as={leftIcon} h={7} w={7} />}
       rightIcon={
         !account ? (
           // TODO: Add correct text for tooltip
@@ -59,8 +59,8 @@ export default function ConnectWallet() {
   const { btcAccount, ethAccount } = useWalletContext()
 
   return (
-    <HStack>
-      <HStack mr="16px">
+    <HStack spacing={4}>
+      <HStack>
         <Text>Balance</Text>
         <Text as="b">
           {!btcAccount || btcAccount?.balance.isZero()

diff --git a/dapp/src/components/Header/index.tsx b/dapp/src/components/Header/index.tsx
@@ -1,22 +1,11 @@
 import React from "react"
-import { Button, Flex, Icon, Switch } from "@chakra-ui/react"
+import { Flex } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
-import { ChevronRight } from "../../static/icons"
-import { USD } from "../../constants"
 
 export default function Header() {
   return (
-    <Flex gap={4} direction="column">
-      <Flex justifyContent="end">
-        <ConnectWallet />
-      </Flex>
-      <Flex justifyContent="space-between">
-        {/* TODO: Handle click actions */}
-        <Switch size="sm">Show values in {USD.symbol}</Switch>
-        <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
-          Read documentation
-        </Button>
-      </Flex>
+    <Flex justifyContent="end" p={6}>
+      <ConnectWallet />
     </Flex>
   )
 }
diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import {
   Text,
   Button,
-  Box,
   HStack,
   Tooltip,
   Icon,
@@ -14,9 +13,9 @@ import { Info } from "../../static/icons"
 
 export default function PositionDetails() {
   return (
-    <Flex p="24px" h="100%" direction="column" justifyContent="space-between">
-      <Box>
-        <Text mb="8px">Your positions</Text>
+    <Flex p={4} h="100%" direction="column" justifyContent="space-between">
+      <Flex direction="column" gap={2}>
+        <Text>Your positions</Text>
         <Flex direction="column" alignItems="flex-start">
           <HStack>
             <Text>34.75</Text>
@@ -33,7 +32,7 @@ export default function PositionDetails() {
             </Tooltip>
           </Flex>
         </Flex>
-      </Box>
+      </Flex>
       <Flex direction="column" gap={2}>
         {/* TODO: Handle click actions */}
         <Button>Stake</Button>

diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx
@@ -1,27 +1,46 @@
 import React from "react"
-import { Grid, GridItem, useColorModeValue } from "@chakra-ui/react"
+import {
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Icon,
+  Switch,
+  useColorModeValue,
+} from "@chakra-ui/react"
 import PositionDetails from "./PositionDetails"
 import Statistics from "./Statistics"
 import TransactionHistory from "./TransactionHistory"
+import { USD } from "../../constants"
+import { ChevronRight } from "../../static/icons"
 
 export default function Overview() {
   const bg = useColorModeValue("white", "grey.400")
   return (
-    <Grid
-      h="80vh"
-      templateRows="repeat(12, 1fr)"
-      templateColumns="repeat(12, 1fr)"
-      gap={4}
-    >
-      <GridItem colSpan={3} rowSpan={5} bg={bg}>
-        <PositionDetails />
-      </GridItem>
-      <GridItem colSpan={9} rowSpan={5} bg={bg}>
-        <Statistics />
-      </GridItem>
-      <GridItem colSpan={12} rowSpan={7} bg={bg}>
-        <TransactionHistory />
-      </GridItem>
-    </Grid>
+    <Flex direction="column" gap={2} p={6}>
+      <Flex justifyContent="space-between">
+        {/* TODO: Handle click actions */}
+        <Switch size="sm">Show values in {USD.symbol}</Switch>
+        <Button variant="link" rightIcon={<Icon as={ChevronRight} />}>
+          Read documentation
+        </Button>
+      </Flex>
+      <Grid
+        h="80vh"
+        templateRows="repeat(12, 1fr)"
+        templateColumns="repeat(12, 1fr)"
+        gap={4}
+      >
+        <GridItem colSpan={3} rowSpan={5} bg={bg}>
+          <PositionDetails />
+        </GridItem>
+        <GridItem colSpan={9} rowSpan={5} bg={bg}>
+          <Statistics />
+        </GridItem>
+        <GridItem colSpan={12} rowSpan={7} bg={bg}>
+          <TransactionHistory />
+        </GridItem>
+      </Grid>
+    </Flex>
   )
 }