From be3d4a5d2829d25ac5dae844ec08d32d623ff072 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 8 Dec 2023 09:28:54 +0100
Subject: [PATCH] Move the tooltip on the position details card

---
 dapp/src/components/Overview/PositionDetails.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
index e82d49620..8fb074fe3 100644
--- a/dapp/src/components/Overview/PositionDetails.tsx
+++ b/dapp/src/components/Overview/PositionDetails.tsx
@@ -8,6 +8,7 @@ import {
   CardBody,
   Card,
   CardFooter,
+  HStack,
 } from "@chakra-ui/react"
 import { BITCOIN, USD } from "../../constants"
 import { Info } from "../../static/icons"
@@ -16,16 +17,18 @@ export default function PositionDetails() {
   return (
     <Card h="100%">
       <CardBody>
-        <Text>Your positions</Text>
+        <HStack justifyContent="space-between">
+          <Text>Your positions</Text>
+          {/* TODO: Add correct text for tooltip */}
+          <Tooltip label="Template">
+            <Icon as={Info} color={useColorModeValue("black", "grey.80")} />
+          </Tooltip>
+        </HStack>
         <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}>