status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

add some relative measurements, remove px and add Text

Browse Source
This commit is contained in:
Ivana Andersson 2023-09-01 14:08:17 +03:00
parent 17c5b91ecf
commit 7e985d517d
6 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Charts/DeviceCPULoad.tsx
View File

@ -1,6 +1,6 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -38,8 +38,8 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -49,7 +49,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -57,16 +57,16 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
CPU
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
@ -74,7 +74,7 @@ const DeviceCPULoad: React.FC<DeviceCPULoadProps> = ({ load }) => {
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / 80) * 100).toFixed(0)}% Utilization
</Text>
)}

21
src/components/Charts/DeviceMemoryHealth.tsx
View File

@ -1,7 +1,7 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow as ShadowBox, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -42,8 +42,8 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<ShadowBox
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -53,7 +53,7 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -61,23 +61,24 @@ const DeviceMemoryHealth = ({ currentMemory, maxMemory }: DeviceMemoryHealthProp
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<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'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / maxMemory || 0) * 100).toFixed(0)}% Utilization
</Text>
)}

21
src/components/Charts/DeviceNetworkHealth.tsx
View File

@ -1,6 +1,6 @@
import StandartLineChart from './StandardLineChart'
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import { Shadow as ShadowBox, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -47,8 +47,8 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<ShadowBox
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -58,7 +58,7 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
@ -66,23 +66,24 @@ const DeviceNetworkHealth = ({ uploadRate, downloadRate }: DeviceNetworkHealthPr
<StandartLineChart data={chartData} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Network
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{currentLoad} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
>
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{((currentLoad / 60) * 100).toFixed(0)}% Utilization
</Text>
)}

26
src/components/Charts/DeviceStorageHealth.tsx
View File

@ -1,5 +1,5 @@
import IconText from '../General/IconText'
import { Paragraph, Separator, XStack, YStack } from 'tamagui'
import { Separator, XStack, YStack } from 'tamagui'
import StandardGauge from './StandardGauge'
import { Shadow, Text } from '@status-im/components'
import { CheckCircleIcon, IncorrectIcon } from '@status-im/icons'
@ -33,8 +33,8 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<Shadow
variant="$2"
style={{
width: '284px',
height: '136px',
width: '50%',
minHeight: '135px',
borderRadius: '16px',
border: message === 'Poor' ? '1px solid #D92344' : 'none',
backgroundColor: message === 'Poor' ? '#fefafa' : '#fff',
@ -44,31 +44,31 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
<XStack
justifyContent="space-between"
style={{
padding: '8px 16px',
padding: '0.75rem 1rem',
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
right: '44px',
width: '75px',
height: '75px',
right: '33px',
width: '4.75rem',
height: '4.75rem',
}}
>
<StandardGauge data={data(free)} />
</div>
<YStack space={'$3'}>
<Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
<Text size={15} weight={'semibold'}>
Storage
</Paragraph>
<Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
</Text>
<Text size={27} weight={'semibold'}>
{storage} GB
</Paragraph>
</Text>
</YStack>
</XStack>
<Separator borderColor={'#e3e3e3'} />
<XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
<XStack space={'$4'} style={{ padding: '0.65rem 1rem' }}>
<IconText
icon={message === 'Good' ? <CheckCircleIcon size={16} /> : <IncorrectIcon size={16} />}
weight={'semibold'}
@ -76,7 +76,7 @@ const DeviceStorageHealth: React.FC<DeviceStorageHealthProps> = ({ storage, maxS
{message}
</IconText>
{message === 'Poor' && (
<Text size={13} color="#E95460">
<Text size={13} color={'#E95460'} weight={'semibold'}>
{utilization.toFixed(0)}% Utilization
</Text>
)}

2
src/components/General/IconText.tsx
View File

@ -17,7 +17,7 @@ const IconText = ({ icon, children, weight }: IconTextProps) => {
space={'$2'}
>
{icon}
<Text size={13} color={'#000000'} weight={weight}>
<Text size={13} color={'#09101C'} weight={weight}>
{children}
</Text>
</XStack>

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

@ -33,14 +33,14 @@ const DeviceHealthCheck = () => {
subtitle="Configure your device to start Staking on Nimbus"
isAdvancedSettings={true}
/>
<XStack space={'$4'}>
<XStack space={'$4'} width={'100%'}>
<DeviceStorageHealth
storage={deviceHealthState.storage}
maxStorage={deviceHealthState.maxMemory}
/>
<DeviceCPULoad load={deviceHealthState.cpuLoad} />
</XStack>
<XStack space={'$4'}>
<XStack space={'$4'} width={'100%'}>
<DeviceMemory
currentMemory={deviceHealthState.memory}
maxMemory={deviceHealthState.maxMemory}