status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add status calendar and style

This commit is contained in:
Hristo Nedelkov 2023-09-14 12:18:26 +03:00
parent dd83e30718
commit 8ae0aec302
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>