mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-01-21 00:40:09 +00:00
add some relative measurements, remove px and add Text
This commit is contained in:
Ivana Andersson
parent
17c5b91ecf
commit
7e985d517d
@ -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>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user