Skip to content

Commit 304e876

Browse files
kaja-osojnikkaja-osojnik
authored
Merge pull request #2202 from oasisprotocol/kaja/uil-grids
Grid to Tailwind conversion
2 parents 2450fa7 + 2599140 commit 304e876

File tree

9 files changed

+112
-152
lines changed

9 files changed

+112
-152
lines changed

‎.changelog/2022.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Convert remaining Grids to tailwind

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { useHref, useLoaderData } from 'react-router-dom'
4-
import Grid from '@mui/material/Grid'
54
import { useGetConsensusAccountsAddress } from '../../../oasis-nexus/api'
6-
import { useScreenSize } from '../../hooks/useScreensize'
75
import { PageLayout } from '../../components/PageLayout'
86
import { AddressLoaderData } from '../../utils/route-utils'
97
import { useConsensusScope } from '../../hooks/useScopeParam'
@@ -17,7 +15,6 @@ import { eventsContainerId } from '../../utils/tabAnchors'
1715

1816
export const ConsensusAccountDetailsPage: FC = () => {
1917
const { t } = useTranslation()
20-
const { isMobile } = useScreenSize()
2118
const scope = useConsensusScope()
2219
const { network } = scope
2320
const { address } = useLoaderData() as AddressLoaderData
@@ -40,14 +37,14 @@ export const ConsensusAccountDetailsPage: FC = () => {
4037
return (
4138
<PageLayout>
4239
<ConsensusAccountDetailsCard account={account} isError={isError} isLoading={isLoading} />
43-
<Grid container spacing={4} sx={{ mb: isMobile ? 4 : 5 }}>
44-
<Grid item xs={12} lg={6}>
40+
<div className="grid grid-cols-12 gap-6 mb-6">
41+
<div className="col-span-12 lg:col-span-6">
4542
<BalanceDistribution account={account} isLoading={isLoading} />
46-
</Grid>
47-
<Grid item xs={12} lg={6}>
43+
</div>
44+
<div className="col-span-12 lg:col-span-6">
4845
<Staking account={account} isLoading={isLoading} />
49-
</Grid>
50-
</Grid>
46+
</div>
47+
</div>
5148
<RouterTabs
5249
tabs={[
5350
{ label: t('common.transactions'), to: transactionsLink },

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

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,20 @@
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'
6-
import Grid from '@mui/material/Unstable_Grid2'
7-
import { styled } from '@mui/material/styles'
85
import { Layer, Runtime } from '../../../oasis-nexus/api'
96
import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
107
import { isNotInHiddenScope, RouteUtils } from '../../utils/route-utils'
118
import { SearchScope } from '../../../types/searchScope'
129
import { EnabledRuntimePreview, DisabledRuntimePreview } from './RuntimePreview'
1310
import { Network } from '../../../types/network'
1411
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
12+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
1513

1614
function shouldIncludeLayer(network: Network, layer: Layer) {
1715
return layer !== 'consensus' && isNotInHiddenScope({ network, layer })
1816
}
1917

20-
const StyledInnerGrid = styled(Grid)(({ theme }) => ({
21-
[theme.breakpoints.down('lg')]: {
22-
paddingTop: 0,
23-
},
24-
}))
25-
26-
const StyledBox = styled(Box)(({ theme }) => ({
27-
display: 'flex',
28-
[theme.breakpoints.down('lg')]: {
29-
flexDirection: 'column',
30-
gap: theme.spacing(4),
31-
},
32-
[theme.breakpoints.up('lg')]: {
33-
flexDirection: 'row',
34-
gap: theme.spacing(5),
35-
},
36-
}))
37-
3818
type ParaTimesCardProps = { scope: SearchScope }
3919

4020
export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
@@ -57,25 +37,36 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
5737
/>
5838
</Typography>
5939
<CardContent>
60-
<Grid container spacing={5}>
61-
<Grid xs={12} lg={spaceForSecondaryParaTimes ? 5 : 6}>
40+
<div className="grid grid-cols-12 gap-4">
41+
<div className={cn('col-span-12', spaceForSecondaryParaTimes ? 'lg:col-span-5' : 'lg:col-span-6')}>
6242
<EnabledRuntimePreview prominentItem network={scope.network} runtime={firstEnabledRuntime} />
63-
</Grid>
64-
<Grid xs={12} lg={spaceForSecondaryParaTimes ? 7 : 6} container>
65-
<StyledInnerGrid xs={12} lg={spaceForSecondaryParaTimes ? 9 : 8}>
66-
<StyledBox>
67-
{!!restEnabledRuntimes.length &&
68-
restEnabledRuntimes.map(runtime => (
69-
<EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
70-
))}
71-
</StyledBox>
72-
</StyledInnerGrid>
73-
<StyledInnerGrid xs={12} lg={spaceForSecondaryParaTimes ? 3 : 4}>
74-
{!!disabledRuntimes.length &&
75-
disabledRuntimes.map(runtime => <DisabledRuntimePreview key={runtime} runtime={runtime} />)}
76-
</StyledInnerGrid>
77-
</Grid>
78-
</Grid>
43+
</div>
44+
45+
<div
46+
className={cn(
47+
'grid col-span-12 grid-cols-12 gap-x-4',
48+
spaceForSecondaryParaTimes ? 'lg:col-span-7' : 'lg:col-span-6',
49+
)}
50+
>
51+
<div
52+
className={cn('col-span-12', spaceForSecondaryParaTimes ? 'lg:col-span-9' : 'lg:col-span-6')}
53+
>
54+
<div className="flex flex-col gap-4 lg:flex-row lg:gap-5">
55+
{restEnabledRuntimes.map(runtime => (
56+
<EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
57+
))}
58+
</div>
59+
</div>
60+
61+
<div
62+
className={cn('col-span-12', spaceForSecondaryParaTimes ? 'lg:col-span-3' : 'lg:col-span-6')}
63+
>
64+
{disabledRuntimes.map(runtime => (
65+
<DisabledRuntimePreview key={runtime} runtime={runtime} />
66+
))}
67+
</div>
68+
</div>
69+
</div>
7970
</CardContent>
8071
</Card>
8172
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const StyledEnabledRuntime = styled(Box)(({ theme }) => ({
8282
borderBottom: `1px solid ${COLORS.grayMediumLight}`,
8383
},
8484
[theme.breakpoints.up('lg')]: {
85-
paddingRight: theme.spacing(5),
85+
paddingRight: theme.spacing(4),
8686
borderRight: `1px solid ${COLORS.grayMediumLight}`,
8787
},
8888
}))

‎src/app/pages/RoflAppDetailsPage/GridRow.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,9 @@
11
import { FC, ReactNode } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { styled } from '@mui/material/styles'
4-
import Grid from '@mui/material/Grid'
53
import Tooltip from '@mui/material/Tooltip'
64
import InfoIcon from '@mui/icons-material/Info'
75
import { COLORS } from '../../../styles/theme/colors'
86

9-
export const StyledGrid = styled(Grid)(({ theme }) => ({
10-
display: 'flex',
11-
gap: 3,
12-
alignContent: 'center',
13-
borderBottom: 'solid 1px #F4F5F7',
14-
paddingTop: theme.spacing(3),
15-
paddingBottom: theme.spacing(3),
16-
}))
17-
187
type GridRowProps = {
198
children?: ReactNode
209
label: string
@@ -26,17 +15,18 @@ export const GridRow: FC<GridRowProps> = ({ label, children, tooltip }) => {
2615

2716
return (
2817
<>
29-
<StyledGrid item xs={4} lg={5}>
18+
<div className="col-span-1 border-b border-gray-100 p-2 md:p-4 flex gap-1">
3019
{label}:
3120
{tooltip && (
3221
<Tooltip title={tooltip} placement="top">
3322
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
3423
</Tooltip>
3524
)}
36-
</StyledGrid>
37-
<StyledGrid item xs={8} md={7}>
25+
</div>
26+
27+
<div className="col-span-2 border-b border-gray-100 p-2 md:p-4">
3828
{children ? <strong>{children}</strong> : t('common.missing')}
39-
</StyledGrid>
29+
</div>
4030
</>
4131
)
4232
}

‎src/app/pages/RoflAppDetailsPage/MetaDataCard.tsx‎

Lines changed: 51 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Trans, useTranslation } from 'react-i18next'
33
import { styled } from '@mui/material/styles'
44
import Card from '@mui/material/Card'
55
import CardContent from '@mui/material/CardContent'
6-
import Grid from '@mui/material/Grid'
76
import Link from '@mui/material/Link'
87
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
98
import { RoflAppMetadata } from '../../../oasis-nexus/api'
@@ -38,58 +37,63 @@ export const MetaDataCard: FC<MetaDataCardProps> = ({ isFetched, metadata }) =>
3837

3938
return (
4039
<Card sx={{ flex: 1 }}>
41-
<div className="flex items-center gap-5 mb-4">
42-
<Typography variant="h3">{t('rofl.metadata')}</Typography>
43-
<Typography variant="xsmall" textColor="muted">
40+
<div className="grid grid-cols-3 mb-4 gap-2">
41+
<Typography variant="h3" className="col-span-1">
42+
{t('rofl.metadata')}
43+
</Typography>
44+
<Typography variant="xsmall" className="col-span-2 flex items-center" textColor="muted">
4445
{t('rofl.metadataInfo')}
4546
</Typography>
4647
</div>
4748
<CardContent>
4849
{isFetched && !metadata && <EmptyStateCard />}
4950
{metadata && (
50-
<>
51-
<Grid container spacing={4}>
52-
<GridRow label={t('rofl.roflName')}>{metadata['net.oasis.rofl.name']}</GridRow>
53-
<GridRow label={t('rofl.description')}>{metadata['net.oasis.rofl.description']}</GridRow>
54-
<GridRow label={t('rofl.author')}>{email ? <Email email={email} /> : undefined}</GridRow>
55-
<GridRow label={t('rofl.license')}>{metadata['net.oasis.rofl.license']}</GridRow>
56-
<GridRow label={t('rofl.homePage')}>
57-
{!homepage ? undefined : (
58-
<>
59-
{isUrlSafe(homepage) && (
60-
<StyledLink href={homepage} rel="noopener noreferrer" target="_blank">
61-
{homepage} <OpenInNewIcon sx={{ fontSize: 20 }} />
62-
</StyledLink>
63-
)}
64-
{isTwitterHandle(homepage) && <XProfileWidget handle={homepage} />}
65-
{isDiscordHandle(homepage) && <DiscordProfileWidget handle={homepage} />}
66-
</>
67-
)}
68-
</GridRow>
69-
<GridRow
70-
label={t('rofl.repositoryUrl')}
71-
tooltip={
72-
<Trans
73-
i18nKey="rofl.verifyCommand"
74-
t={t}
75-
components={{
76-
Command: <span className="font-mono">oasis rofl build --verify</span>,
77-
}}
78-
/>
79-
}
80-
>
81-
{isUrlSafe(metadata['net.oasis.rofl.repository']) ? (
82-
<StyledLink
83-
href={metadata['net.oasis.rofl.repository']}
84-
rel="noopener noreferrer"
85-
target="_blank"
86-
>
87-
{metadata['net.oasis.rofl.repository']} <OpenInNewIcon sx={{ fontSize: 20 }} />
88-
</StyledLink>
89-
) : undefined}
90-
</GridRow>
91-
</Grid>
92-
</>
51+
<div className="grid grid-cols-3">
52+
<GridRow label={t('rofl.roflName')}>{metadata['net.oasis.rofl.name']}</GridRow>
53+
54+
<GridRow label={t('rofl.description')}>{metadata['net.oasis.rofl.description']}</GridRow>
55+
56+
<GridRow label={t('rofl.author')}>{email ? <Email email={email} /> : undefined}</GridRow>
57+
58+
<GridRow label={t('rofl.license')}>{metadata['net.oasis.rofl.license']}</GridRow>
59+
60+
<GridRow label={t('rofl.homePage')}>
61+
{!homepage ? undefined : (
62+
<>
63+
{isUrlSafe(homepage) && (
64+
<StyledLink href={homepage} rel="noopener noreferrer" target="_blank">
65+
{homepage} <OpenInNewIcon className="text-base" />
66+
</StyledLink>
67+
)}
68+
{isTwitterHandle(homepage) && <XProfileWidget handle={homepage} />}
69+
{isDiscordHandle(homepage) && <DiscordProfileWidget handle={homepage} />}
70+
</>
71+
)}
72+
</GridRow>
73+
74+
<GridRow
75+
label={t('rofl.repositoryUrl')}
76+
tooltip={
77+
<Trans
78+
i18nKey="rofl.verifyCommand"
79+
t={t}
80+
components={{
81+
Command: <span className="font-mono">oasis rofl build --verify</span>,
82+
}}
83+
/>
84+
}
85+
>
86+
{isUrlSafe(metadata['net.oasis.rofl.repository']) ? (
87+
<StyledLink
88+
href={metadata['net.oasis.rofl.repository']}
89+
rel="noopener noreferrer"
90+
target="_blank"
91+
>
92+
{metadata['net.oasis.rofl.repository']} <OpenInNewIcon className="text-base" />
93+
</StyledLink>
94+
) : undefined}
95+
</GridRow>
96+
</div>
9397
)}
9498
</CardContent>
9599
</Card>

‎src/app/pages/RoflAppDetailsPage/PolicyCard.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import Card from '@mui/material/Card'
44
import CardContent from '@mui/material/CardContent'
5-
import Grid from '@mui/material/Grid'
65
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
76
import { RoflAppPolicy, Runtime, useGetRuntimeRoflAppsIdTransactions } from '../../../oasis-nexus/api'
87
import { Network } from '../../../types/network'
@@ -43,7 +42,7 @@ export const PolicyCard: FC<PolicyCardProps> = ({ id, isFetched, network, layer,
4342
{isFetched && !policy && <EmptyStateCard />}
4443
{policy && (
4544
<>
46-
<Grid container spacing={4}>
45+
<div className="grid grid-cols-3">
4746
<GridRow label={t('rofl.validity')}>
4847
{policy.quotes?.pcs?.tcb_validity_period
4948
? t('rofl.validityPeriodDays', { value: policy.quotes?.pcs?.tcb_validity_period })
@@ -80,7 +79,7 @@ export const PolicyCard: FC<PolicyCardProps> = ({ id, isFetched, network, layer,
8079
</>
8180
) : undefined}
8281
</GridRow>
83-
</Grid>
82+
</div>
8483
</>
8584
)}
8685
</CardContent>

0 commit comments

Comments
 (0)