This commit is contained in:
Hristo Nedelkov 2023-10-18 18:11:50 +03:00
parent 556c8475b3
commit ff26094c43
8 changed files with 24 additions and 24 deletions

View File

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

View File

@ -37,8 +37,8 @@ const BalanceChartCard = () => {
} }
return ( return (
<DashboardCardWrapper minWidth={'536px'} maxHeight='300px' > <DashboardCardWrapper minWidth={'536px'} maxHeight="300px">
<YStack space={'$4'} > <YStack space={'$4'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>

View File

@ -37,7 +37,7 @@ const LineChart = ({ years, userGains }: LineChartProps) => {
} }
return ( return (
<Stack width={'100%'} height={'75%'} > <Stack width={'100%'} height={'75%'}>
<Line data={data} options={options} /> <Line data={data} options={options} />
</Stack> </Stack>
) )

View File

@ -31,7 +31,7 @@ const DashboardCardWrapper = ({
backgroundColor: '$background', backgroundColor: '$background',
minWidth: minWidth, minWidth: minWidth,
maxWidth: maxWidth, maxWidth: maxWidth,
maxHeight: maxHeight maxHeight: maxHeight,
}} }}
> >
{children} {children}

View File

@ -14,18 +14,18 @@ import SyncStatusCard from './SyncStatusCards/SyncStatusCards'
import MemoryCard from './MemoryCard/MemoryCard' import MemoryCard from './MemoryCard/MemoryCard'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
const DashboardContent = () => { const DashboardContent = () => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth); const [windowWidth, setWindowWidth] = useState(window.innerWidth)
useEffect(() => { useEffect(() => {
const handleResize = () => { const handleResize = () => {
setWindowWidth(window.innerWidth); setWindowWidth(window.innerWidth)
}; }
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize)
return () => { return () => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize)
}; }
}, []); }, [])
return ( return (
<YStack <YStack
space="$4" space="$4"
@ -41,12 +41,13 @@ const DashboardContent = () => {
> >
<TitleLogo /> <TitleLogo />
<div style={{ <div
display: 'grid', style={{
gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr', display: 'grid',
gap: '16px' gridTemplateColumns: windowWidth < 1300 ? '0.5fr' : '25fr 25fr 90fr',
}}> gap: '16px',
}}
>
<SyncStatusCard /> <SyncStatusCard />
<AddCardsContainer /> <AddCardsContainer />
@ -55,7 +56,7 @@ const DashboardContent = () => {
<BasicInfoCards /> <BasicInfoCards />
<XStack space="$3" flexWrap='wrap' > <XStack space="$3" flexWrap="wrap">
<YStack space="$4"> <YStack space="$4">
<XStack justifyContent="space-between"> <XStack justifyContent="space-between">
<ConsensusUptimeCard /> <ConsensusUptimeCard />
@ -83,4 +84,3 @@ const DashboardContent = () => {
} }
export default DashboardContent export default DashboardContent

View File

@ -28,8 +28,8 @@ const DeviceUptime = () => {
} }
return ( return (
<DashboardCardWrapper maxHeight='350px'> <DashboardCardWrapper maxHeight="350px">
<YStack space={'$3'} > <YStack space={'$3'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>
<Text size={15} weight={'semibold'}> <Text size={15} weight={'semibold'}>

View File

@ -14,7 +14,7 @@ const ExecutionUptime = () => {
minWidth: '260px', minWidth: '260px',
}} }}
> >
<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'}>
Execution Uptime Execution Uptime

View File

@ -7,7 +7,7 @@ import ConsensusCard from './ConsensusClientCard'
const SyncStatusCard = () => { const SyncStatusCard = () => {
return ( return (
<DashboardCardWrapper padding="0" minWidth='250px'> <DashboardCardWrapper padding="0" minWidth="250px">
<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'}>