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">
<MemoryCard currentMemory={[21, 33, 3, 42,35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 2, 12, 3, 23]}
uploadRate={[31, 12, 3, 13, 3]}
downloadRate={[12, 31, 2, 12, 3, 23,90]}
uploadRate={[31, 12, 3, 13, 3,45,65]}
/>
</XStack>
</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'
return (
<DashboardCardWrapper padding='0'>
<DashboardCardWrapper padding='0'>
<YStack style={{
width: '284px',
height: '136px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}}>
<XStack
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 IconText from '../../../components/General/IconText'
import DashboardCardWrapper from '../DashboardCardWrapper'
type DataPoint = {
x: number
@ -40,24 +41,23 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
})),
},
]
const currentLoad =
chartData[0].data.length > 0 ? chartData[0].data[chartData[0].data.length - 1].y : 0
const message = currentLoad > 60 ? 'Good' : 'Poor'
return (
<ShadowBox
variant="$2"
style={{
<DashboardCardWrapper padding='0'>
<YStack style={{
width: '284px',
height: '136px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
}}
>
<YStack>
}}>
<XStack
justifyContent="space-between"
style={{
@ -65,9 +65,9 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
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} />
</div>
</Stack>
<YStack space={'$3'} width={'100%'}>
<XStack justifyContent="space-between" width={'100%'}>
<Stack>
@ -90,7 +90,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '10px 16px 25px 16px' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
>
@ -103,7 +103,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
)}
</XStack>
</YStack>
</ShadowBox>
</DashboardCardWrapper>
)
}