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

Update NetworkCard with use of DashboardCardWrapper

This commit is contained in:
Hristo Nedelkov 2023-09-19 11:35:01 +03:00
parent 4a0b2e9e90
commit 5cdb4d247b
3 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/Dashboard/Dashboard.tsx
View File

@ -47,8 +47,8 @@ const Dashboard = () => {
<XStack space="$4"> <XStack space="$4">
<MemoryCard currentMemory={[21, 33, 3, 42,35]} maxMemory={50} /> <MemoryCard currentMemory={[21, 33, 3, 42,35]} maxMemory={50} />
<NetworkCard <NetworkCard
downloadRate={[12, 31, 2, 12, 3, 23]} downloadRate={[12, 31, 2, 12, 3, 23,90]}
uploadRate={[31, 12, 3, 13, 3]} uploadRate={[31, 12, 3, 13, 3,45,65]}
/> />
</XStack> </XStack>
</YStack> </YStack>

5
src/pages/Dashboard/MemoryCard/MemoryCard.tsx
View File

@ -41,16 +41,13 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
const message = currentLoad < maxMemory ? 'Good' : 'Poor' const message = currentLoad < maxMemory ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding='0'> <DashboardCardWrapper padding='0'>
<YStack style={{ <YStack style={{
width: '284px', width: '284px',
height: '136px', height: '136px',
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none', border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}}> }}>
<XStack <XStack
justifyContent="space-between" justifyContent="space-between"

22
src/pages/Dashboard/NetworkCard/NetworkCard.tsx
View File

@ -4,6 +4,7 @@ import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
import StandartLineChart from '../../../components/Charts/StandardLineChart' import StandartLineChart from '../../../components/Charts/StandardLineChart'
import IconText from '../../../components/General/IconText' import IconText from '../../../components/General/IconText'
import DashboardCardWrapper from '../DashboardCardWrapper'
type DataPoint = { type DataPoint = {
x: number x: number
@ -40,24 +41,23 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
})), })),
}, },
] ]
const currentLoad = const currentLoad =
chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0 chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
const message = currentLoad > 60 ? 'Good' : 'Poor' const message = currentLoad > 60 ? 'Good' : 'Poor'
return ( return (
<ShadowBox <DashboardCardWrapper padding='0'>
variant="$2"
style={{
<YStack style={{
width: '284px', width: '284px',
height: '136px', height: '136px',
borderRadius: '16px', borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none', border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff', backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}} }}>
>
<YStack>
<XStack <XStack
justifyContent="space-between" justifyContent="space-between"
style={{ style={{
@ -65,9 +65,9 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
position: 'relative', position: 'relative',
}} }}
> >
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}> <Stack style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<StandartLineChart data={chartData} /> <StandartLineChart data={chartData} />
</div> </Stack>
<YStack space={'$3'} width={'100%'}> <YStack space={'$3'} width={'100%'}>
<XStack justifyContent="space-between" width={'100%'}> <XStack justifyContent="space-between" width={'100%'}>
<Stack> <Stack>
@ -90,7 +90,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
</YStack> </YStack>
</XStack> </XStack>
<Separator borderColor={'#e3e3e3'} /> <Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}> <XStack space={'$4'} style={{ padding: '10px 16px 25px 16px' }}>
<IconText <IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />} icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
> >
@ -103,7 +103,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
)} )}
</XStack> </XStack>
</YStack> </YStack>
</ShadowBox> </DashboardCardWrapper>
) )
} }