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

format

This commit is contained in:
Hristo Nedelkov 2023-10-31 13:15:29 +02:00
parent 18bd49ea46
commit a88e13fcb4
11 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ const AddCardsContainer = () => {
const cards = 2 const cards = 2
return ( return (
<DashboardCardWrapper padding="0" minWidth="50px" > <DashboardCardWrapper padding="0" minWidth="50px">
<YStack height={'100%'}> <YStack height={'100%'}>
{Array.from({ length: cards }).map((_, index) => ( {Array.from({ length: cards }).map((_, index) => (
<AddCard key={index} style={{ padding: '56px', height: getHeightPercentages(cards) }} /> <AddCard key={index} style={{ padding: '56px', height: getHeightPercentages(cards) }} />

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

@ -37,7 +37,7 @@ const BalanceChartCard = () => {
} }
return ( return (
<DashboardCardWrapper minWidth={'536px'} > <DashboardCardWrapper minWidth={'536px'}>
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>

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

@ -40,7 +40,7 @@ const CPUCard = ({ load }: CPUCardProps) => {
const message = currentLoad < 80 ? 'Good' : 'Poor' const message = currentLoad < 80 ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth='200px' maxWidth='30%'> <DashboardCardWrapper padding="0" height="156px" minWidth="200px" maxWidth="30%">
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',

2
src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
View File

@ -9,7 +9,7 @@ const ConsensusUptimeCard = () => {
const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3] const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
return ( return (
<DashboardCardWrapper maxWidth='40%'> <DashboardCardWrapper maxWidth="40%">
<YStack space={'$3'}> <YStack space={'$3'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>

29
src/pages/Dashboard/DashboardContent.tsx
View File

@ -44,23 +44,25 @@ const DashboardContent = () => {
className={'transparent-scrollbar'} className={'transparent-scrollbar'}
> >
<TitleLogo /> <TitleLogo />
<Stack style={{ <Stack
display: 'grid', style={{
gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '1fr 1fr 2fr', display: 'grid',
gap: '8px', gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '1fr 1fr 2fr',
gridAutoFlow: 'row', gap: '8px',
}}> gridAutoFlow: 'row',
}}
>
<SyncStatusCard /> <SyncStatusCard />
<AddCardsContainer /> <AddCardsContainer />
{windowWidth < 1375 ? ( {windowWidth < 1375 ? (
<Stack style={{ gridColumn: '1 / span 2' }} width={'101%'}> <Stack style={{ gridColumn: '1 / span 2' }} width={'101%'}>
<BalanceChartCard /> <BalanceChartCard />
</Stack> </Stack>
) : ) : (
<Stack width={'101%'}> <Stack width={'101%'}>
<BalanceChartCard /> <BalanceChartCard />
</Stack> </Stack>
} )}
</Stack> </Stack>
<BasicInfoCards /> <BasicInfoCards />
{/* SECOND ROW ENDS HERE! */} {/* SECOND ROW ENDS HERE! */}
@ -73,31 +75,22 @@ const DashboardContent = () => {
width: '101%', width: '101%',
}} }}
> >
<ConsensusUptimeCard /> <ConsensusUptimeCard />
<ExecutionUptime /> <ExecutionUptime />
<DeviceUptime /> <DeviceUptime />
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} /> <MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard <NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]} downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]} uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/> />
</Stack> </Stack>
</YStack>
</YStack >
) )
} }

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

@ -28,7 +28,7 @@ const DeviceUptime = () => {
} }
return ( return (
<DashboardCardWrapper maxWidth='70%' > <DashboardCardWrapper maxWidth="70%">
<YStack space={'$3'}> <YStack space={'$3'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>

10
src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
View File

@ -8,7 +8,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
const ExecutionUptime = () => { const ExecutionUptime = () => {
const monthlyActivity = [3, 0, 5, 4, 6, 7, 0, 9, 10, 1, 2, 3] const monthlyActivity = [3, 0, 5, 4, 6, 7, 0, 9, 10, 1, 2, 3]
return ( return (
<DashboardCardWrapper maxWidth='40%' > <DashboardCardWrapper maxWidth="40%">
<YStack space={'$3'} minHeight={'156px'} padding={'$3'}> <YStack space={'$3'} minHeight={'156px'} padding={'$3'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>
@ -35,10 +35,10 @@ const ExecutionUptime = () => {
}} }}
> >
<UptimeChart <UptimeChart
startMonth={0} startMonth={0}
endMonth={3} endMonth={3}
monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1, 6, 3, 1, 9]} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1, 6, 3, 1, 9]}
withLabels={true} withLabels={true}
/> />
</Stack> </Stack>
</XStack> </XStack>

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

@ -42,7 +42,7 @@ const MemoryCard = ({ currentMemory, maxMemory }: MemoryCardProps) => {
const message = currentLoad < maxMemory ? 'Good' : 'Poor' const message = currentLoad < maxMemory ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth='200px' maxWidth='30%'> <DashboardCardWrapper padding="0" height="156px" minWidth="200px" maxWidth="30%">
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',

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

@ -48,7 +48,7 @@ const NetworkCard = ({ uploadRate, downloadRate }: NetworkCardProps) => {
const message = currentLoad > 60 ? 'Good' : 'Poor' const message = currentLoad > 60 ? 'Good' : 'Poor'
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth='200px' maxWidth='30%'> <DashboardCardWrapper padding="0" height="156px" minWidth="200px" maxWidth="30%">
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',

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

@ -35,7 +35,7 @@ const StorageCard = ({ storage, maxStorage }: StorageCardProps) => {
} }
return ( return (
<DashboardCardWrapper padding="0" height={'156px'} minWidth='200px' maxWidth='30%' > <DashboardCardWrapper padding="0" height={'156px'} minWidth="200px" maxWidth="30%">
<YStack <YStack
style={{ style={{
borderRadius: '16px', borderRadius: '16px',

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

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