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

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

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

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

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

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

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

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

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

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

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