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

fix(dashboard top row): make top row responsive

This commit is contained in:
Hristo Nedelkov 2024-03-22 10:57:12 +02:00 committed by Emil Ivanichkov
parent ccd69cfabe
commit 9dd3854245
5 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import DashboardCardWrapper from '../DashboardCardWrapper'
const ActiveValidators = () => { const ActiveValidators = () => {
return ( return (
<DashboardCardWrapper padding="0" height="156px" minWidth="200px"> <DashboardCardWrapper padding="0" height="156px" minWidth="250px" >
<img <img
src="/images/validators-count.png" src="/images/validators-count.png"
alt="" alt=""

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

@ -41,7 +41,7 @@ const BalanceChartCard = () => {
} }
return ( return (
<DashboardCardWrapper minWidth={'536px'}> <DashboardCardWrapper minWidth={'436px'} width="100%">
<YStack space={'$4'}> <YStack space={'$4'}>
<XStack justifyContent={'space-between'}> <XStack justifyContent={'space-between'}>
<YStack> <YStack>

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

@ -6,7 +6,7 @@ import DoughnutChartHalf from '../../../components/Charts/HalfDoughnutWithGradie
const ConnectedPeers = () => { const ConnectedPeers = () => {
return ( return (
<DashboardCardWrapper padding="0" height="156ppx" minWidth="200px"> <DashboardCardWrapper padding="0" height="156ppx" minWidth="250px">
<YStack height={'100%'}> <YStack height={'100%'}>
<Stack <Stack
style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }} style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }}

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

@ -11,7 +11,7 @@ const Dashboard = () => {
<XStack style={{ height: '100vh' }}> <XStack style={{ height: '100vh' }}>
<LeftSidebar /> <LeftSidebar />
<DashboardContent /> <DashboardContent />
{width > 900 && <RightSideBar />} {width > 1200 && <RightSideBar />}
</XStack> </XStack>
) )
} }

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

@ -37,19 +37,21 @@ const DashboardContent = () => {
<Stack <Stack
style={{ style={{
display: 'grid', display: 'grid',
gridTemplateColumns: width < 1375 ? '1fr 1fr' : '2fr 1fr 1fr', gridTemplateColumns: width < 1400 ? '1fr' : '1fr 1fr',
gap: '8px', gap: '8px',
gridAutoFlow: 'row', gridAutoFlow: 'row',
width: '100%', width: '100%',
}} }}
> >
<BalanceChartCard /> {width >= 1400 && <BalanceChartCard />}
<SyncStatusCards /> <XStack space="$3" >
{/* <AddCardsContainer cardsAmount={2} /> */} <SyncStatusCards />
<YStack space="$2"> <YStack space="$3" flexWrap="wrap">
<ActiveValidators></ActiveValidators> <ActiveValidators></ActiveValidators>
<ConnectedPeers></ConnectedPeers> <ConnectedPeers></ConnectedPeers>
</YStack> </YStack>
</XStack>
{width < 1400 && <BalanceChartCard />}
</Stack> </Stack>
<BasicInfoCards /> <BasicInfoCards />