Skip to content

Commit bd2a871

Browse files
kaja-osojnikkaja-osojnik
committed
Update Boxes on Consensus pages
1 parent cddaf7f commit bd2a871

6 files changed

Lines changed: 40 additions & 137 deletions

File tree

‎src/app/components/ConsensusEvents/ConsensusEventsList.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import Box from '@mui/material/Box'
43
import { ConsensusScope } from '../../../types/searchScope'
54
import { ConsensusEvent } from '../../../oasis-nexus/api'
65
import { TablePagination, TablePaginationProps } from '../Table/TablePagination'
@@ -55,9 +54,9 @@ export const ConsensusEventsList: FC<{
5554
</div>
5655
))}
5756
{pagination && (
58-
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
57+
<div className="flex justify-center">
5958
<TablePagination {...pagination} />
60-
</Box>
59+
</div>
6160
)}
6261
</>
6362
)

‎src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import Box from '@mui/material/Box'
43
import Card from '@mui/material/Card'
54
import CardContent from '@mui/material/CardContent'
65
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
@@ -74,7 +73,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
7473
value: totalValue,
7574
})}
7675
</Typography>
77-
<Box sx={{ height: isMobile ? '100px' : '250px' }}>
76+
<div className="h-[100px] md:h-[250px]">
7877
<PieChart
7978
compact={isMobile}
8079
data={data}
@@ -88,7 +87,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
8887
label: (label: string) => label,
8988
}}
9089
/>
91-
</Box>
90+
</div>
9291
</>
9392
)
9493
}

‎src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { ConsensusAccountDetailsContext } from './hooks'
77
import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
88
import { useScreenSize } from '../../hooks/useScreensize'
99
import { ConsensusTransactionMethodFilter } from '../../components/Transactions/ConsensusTransactionMethodFilter'
10-
import Box from '@mui/material/Box'
1110
import { transactionsContainerId } from '../../utils/tabAnchors'
1211

1312
export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext> = context => {
@@ -18,14 +17,9 @@ export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext
1817
<LinkableCardLayout
1918
containerId={transactionsContainerId}
2019
title={
21-
<Box
22-
sx={{
23-
display: 'flex',
24-
justifyContent: 'end',
25-
}}
26-
>
20+
<div className="flex justify-end">
2721
{!isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} />}
28-
</Box>
22+
</div>
2923
}
3024
>
3125
{isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} expand />}

‎src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
getConsensusTransactionMethodFilteringParam,
1515
ConsensusTxMethodFilterOption,
1616
} from '../../components/ConsensusTransactionMethod'
17-
import Box from '@mui/material/Box'
1817
import { transactionsContainerId } from '../../utils/tabAnchors'
1918

2019
const TransactionList: FC<{
@@ -66,14 +65,9 @@ export const ConsensusBlockTransactionsCard: FC<ConsensusBlockDetailsContext> =
6665
<LinkableCardLayout
6766
containerId={transactionsContainerId}
6867
title={
69-
<Box
70-
sx={{
71-
display: 'flex',
72-
justifyContent: 'end',
73-
}}
74-
>
68+
<div className="flex justify-end">
7569
{!isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} />}
76-
</Box>
70+
</div>
7771
}
7872
>
7973
{isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} expand />}

‎src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx‎

Lines changed: 28 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { FC, ReactNode, useState } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
4-
import Box from '@mui/material/Box'
54
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
6-
import Link from '@mui/material/Link'
7-
import Typography from '@mui/material/Typography'
5+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
6+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
87
import { styled } from '@mui/material/styles'
98
import FilterNoneIcon from '@mui/icons-material/FilterNone'
109
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
@@ -38,55 +37,6 @@ const StyledList = styled(InlineDescriptionList)(({ theme }) => ({
3837
},
3938
}))
4039

41-
const StyledBox = styled(Box)(() => ({
42-
border: `2px solid ${COLORS.brandDark}`,
43-
borderRadius: '12px',
44-
height: '180px',
45-
display: 'flex',
46-
flex: 1,
47-
justifyContent: 'center',
48-
alignItems: 'center',
49-
boxShadow: '0px 34px 24px -9px #324DAB1F',
50-
overflow: 'hidden',
51-
}))
52-
53-
const StyledTypography = styled(Typography)(() => ({
54-
fontSize: '18px',
55-
fontWeight: 700,
56-
color: COLORS.brandDark,
57-
flex: 1,
58-
minHeight: '44px',
59-
display: 'flex',
60-
alignItems: 'center',
61-
}))
62-
63-
const StyledDisabledRuntime = styled(Box)(({ theme }) => ({
64-
display: 'flex',
65-
gap: 3,
66-
paddingTop: theme.spacing(3),
67-
flexDirection: 'row',
68-
alignItems: 'center',
69-
[theme.breakpoints.between('md', 'xl')]: {
70-
flexDirection: 'column',
71-
alignItems: 'flex-start',
72-
},
73-
}))
74-
75-
const StyledEnabledRuntime = styled(Box)(({ theme }) => ({
76-
flex: 1,
77-
height: '100%',
78-
paddingTop: theme.spacing(3),
79-
paddingBottom: theme.spacing(3),
80-
[theme.breakpoints.down('lg')]: {
81-
paddingBottom: theme.spacing(5),
82-
borderBottom: `1px solid ${COLORS.grayMediumLight}`,
83-
},
84-
[theme.breakpoints.up('lg')]: {
85-
paddingRight: theme.spacing(4),
86-
borderRight: `1px solid ${COLORS.grayMediumLight}`,
87-
},
88-
}))
89-
9040
type RuntimeProps = {
9141
prominentItem?: boolean
9242
network: Network
@@ -134,12 +84,14 @@ export const DisabledRuntimePreview: FC<DisabledRuntimePreviewProps> = ({ runtim
13484
const runtimeLabel = layerLabels[runtime]
13585

13686
return (
137-
<StyledDisabledRuntime>
138-
<StyledTypography>{runtimeLabel}</StyledTypography>
139-
<Box>
87+
<div className="flex gap-2 flex-row items-center pt-2 lg:pt-0">
88+
<Typography className="text-base font-semibold text-primary flex items-center flex-1 min-h-[44px]">
89+
{runtimeLabel}
90+
</Typography>
91+
<div>
14092
<Badge variant="info">{t('paratimes.inactive')}</Badge>
141-
</Box>
142-
</StyledDisabledRuntime>
93+
</div>
94+
</div>
14395
)
14496
}
14597

@@ -161,28 +113,28 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
161113
const dashboardLink = RouteUtils.getDashboardRoute({ network, layer: runtime })
162114
const runtimeStatus = status ? (status.outOfDate ? 'outdated' : 'stable') : 'inactive'
163115
return (
164-
<StyledEnabledRuntime>
165-
<Box sx={{ marginBottom: 4 }}>
166-
<StyledTypography>
116+
<div className="flex-1 h-full pb-6 border-b border-gray-200 lg:p-0 lg:pr-4 lg:border-b-0 lg:border-r">
117+
<div className="mb-4">
118+
<Typography className="text-base font-semibold text-primary flex items-center flex-1 min-h-[44px]">
167119
{status ? (
168120
<>
169-
<Link component={RouterLink} to={dashboardLink}>
170-
{runtimeLabel}
121+
<Link asChild >
122+
<RouterLink to={dashboardLink}>{runtimeLabel}</RouterLink>
171123
</Link>
172124
<RouterLinkCircle to={dashboardLink} />
173125
</>
174126
) : (
175127
<>{runtimeLabel}</>
176128
)}
177-
</StyledTypography>
178-
</Box>
129+
</Typography>
130+
</div>
179131
<StyledList>
180132
<dt>{t('common.status')}:</dt>
181133
<dd>
182-
<Box>
134+
<div>
183135
{runtimeStatus === 'stable' && <Badge variant="success">{t('common.online')}</Badge>}
184136
{runtimeStatus === 'outdated' && <Badge variant="error">{t('paratimes.outdated')}</Badge>}
185-
</Box>
137+
</div>
186138
</dd>
187139
<dt>{t('paratimes.blockNumber')}</dt>
188140
<dd>
@@ -201,7 +153,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
201153
<dt>{t('paratimes.nodes')} </dt>
202154
<dd>{status?.activeNodes ? t('paratimes.activeNodes', { nodes: status?.activeNodes }) : '-'} </dd>
203155
</StyledList>
204-
<Box sx={{ display: 'flex', gap: 3 }}>
156+
<div className="flex gap-2">
205157
<ChartsContainer status={status}>
206158
{panel === 'transactions' && (
207159
<TransactionsChartCard
@@ -233,9 +185,9 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
233185
/>
234186
</ChartsContainer>
235187
)}
236-
</Box>
188+
</div>
237189
{!prominentItem && (
238-
<Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
190+
<div className="flex justify-center pt-2">
239191
{status && (
240192
<>
241193
<PanelButton
@@ -252,9 +204,9 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
252204
/>
253205
</>
254206
)}
255-
</Box>
207+
</div>
256208
)}
257-
</StyledEnabledRuntime>
209+
</div>
258210
)
259211
}
260212

@@ -296,16 +248,16 @@ const ChartsContainer: FC<ChartsContainerProps> = ({ children, status }) => {
296248
const { t } = useTranslation()
297249

298250
return (
299-
<StyledBox>
300-
<Box gap={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
301-
{status && <Box sx={{ width: '100%' }}>{children}</Box>}
251+
<div className="flex flex-1 items-center justify-center h-[180px] border-1 border-gray-200 rounded-md overflow-hidden">
252+
<div className="flex flex-1 flex-col items-center gap-2">
253+
{status && <div className="w-full">{children}</div>}
302254
{!status && (
303255
<>
304256
<FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
305257
{t('paratimes.noData')}
306258
</>
307259
)}
308-
</Box>
309-
</StyledBox>
260+
</div>
261+
</div>
310262
)
311263
}

‎src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx‎

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { FC } from 'react'
2-
import { Trans, useTranslation } from 'react-i18next'
3-
import Box from '@mui/material/Box'
4-
import Typography from '@mui/material/Typography'
5-
import { COLORS } from '../../../styles/theme/colors'
2+
import { useTranslation } from 'react-i18next'
63
import { Ticker } from '../../../types/ticker'
74
import { RoundedBalance } from '../../components/RoundedBalance'
85
import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
@@ -14,45 +11,13 @@ type SnapshotStakedProps = {
1411

1512
export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker }) => {
1613
const { t } = useTranslation()
17-
// TODO: provide totalCirculation
18-
const percentageValue = undefined
1914

2015
return (
21-
<SnapshotTextCard
22-
title={t('common.staked')}
23-
label={
24-
percentageValue !== undefined && (
25-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
26-
<Typography sx={{ fontSize: 12, color: COLORS.grayMedium }}>
27-
<Trans
28-
t={t}
29-
i18nKey="consensusSnapshot.totalCirculation"
30-
components={{
31-
StakedPercentage: (
32-
<Typography component="span" sx={{ fontSize: '24px', color: COLORS.grayExtraDark }}>
33-
{t('common.valuePair', {
34-
value: percentageValue,
35-
formatParams: {
36-
value: {
37-
style: 'percent',
38-
maximumFractionDigits: 2,
39-
} satisfies Intl.NumberFormatOptions,
40-
},
41-
})}
42-
</Typography>
43-
),
44-
}}
45-
/>
46-
</Typography>
47-
</Box>
48-
)
49-
}
50-
alignWithCardsWithActions
51-
>
16+
<SnapshotTextCard title={t('common.staked')} alignWithCardsWithActions>
5217
{totalStaked && (
53-
<Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
18+
<div className="break-all leading-none">
5419
<RoundedBalance value={totalStaked} ticker={ticker} compactLargeNumbers />
55-
</Box>
20+
</div>
5621
)}
5722
</SnapshotTextCard>
5823
)

0 commit comments

Comments
 (0)