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

fix: add some cohesiveness to the cards

This commit is contained in:
Ivana Andersson 2023-09-27 17:42:20 +03:00
parent 47214d594f
commit d2d3c90fb7
10 changed files with 80 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/General/AddCards/AddCardsContainer.tsx
View File

@ -5,7 +5,7 @@ import DashboardCardWrapper from '../../../pages/Dashboard/DashboardCardWrapper'
const AddCardsContainer = () => {
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="50%">
<YStack>
<AddCard padding={'0 7vw'} />
<AddCard padding={'0 7vw'} />

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

@ -37,8 +37,8 @@ const BalanceChartCard = () => {
}
return (
<DashboardCardWrapper>
<YStack space={'$4'} style={{ width: '536px' }}>
<DashboardCardWrapper width="50%">
<YStack space={'$4'} style={{ width: '100%' }}>
<XStack justifyContent={'space-between'}>
<YStack>
<Text size={15} weight={'semibold'}>

2
src/pages/Dashboard/BasicInfoCards/BasicInfoCard.tsx
View File

@ -10,7 +10,7 @@ type BasicInfoCardProps = {
const BasicInfoCard = ({ title, value }: BasicInfoCardProps) => {
return (
<DashboardCardWrapper>
<DashboardCardWrapper width="100%">
<YStack
style={{
width: '100%',

31
src/pages/Dashboard/CPULoad/CPUCard.tsx
View File

@ -1,5 +1,5 @@
import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { Separator, Stack, XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import { IncorrectIcon } from '@status-im/icons'
import StandartLineChart from '../../../components/Charts/StandardLineChart'
@ -39,11 +39,11 @@ const CPUCard = ({ load }: CPUCardProps) => {
const message = currentLoad < 80 ? 'Good' : 'Poor'
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="48%">
<YStack
style={{
width: '284px',
height: '136px',
width: '100%',
minHeight: '156px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -54,22 +54,23 @@ const CPUCard = ({ load }: CPUCardProps) => {
style={{
padding: '8px 16px',
position: 'relative',
flexGrow: '1',
}}
>
<YStack space={'$3'} justifyContent="space-between">
<Text size={15} weight={'semibold'}>
CPU
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Text>
</YStack>
<Stack style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<StandartLineChart data={chartData} />
</Stack>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
CPU
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{currentLoad} GB
</Paragraph>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
<XStack space={'$4'} style={{ padding: '10px 16px' }}>
<IconText
icon={
message === 'Good' ? (

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

@ -46,11 +46,11 @@ const Dashboard = () => {
<DeviceUptime />
</YStack>
<YStack space={'$4'} width={'50%'}>
<XStack space="$4">
<XStack space="$4" width={'100%'}>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<XStack space="$4">
<XStack space="$4" width={'100%'}>
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}

15
src/pages/Dashboard/DashboardCardWrapper.tsx
View File

@ -3,13 +3,24 @@ import { Shadow } from '@status-im/components'
type DashboardCardWrapperProps = {
children: React.ReactNode
padding?: string
width: string
}
const DashboardCardWrapper = ({ children, padding = '12px 16px' }: DashboardCardWrapperProps) => {
const DashboardCardWrapper = ({
children,
padding = '12px 16px',
width,
}: DashboardCardWrapperProps) => {
return (
<Shadow
variant="$1"
style={{ flexGrow: '1', borderRadius: '16px', padding, backgroundColor: '$background' }}
style={{
flexGrow: '1',
width: width,
borderRadius: '16px',
padding,
backgroundColor: '$background',
}}
>
{children}
</Shadow>

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

@ -1,4 +1,4 @@
import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
import { Separator, Stack, XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -41,11 +41,11 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
const message = currentLoad < maxMemory ? 'Good' : 'Poor'
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="48%">
<YStack
style={{
width: '284px',
height: '136px',
width: '100%',
minHeight: '156px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -56,24 +56,25 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
style={{
padding: '8px 16px',
position: 'relative',
flexGrow: '1',
}}
>
<Stack style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<StandartLineChart data={chartData} />
</Stack>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<YStack space={'$3'} justifyContent="space-between">
<Text size={15} weight={'semibold'}>
Memory
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '10px 16px' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
>

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

@ -1,4 +1,4 @@
import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
import { Separator, Stack, XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -48,11 +48,11 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
const message = currentLoad > 60 ? 'Good' : 'Poor'
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="48%">
<YStack
style={{
width: '284px',
height: '136px',
width: '100%',
minHeight: '156px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -63,17 +63,18 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
style={{
padding: '8px 16px',
position: 'relative',
flexGrow: '1',
}}
>
<Stack style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
<StandartLineChart data={chartData} />
</Stack>
<YStack space={'$3'} width={'100%'}>
<YStack space={'$3'} width={'100%'} justifyContent="space-between">
<XStack justifyContent="space-between" width={'100%'}>
<Stack>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Network
</Paragraph>
</Text>
</Stack>
<YStack>
<Text size={11} weight={'semibold'}>
@ -84,13 +85,13 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
</Text>
</YStack>
</XStack>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 25px 16px' }}>
<Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
<XStack space={'$4'} style={{ padding: '10px 16px' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
>

38
src/pages/Dashboard/StorageCard/StorageCard.tsx
View File

@ -1,5 +1,5 @@
import { Paragraph, Separator, Stack, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { Separator, Stack, XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import { IncorrectIcon } from '@status-im/icons'
import StandardGauge from '../../../components/Charts/StandardGauge'
@ -35,11 +35,11 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
}
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="48%">
<YStack
style={{
width: '284px',
height: '136px',
width: '100%',
minHeight: '156px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -50,29 +50,31 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
style={{
padding: '8px 16px',
position: 'relative',
flexGrow: '1',
}}
>
<YStack space={'$3'} justifyContent="space-between">
<Text size={15} weight={'semibold'}>
Storage
</Text>
<Text size={27} weight={'semibold'}>
{storage} GB
</Text>
</YStack>
<Stack
style={{
position: 'absolute',
right: '44px',
width: '75px',
height: '75px',
top: '10%',
right: '1px',
width: '50%',
height: '75%',
}}
>
<StandardGauge data={data(free)} />
</Stack>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
Storage
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
{storage} GB
</Paragraph>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
<XStack space={'$4'} style={{ padding: '10px 16px' }}>
<IconText
icon={
message === 'Good' ? (

2
src/pages/Dashboard/SyncStatusCards/SyncStatusCards.tsx
View File

@ -7,7 +7,7 @@ import ConsensusCard from './ConsensusClientCard'
const SyncStatusCard = () => {
return (
<DashboardCardWrapper padding="0">
<DashboardCardWrapper padding="0" width="50%">
<YStack space={'$2'}>
<Stack style={{ paddingTop: '12px', paddingLeft: '16px' }}>
<Text size={15} weight={'semibold'}>