status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 22:37:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix style of calendar position

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-09-15 10:31:02 +03:00
parent 43fd751e1c
commit e695fb901a
1 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx
View File

@ -10,12 +10,10 @@ import { useState } from "react";
const years = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEPT', 'OCT', 'NOV', 'DEC']
const userGains = [10000, 15000, 17500, 20000, 19000, 23222, 25000, 20000, 20000, 21000, 22300, 21000]
const BalanceChardCard = () => {
const [isCalendarVisible, setIsCalendarVisible] = useState(false)
const calendarStyle = { backgroundColor: 'white', width: 'fit-content' }
const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined });
@ -29,11 +27,11 @@ const BalanceChardCard = () => {
}
setDateRange(range);
};
return (
<DashboardCardWrapper >
<Stack style={{ width: '536px' }}>
<YStack>
<YStack space={'$4'}>
<XStack justifyContent={'space-between'}>
<YStack>
<Text size={15} weight={'semibold'}> Balance</Text>
@ -47,17 +45,17 @@ const BalanceChardCard = () => {
<Text size={13} weight={'semibold'}>{dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}</Text>
<Icon src="/icons/edit.svg" />
</XStack>
{isCalendarVisible && (
<Calendar
style={calendarStyle}
mode="range"
selected={dateRange}
onSelect={handleRangeSelect}
/>
)}
</XStack>
<LineChart years={years} userGains={userGains} />
{isCalendarVisible && (
<Calendar
style={{ backgroundColor: 'white', position: 'absolute', zIndex: 1000, top: '100%', right: '0' }}
mode="range"
selected={dateRange}
onSelect={handleRangeSelect}
/>
)}
</YStack>
</Stack>
</DashboardCardWrapper>