Skip to content

Commit 2599140

Browse files
kaja-osojnikkaja-osojnik
committed
Rofl app details grid
1 parent 3bff8eb commit 2599140

File tree

5 files changed

+68
-91
lines changed

5 files changed

+68
-91
lines changed

‎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>

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

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import { FC, ReactNode } from 'react'
22
import { useHref, useLoaderData } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
4-
import Box from '@mui/material/Box'
5-
import Grid from '@mui/material/Grid'
64
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
75
import Tooltip from '@mui/material/Tooltip'
86
import Typography from '@mui/material/Typography'
97
import InfoIcon from '@mui/icons-material/Info'
10-
import { styled } from '@mui/material/styles'
118
import { RoflApp, RoflAppPolicy, RuntimeTransaction, useGetRuntimeRoflAppsId } from '../../../oasis-nexus/api'
129
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
1310
import { AppErrors } from '../../../types/errors'
@@ -80,11 +77,11 @@ export const RoflAppDetailsPage: FC = () => {
8077
>
8178
<RoflAppDetailsView isLoading={isLoading} app={roflApp} />
8279
</SubPageCard>
83-
<Grid container spacing={4}>
84-
<StyledGrid item xs={12} lg={6}>
80+
<div className="grid grid-cols-12 gap-x-6">
81+
<div className="col-span-12 lg:col-span-6 flex">
8582
<MetaDataCard isFetched={isFetched} metadata={roflApp?.metadata} />
86-
</StyledGrid>
87-
<StyledGrid item xs={12} lg={6}>
83+
</div>
84+
<div className="col-span-12 lg:col-span-6 flex">
8885
{roflApp && (
8986
<PolicyCard
9087
id={roflApp?.id}
@@ -94,8 +91,8 @@ export const RoflAppDetailsPage: FC = () => {
9491
policy={roflApp?.policy}
9592
/>
9693
)}
97-
</StyledGrid>
98-
</Grid>
94+
</div>
95+
</div>
9996
<RouterTabs
10097
tabs={[
10198
{ label: t('common.transactions'), to: txLink },
@@ -111,12 +108,6 @@ export const RoflAppDetailsPage: FC = () => {
111108
)
112109
}
113110

114-
export const StyledGrid = styled(Grid)(({ theme }) => ({
115-
[theme.breakpoints.up('sm')]: {
116-
display: 'flex',
117-
},
118-
}))
119-
120111
export const RoflAppDetailsView: FC<{
121112
isLoading?: boolean
122113
app: RoflApp | undefined
@@ -158,27 +149,21 @@ export const RoflAppDetailsView: FC<{
158149
transaction={app.last_activity_tx}
159150
/>
160151
<DetailsRow title={t('rofl.endorsement')}>
161-
<Box
162-
sx={{
163-
flex: 1,
164-
display: 'flex',
165-
flexDirection: 'column',
166-
}}
167-
>
152+
<div className="flex flex-1 flex-col">
168153
<Endorsement
169154
endorsements={app.policy.endorsements}
170155
groupOp={'or'} // We have an implicit default "or" for toplevel endorsement
171156
/>
172-
</Box>
157+
</div>
173158
</DetailsRow>
174159
<DetailsRow
175160
title={
176-
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
161+
<div className="flex items-center gap-4">
177162
{t('rofl.secrets')}
178163
<Tooltip title={t('rofl.secretsTooltip')} placement="top">
179164
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
180165
</Tooltip>
181-
</Box>
166+
</div>
182167
}
183168
>
184169
<Secrets secrets={app.secrets} />

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useHref, useLoaderData } from 'react-router-dom'
55
import Box from '@mui/material/Box'
66
import Card from '@mui/material/Card'
77
import CardContent from '@mui/material/CardContent'
8-
import Grid from '@mui/material/Grid'
98
import {
109
Validator,
1110
ValidatorAggStats,

0 commit comments

Comments
 (0)