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
return (
<DashboardCardWrapper padding="0" minWidth='150px'>
<DashboardCardWrapper padding="0" minWidth="150px">
<YStack height={'100%'}>
{Array.from({ length: cards }).map(() => (
<AddCard style={{ padding: '56px', height: getHeightPercentages(cards) }} />

View File

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

View File

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

View File

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

View File

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

View File

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