status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-21 15:48:25 +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

14
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 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 userGains = [10000, 15000, 17500, 20000, 19000, 23222, 25000, 20000, 20000, 21000, 22300, 21000]
const BalanceChardCard = () => { const BalanceChardCard = () => {
const [isCalendarVisible, setIsCalendarVisible] = useState(false) const [isCalendarVisible, setIsCalendarVisible] = useState(false)
const calendarStyle = { backgroundColor: 'white', width: 'fit-content' }
const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined }); const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined });
@ -29,11 +27,11 @@ const BalanceChardCard = () => {
} }
setDateRange(range); setDateRange(range);
}; };
return ( return (
<DashboardCardWrapper > <DashboardCardWrapper >
<Stack style={{ width: '536px' }}> <Stack style={{ width: '536px' }}>
<YStack> <YStack space={'$4'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> Balance</Text> <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> <Text size={13} weight={'semibold'}>{dateRange?.to ? dateRange.to.toLocaleDateString() : ' End Date'}</Text>
<Icon src="/icons/edit.svg" /> <Icon src="/icons/edit.svg" />
</XStack> </XStack>
</XStack>
<LineChart years={years} userGains={userGains} />
{isCalendarVisible && ( {isCalendarVisible && (
<Calendar <Calendar
style={calendarStyle} style={{ backgroundColor: 'white', position: 'absolute', zIndex: 1000, top: '100%', right: '0' }}
mode="range" mode="range"
selected={dateRange} selected={dateRange}
onSelect={handleRangeSelect} onSelect={handleRangeSelect}
/> />
)} )}
</XStack>
<LineChart years={years} userGains={userGains} />
</YStack> </YStack>
</Stack> </Stack>
</DashboardCardWrapper> </DashboardCardWrapper>