From 078f0bb223461528fe90c6fb6a761516182bf7c4 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 8 Dec 2023 08:50:27 +0100
Subject: [PATCH] Use a `Card` component for overview elements

---
 .../components/Overview/PositionDetails.tsx   | 43 ++++++++-----------
 dapp/src/components/Overview/Statistics.tsx   | 11 +++--
 .../Overview/TransactionHistory.tsx           | 11 +++--
 3 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index 972db661f..e82d49620 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -2,42 +2,37 @@ import React from "react"
 import {
   Text,
   Button,
-  HStack,
   Tooltip,
   Icon,
   useColorModeValue,
-  Flex,
+  CardBody,
+  Card,
+  CardFooter,
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
 
 export default function PositionDetails() {
   return (
-    <Flex p={4} h="100%" direction="column" justifyContent="space-between">
-      <Flex direction="column" gap={2}>
+    <Card h="100%">
+      <CardBody>
         <Text>Your positions</Text>
-        <Flex direction="column" alignItems="flex-start">
-          <HStack>
-            <Text>34.75</Text>
-            <Text>{BITCOIN.symbol}</Text>
-          </HStack>
-          <Flex w="100%" justifyContent="space-between">
-            <HStack>
-              <Text>1.245.148,1</Text>
-              <Text>{USD.symbol}</Text>
-            </HStack>
-            {/* TODO: Add correct text for tooltip */}
-            <Tooltip label="Template">
-              <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
-            </Tooltip>
-          </Flex>
-        </Flex>
-      </Flex>
-      <Flex direction="column" gap={2}>
+        <Text>
+          34.75 <Text as="span">{BITCOIN.symbol}</Text>
+        </Text>
+        <Text>
+          1.245.148,1 <Text as="span">{USD.symbol}</Text>
+          {/* TODO: Add correct text for tooltip */}
+          <Tooltip label="Template">
+            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+          </Tooltip>
+        </Text>
+      </CardBody>
+      <CardFooter flexDirection="column" gap={2}>
         {/* TODO: Handle click actions */}
         <Button>Stake</Button>
         <Button variant="outline">Withdraw</Button>
-      </Flex>
-    </Flex>
+      </CardFooter>
+    </Card>
   )
 }
diff --git a/dapp/src/components/Overview/Statistics.tsx b/dapp/src/components/Overview/Statistics.tsx
index b0c2dc0d6..bad05e4da 100644
--- a/dapp/src/components/Overview/Statistics.tsx
+++ b/dapp/src/components/Overview/Statistics.tsx
@@ -1,10 +1,13 @@
 import React from "react"
-import { Text, Box } from "@chakra-ui/react"
+import { CardBody, Card } from "@chakra-ui/react"
+import { TextMd } from "../Typography"
 
 export default function Statistics() {
   return (
-    <Box>
-      <Text>Pool stats</Text>
-    </Box>
+    <Card h="100%">
+      <CardBody>
+        <TextMd>Pool stats</TextMd>
+      </CardBody>
+    </Card>
   )
 }
diff --git a/dapp/src/components/Overview/TransactionHistory.tsx b/dapp/src/components/Overview/TransactionHistory.tsx
index 312233938..b8c0da7fd 100644
--- a/dapp/src/components/Overview/TransactionHistory.tsx
+++ b/dapp/src/components/Overview/TransactionHistory.tsx
@@ -1,10 +1,13 @@
 import React from "react"
-import { Text, Box } from "@chakra-ui/react"
+import { CardBody, Card } from "@chakra-ui/react"
+import { TextMd } from "../Typography"
 
 export default function TransactionHistory() {
   return (
-    <Box>
-      <Text>Transaction history</Text>
-    </Box>
+    <Card h="100%">
+      <CardBody>
+        <TextMd>Transaction history</TextMd>
+      </CardBody>
+    </Card>
   )
 }