From 8ae0aec302fd7aba5db2115f075f329dcac5a013 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Thu, 14 Sep 2023 12:18:26 +0300
Subject: [PATCH] Add status calendar and style

---
 .../Dashboard/BalanceLineChart/BalanceChardCard.tsx  | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx b/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
index d877458d..217fe146 100644
--- a/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
+++ b/src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
@@ -4,8 +4,11 @@ import { Text } from "@status-im/components";
 import LineChart from "./LineChart";
 import Icon from "../../../components/General/Icon";
 
-
+import { Calendar } from '@status-im/components'
+import { useState } from "react";
 const BalanceChardCard = () => {
+    const [isCalendarVisible, setIsCalendarVisible] = useState(false)
+    let calendarStyle = { backgroundColor: 'white' }
     return (
         <DashboardCardWrapper >
             <Stack style={{ width: '536px' }}>
@@ -14,16 +17,17 @@ const BalanceChardCard = () => {
                     <XStack justifyContent={'space-between'}>
                         <YStack>
                             <Text size={15} weight={'semibold'}> Balance</Text>
-                            <XStack style={{ alignItems: 'end' }} space={'$1'}>
+                            <XStack style={{ alignItems: 'end', }} space={'$1'} onClick={() => setIsCalendarVisible(true)}>
                                 <Text size={27} weight={'semibold'}>24,273</Text>
                                 <Text size={11} color="#23ADA0" >1.56%</Text>
                             </XStack>
                         </YStack>
-                        <XStack style={{ border: '2px solid #09101C14', height: 'fit-content', padding: '3px', borderRadius: '10px' }}>
+                        <XStack onClick={() => setIsCalendarVisible((prev) => !prev)} style={{ border: '2px solid #09101C14', height: 'fit-content', padding: '3px', borderRadius: '10px' }}>
                             <Text size={13} weight={'semibold'}>01 APR 2022</Text>
                             <Text size={13} weight={'semibold'}> → 31 MAR 2023</Text>
-                            <Icon src="/icons/edit.svg" ></Icon>
+                            <Icon src="/icons/edit.svg" />
                         </XStack>
+                        {isCalendarVisible && <Calendar style={{ ...calendarStyle }}  />}
                     </XStack>
                     <LineChart />
                 </YStack>