From 02312292c2177f895110cd71d1e44cd048423350 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 6 Dec 2023 08:54:31 +0100
Subject: [PATCH] Refactor for spacing between component

---
 dapp/src/DApp.tsx                             |  4 +-
 dapp/src/components/Header/ConnectWallet.tsx  |  6 +--
 dapp/src/components/Header/index.tsx          | 17 ++----
 .../components/Overview/PositionDetails.tsx   |  9 ++--
 dapp/src/components/Overview/index.tsx        | 53 +++++++++++++------
 5 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index e0e45ef02..930279714 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -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
index c632fb6e5..8b35a010b 100644
--- 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
index df7e8d8ff..838ed37b2 100644
--- 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
index 8415c8910..972db661f 100644
--- 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
index 2d3a8ac42..38f7d0068 100644
--- 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>
   )
 }