Use a Card component for overview elements

thesis · Dec 8, 2023 · 078f0bb · 078f0bb
1 parent a71401d
commit 078f0bb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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>
   )
 }