Skip to content

Commit 1d8748d

Browse files
kaja-osojnikkaja-osojnik
committed
Convert styled MUI to tailwind
1 parent f274312 commit 1d8748d

File tree

16 files changed

+116
-239
lines changed

16 files changed

+116
-239
lines changed

‎src/app/components/Account/ConsensusAccountDetailsView.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Account } from '../../../oasis-nexus/api'
55
import { TextSkeleton } from '../Skeleton'
66
import { StyledDescriptionList, StyledListTitleWithAvatar } from '../StyledDescriptionList'
77
import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
8-
import { styled } from '@mui/material/styles'
98
import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp'
109
import { AccountAvatar } from '../AccountAvatar'
1110
import { AccountSizeBadge } from '../AccountSizeBadge'
@@ -18,10 +17,6 @@ import { transactionsContainerId } from '../../utils/tabAnchors'
1817
import { RoundedBalance } from '../RoundedBalance'
1918
import { BalancesOnOtherLayers } from './BalancesOnOtherLayers'
2019

21-
export const StyledListTitle = styled('dt')(({ theme }) => ({
22-
marginLeft: theme.spacing(4),
23-
}))
24-
2520
type ConsensusAccountDetailsViewProps = {
2621
account?: Account
2722
isError?: boolean
@@ -93,21 +88,21 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
9388
<RoundedBalance value={account.total} ticker={account.ticker} />
9489
</div>
9590
</dd>
96-
<StyledListTitle>{t('account.available')}</StyledListTitle>
91+
<dt className="ml-4">{t('account.available')}</dt>
9792
<dd>
9893
<div className="text-right">
9994
{longestBalanceWidth}
10095
<RoundedBalance value={account.available} ticker={account.ticker} />
10196
</div>
10297
</dd>
103-
<StyledListTitle>{t('common.staked')}</StyledListTitle>
98+
<dt className="ml-4">{t('common.staked')}</dt>
10499
<dd>
105100
<div className="text-right">
106101
{longestBalanceWidth}
107102
<RoundedBalance value={account.delegations_balance} ticker={account.ticker} />
108103
</div>
109104
</dd>
110-
<StyledListTitle>{t('account.debonding')}</StyledListTitle>
105+
<dt className="ml-4">{t('account.debonding')}</dt>
111106
<dd>
112107
<div className="text-right">
113108
{longestBalanceWidth}

‎src/app/components/Account/ShowMoreTokensLink.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
import { FC } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
3+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
34
import { useTranslation } from 'react-i18next'
4-
import { styled } from '@mui/material/styles'
5-
import { COLORS } from '../../../styles/theme/colors'
65
import { EvmTokenType, RuntimeAccount, type Token } from '../../../oasis-nexus/api'
76
import { RouteUtils } from '../../utils/route-utils'
87
import { tokenContainerId } from '../../utils/tabAnchors'
98

10-
export const StyledLink = styled(RouterLink)(({ theme }) => ({
11-
color: COLORS.brandDark,
12-
fontWeight: 700,
13-
textDecoration: 'none',
14-
whiteSpace: 'nowrap',
15-
marginLeft: theme.spacing(4),
16-
}))
17-
189
type ShowMoreTokensLinkProps = {
1910
account: RuntimeAccount
2011
tokens: Token[]
@@ -49,8 +40,10 @@ export const ShowMoreTokensLink: FC<ShowMoreTokensLinkProps> = ({ account, token
4940
const targetShowMoreLink = hasERC20 ? erc20link : erc721Link
5041

5142
return (
52-
<StyledLink to={targetShowMoreLink} color="inherit">
53-
{t('account.showMore', { counter: additionalTokensCounter })}
54-
</StyledLink>
43+
<Link asChild className="ml-4 font-medium">
44+
<RouterLink to={targetShowMoreLink}>
45+
{t('account.showMore', { counter: additionalTokensCounter })}
46+
</RouterLink>
47+
</Link>
5548
)
5649
}

‎src/app/components/ImagePreview/index.tsx‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { Button } from '@mui/base/Button'
4-
import { styled } from '@mui/material/styles'
3+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
54
import { ImagePreviewDialog } from '@oasisprotocol/ui-library/src/components/dialog'
6-
7-
const StyledThumbnail = styled('img', {
8-
shouldForwardProp: prop => prop !== 'maxThumbnailSize',
9-
})<{ maxThumbnailSize: string }>(({ maxThumbnailSize }) => ({
10-
maxWidth: maxThumbnailSize,
11-
maxHeight: maxThumbnailSize,
12-
}))
13-
14-
const StyledButton = styled(Button)({
15-
cursor: 'pointer',
16-
border: 'none',
17-
background: 'none',
18-
})
19-
205
type ImagePreviewProps = {
216
handlePreviewClose: () => void
227
handlePreviewOpen: () => void
@@ -42,9 +27,17 @@ export const ImagePreview: FC<ImagePreviewProps> = ({
4227
return (
4328
<>
4429
<div>
45-
<StyledButton onClick={handlePreviewOpen}>
46-
<StyledThumbnail onError={onError} src={src} alt={label} maxThumbnailSize={maxThumbnailSize} />
47-
</StyledButton>
30+
<Button variant="ghost" onClick={handlePreviewOpen} className="p-0 h-auto w-auto">
31+
<img
32+
onError={onError}
33+
src={src}
34+
alt={label}
35+
style={{
36+
maxWidth: maxThumbnailSize,
37+
maxHeight: maxThumbnailSize,
38+
}}
39+
/>
40+
</Button>
4841
</div>
4942
<ImagePreviewDialog open={previewOpen} onClose={handlePreviewClose} src={src} title={title} />
5043
</>

‎src/app/components/LayerPicker/LayerDetails.tsx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
55
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
66
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
77
import { Link } from '@oasisprotocol/ui-library/src/components/link'
8-
import { styled } from '@mui/material/styles'
9-
import { COLORS } from '../../../styles/theme/colors'
108
import { Network, getNetworkNames } from '../../../types/network'
119
import { Layer } from '../../../oasis-nexus/api'
1210
import { Link as RouterLink } from 'react-router-dom'
@@ -96,20 +94,6 @@ const getDetails = (t: TFunction): Details => ({
9694
},
9795
})
9896

99-
export const StyledButton = styled(Button)(({ theme }) => ({
100-
height: 30,
101-
paddingLeft: 0,
102-
marginRight: theme.spacing(3),
103-
fontSize: 24,
104-
color: COLORS.brandDark,
105-
fontWeight: 700,
106-
'&&:hover, &&:active, &&:focus-visible': {
107-
color: COLORS.brandDark,
108-
textDecoration: 'none',
109-
borderRadius: 0,
110-
},
111-
}))
112-
11397
type LayerDetailsProps<Scope = SearchScope> = {
11498
handleConfirm: () => void
11599
selectedScope: Scope

‎src/app/components/OptionalBreak/index.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
import { styled } from '@mui/material/styles'
1+
import { FC, ReactNode } from 'react'
22

3-
/** Makes this the preferred line break point with inline-block. */
4-
export const OptionalBreak = styled('span')({
5-
display: 'inline-block',
6-
})
3+
type OptionalBreakProps = {
4+
children?: ReactNode
5+
}
6+
7+
export const OptionalBreak: FC<OptionalBreakProps> = ({ children }) => (
8+
<span className="inline-block">{children}</span>
9+
)

‎src/app/components/StyledDescriptionList/index.tsx‎

Lines changed: 21 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { styled } from '@mui/material/styles'
2-
import { COLORS } from '../../../styles/theme/colors'
31
import { backgroundColorAnimation } from '../../../styles/theme/animations'
42
import { FC, HTMLAttributes } from 'react'
53
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -18,57 +16,29 @@ export const InlineDescriptionList: FC<InlineDescriptionListProps> = ({ classNam
1816
)
1917
}
2018

21-
interface StyledDescriptionListProps {
19+
interface StyledDescriptionListProps extends HTMLAttributes<HTMLDListElement> {
2220
standalone?: boolean
2321
highlight?: boolean
2422
}
2523

26-
export const StyledDescriptionList = styled(InlineDescriptionList, {
27-
shouldForwardProp: prop => prop !== 'standalone' && prop !== 'highlight',
28-
})<StyledDescriptionListProps>(({ theme, standalone, highlight }) => ({
29-
'dt, dd': {
30-
display: 'flex',
31-
flexWrap: 'wrap',
32-
boxShadow: `0px 1px 0px ${COLORS.grayLight}`,
33-
':last-of-type': {
34-
boxShadow: 'none',
35-
},
36-
[theme.breakpoints.down('sm')]: {
37-
padding: theme.spacing(3, 0),
38-
},
39-
[theme.breakpoints.up('sm')]: {
40-
padding: theme.spacing(4, 0),
41-
},
42-
},
43-
dt: {
44-
color: COLORS.grayDark,
45-
alignItems: 'start',
46-
},
47-
dd: {
48-
overflowWrap: 'anywhere',
49-
alignItems: 'center',
50-
maxWidth: '100%',
51-
overflowX: 'hidden',
52-
paddingLeft: '5px', // Needed to fix highlightedAddress being clipped by overflow-x: hidden
53-
},
54-
...(standalone && {
55-
'&&': {
56-
padding: theme.spacing(3, 4),
57-
backgroundColor: COLORS.white,
58-
marginBottom: theme.spacing(4),
59-
borderRadius: '6px',
60-
},
61-
}),
62-
...(highlight && backgroundColorAnimation),
63-
}))
24+
export const StyledDescriptionList: FC<StyledDescriptionListProps> = ({
25+
className,
26+
standalone,
27+
highlight,
28+
...props
29+
}) => (
30+
<dl
31+
className={cn(
32+
'm-0 grid grid-cols-[100px_auto] sm:grid-cols-[200px_auto] [&_dd]:m-0 [&_dt]:flex [&_dd]:flex [&_dt]:flex-wrap [&_dd]:flex-wrap [&_dt]:items-start [&_dd]:items-center [&_dt]:border-b [&_dd]:border-b border-foreground-muted [&_dt]:py-2 [&_dd]:py-2 sm:[&_dt]:py-4 sm:[&_dd]:py-4 [&_dd]:overflow-hidden [&_dd]:overflow-x-hidden [&_dd]:max-w-full [&_dd]:break-words [&_dd]:pl-1 [&_dd:last-of-type]:border-b-0 [&_dt:last-of-type]:border-b-0',
33+
standalone && 'py-2 px-4 mb-4 rounded-md border',
34+
highlight && 'animate-[flash_3.5s_ease-in-out_1]',
35+
className,
36+
)}
37+
style={highlight ? backgroundColorAnimation : undefined}
38+
{...props}
39+
/>
40+
)
6441

65-
export const StyledListTitleWithAvatar = styled('dt')(({ theme }) => ({
66-
'&&': {
67-
[theme.breakpoints.down('sm')]: {
68-
padding: theme.spacing(2, 0),
69-
},
70-
[theme.breakpoints.up('sm')]: {
71-
padding: theme.spacing(3, 0),
72-
},
73-
},
74-
}))
42+
export const StyledListTitleWithAvatar: FC<HTMLAttributes<HTMLElement>> = ({ className, ...props }) => (
43+
<dt className={cn('py-1! sm:py-2!', className)} {...props} />
44+
)

‎src/app/components/Table/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ComponentProps, FC, ReactNode } from 'react'
2-
import { styled } from '@mui/material/styles'
32
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
43
import {
54
Table as BaseTable,
@@ -37,12 +36,13 @@ type StyledTableRowProps = ComponentProps<typeof TableRow> & {
3736
backgroundColor?: string
3837
}
3938

40-
const StyledTableRow = styled(TableRow, {
41-
shouldForwardProp: prop => prop !== 'highlight' && prop !== 'backgroundColor',
42-
})<StyledTableRowProps>(({ backgroundColor, highlight }) => ({
43-
...(highlight && backgroundColorAnimation),
44-
...(backgroundColor && { backgroundColor }),
45-
}))
39+
export const StyledTableRow: FC<StyledTableRowProps> = ({ highlight, backgroundColor, ...props }) => (
40+
<TableRow
41+
{...props}
42+
className={cn(highlight && 'animate-[flash_3s_ease-in-out_1]')}
43+
style={backgroundColor ? { backgroundColor } : highlight ? backgroundColorAnimation : undefined}
44+
/>
45+
)
4646

4747
export enum TableCellAlign {
4848
Center = 'center',

‎src/app/components/TextList/index.tsx‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,13 @@
11
import { FC, ReactNode } from 'react'
2-
import { styled } from '@mui/material/styles'
3-
import { COLORS } from '../../../styles/theme/colors'
42

53
type TextListProps = {
64
children: ReactNode
75
}
86

9-
const StyledList = styled('ul')(({ theme }) => ({
10-
listStyleType: 'disc',
11-
listStylePosition: 'outside',
12-
color: COLORS.brandExtraDark,
13-
fontSize: '14px',
14-
paddingLeft: theme.spacing(4),
15-
paddingBottom: theme.spacing(3),
16-
'& ul': {
17-
paddingTop: 0,
18-
paddingBottom: 0,
19-
},
20-
}))
7+
export const TextList: FC<TextListProps> = ({ children }) => (
8+
<ul className="list-disc list-outside text-sm pl-4 pb-1 [&_ul]:pt-0 [&_ul]:pb-0">{children}</ul>
9+
)
2110

22-
export const TextList: FC<TextListProps> = ({ children }) => <StyledList>{children}</StyledList>
23-
24-
const StyledListItem = styled('li')(({ theme }) => ({
25-
display: 'list-item',
26-
padding: 0,
27-
paddingBottom: theme.spacing(1),
28-
}))
29-
30-
export const TextListItem: FC<TextListProps> = ({ children }) => <StyledListItem>{children}</StyledListItem>
11+
export const TextListItem: FC<TextListProps> = ({ children }) => (
12+
<li className="list-item pb-1">{children}</li>
13+
)

‎src/app/components/Validators/ValidatorImage.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import { FC } from 'react'
2-
import { styled } from '@mui/material/styles'
32
import ImageNotSupportedIcon from '@mui/icons-material/ImageNotSupported'
43
import { isUrlSafe } from '../../utils/url'
54
import { COLORS } from 'styles/theme/colors'
65

7-
const StyledImage = styled('img')({
8-
width: '28px',
9-
height: '28px',
10-
borderRadius: 5,
11-
})
12-
136
type ValidatorImageProps = {
147
address: string
158
name: string | undefined
@@ -20,7 +13,7 @@ export const ValidatorImage: FC<ValidatorImageProps> = ({ address, name, logotyp
2013
return (
2114
<>
2215
{logotype && isUrlSafe(logotype) ? (
23-
<StyledImage alt={name || address} src={logotype} />
16+
<img alt={name || address} src={logotype} className="w-7 h-7 rounded-md" />
2417
) : (
2518
<div className="w-8 h-8 flex justify-center items-center text-inherit rounded-full bg-gray-200">
2619
<ImageNotSupportedIcon sx={{ color: COLORS.grayMedium, fontSize: 18 }} />

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -137,13 +137,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({
137137
<dt className="flex items-start py-1">{t('paratimes.blockNumber')}</dt>
138138
<dd className="flex justify-end py-1">
139139
{status?.latestBlock ? (
140-
<BlockLink
141-
scope={{
142-
layer: runtime,
143-
network,
144-
}}
145-
height={status.latestBlock}
146-
/>
140+
<BlockLink scope={{ layer: runtime, network }} height={status.latestBlock} />
147141
) : (
148142
'-'
149143
)}

0 commit comments

Comments
 (0)