From 526052644750a8cc7989e1d4e9606c409c26659d Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 28 Nov 2023 18:50:50 +0100
Subject: [PATCH] Improve the use of  `VStack`, `HStack` and `Flex`

The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will.

Let's use the Stack component when it is a simple row or column of items.  If we need to customize the items let's use Flex.

More info: https://chakra-ui.com/docs/components/stack#notes-on-stack-vs-flex
---
 dapp/src/DApp.tsx                             |  6 ++---
 dapp/src/components/Navbar/ConnectWallet.tsx  |  2 +-
 dapp/src/components/Navbar/index.tsx          | 14 +++++------
 .../components/Overview/PositionDetails.tsx   | 25 +++++++------------
 4 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index 453c6c172..427d36de1 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { ChakraProvider, Box } from "@chakra-ui/react"
+import { ChakraProvider, Flex } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import theme from "./theme"
 import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
@@ -10,10 +10,10 @@ function DApp() {
   useDetectThemeMode()
 
   return (
-    <Box height="100%" p={6}>
+    <Flex p={6} gap={2} direction="column">
       <Navbar />
       <Overview />
-    </Box>
+    </Flex>
   )
 }
 
diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx
index 14a20eae5..c632fb6e5 100644
--- a/dapp/src/components/Navbar/ConnectWallet.tsx
+++ b/dapp/src/components/Navbar/ConnectWallet.tsx
@@ -59,7 +59,7 @@ export default function ConnectWallet() {
   const { btcAccount, ethAccount } = useWalletContext()
 
   return (
-    <HStack spacing="8px">
+    <HStack>
       <HStack mr="16px">
         <Text>Balance</Text>
         <Text as="b">
diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx
index f524f6fe5..24cd41aaf 100644
--- a/dapp/src/components/Navbar/index.tsx
+++ b/dapp/src/components/Navbar/index.tsx
@@ -1,22 +1,22 @@
 import React from "react"
-import { Box, Button, HStack, Icon, Switch } from "@chakra-ui/react"
+import { Button, Flex, Icon, Switch } from "@chakra-ui/react"
 import ConnectWallet from "./ConnectWallet"
 import { ChevronRight } from "../../static/icons"
 import { USD } from "../../constants"
 
 export default function Navbar() {
   return (
-    <Box mb={4}>
-      <HStack justifyContent="end">
+    <Flex gap={4} direction="column">
+      <Flex justifyContent="end">
         <ConnectWallet />
-      </HStack>
-      <HStack mt={8} justifyContent="space-between">
+      </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>
-      </HStack>
-    </Box>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index 9e5c4be71..8415c8910 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -3,32 +3,26 @@ import {
   Text,
   Button,
   Box,
-  VStack,
   HStack,
   Tooltip,
   Icon,
   useColorModeValue,
+  Flex,
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
 
 export default function PositionDetails() {
   return (
-    <VStack
-      p="24px"
-      h="100%"
-      justifyContent="space-between"
-      /* Unset alignItems to get a full-width button. */
-      alignItems="unset"
-    >
+    <Flex p="24px" h="100%" direction="column" justifyContent="space-between">
       <Box>
         <Text mb="8px">Your positions</Text>
-        <VStack alignItems="flex-start" gap="0">
+        <Flex direction="column" alignItems="flex-start">
           <HStack>
             <Text>34.75</Text>
             <Text>{BITCOIN.symbol}</Text>
           </HStack>
-          <HStack w="100%" justifyContent="space-between">
+          <Flex w="100%" justifyContent="space-between">
             <HStack>
               <Text>1.245.148,1</Text>
               <Text>{USD.symbol}</Text>
@@ -37,15 +31,14 @@ export default function PositionDetails() {
             <Tooltip label="Template">
               <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
             </Tooltip>
-          </HStack>
-        </VStack>
+          </Flex>
+        </Flex>
       </Box>
-      {/* Unset alignItems to get a full-width button. */}
-      <VStack spacing="16px" alignItems="unset" width="100%">
+      <Flex direction="column" gap={2}>
         {/* TODO: Handle click actions */}
         <Button>Stake</Button>
         <Button variant="outline">Withdraw</Button>
-      </VStack>
-    </VStack>
+      </Flex>
+    </Flex>
   )
 }