Skip to content

Commit bdd7546

Browse files
kaja-osojnikkaja-osojnik
committed
Update Box elements with tailwind
1 parent 4be9105 commit bdd7546

File tree

11 files changed

+77
-135
lines changed

11 files changed

+77
-135
lines changed

‎src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { FC, ReactNode, useMemo } from 'react'
2-
import Box from '@mui/material/Box'
32
import InfoIcon from '@mui/icons-material/Info'
43
import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
54
import { getAdaptiveId, ShorteningResult, useAdaptiveSizing } from './hooks'
@@ -76,27 +75,27 @@ export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
7675
)
7776

7877
const title = isTruncated ? (
79-
<Box>
80-
<Box>{tooltipOverride ?? fullContent}</Box>
78+
<div>
79+
<div>{tooltipOverride ?? fullContent}</div>
8180
{extraTooltip && (
82-
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
81+
<div className="inline-flex items-center gap-1">
8382
<InfoIcon />
8483
{extraTooltip}
85-
</Box>
84+
</div>
8685
)}
87-
</Box>
86+
</div>
8887
) : (
8988
extraTooltip
9089
)
9190

9291
return (
93-
<Box component="span" ref={textRef} sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
92+
<span ref={textRef} className="max-w-full overflow-x-hidden">
9493
<MaybeWithTooltip
9594
title={title}
9695
spanClassName={cn('whitespace-nowrap', isFinal ? 'opacity-100' : 'opacity-0')}
9796
>
9897
{currentContent}
9998
</MaybeWithTooltip>
100-
</Box>
99+
</span>
101100
)
102101
}

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

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,14 @@
11
import { FC, PropsWithChildren, ReactNode } from 'react'
2-
import { styled } from '@mui/material/styles'
3-
import Box from '@mui/material/Box'
42
import { Search } from '../Search'
53
import { useScreenSize } from '../../hooks/useScreensize'
64
import { SearchScope } from '../../../types/searchScope'
5+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
76

87
interface AppendMobileSearchProps {
98
action?: ReactNode
109
enableMobileSearch?: boolean
1110
}
1211

13-
interface AppendMobileSearchLayoutProps {
14-
action?: ReactNode
15-
isMobile: boolean
16-
}
17-
18-
const Layout = styled(Box, {
19-
shouldForwardProp: prop => prop !== 'action' && prop !== 'isMobile',
20-
})<AppendMobileSearchLayoutProps>(({ action, isMobile }) => ({
21-
position: 'relative',
22-
alignItems: isMobile ? 'center' : 'flex-start',
23-
width: '100%',
24-
...(action
25-
? {
26-
display: 'grid',
27-
gridTemplateColumns: '1fr auto 1fr',
28-
}
29-
: {
30-
display: 'flex',
31-
justifyContent: 'space-between',
32-
}),
33-
}))
34-
35-
const SearchWrapper = styled(Box)(() => ({
36-
width: '50px',
37-
height: '47px',
38-
marginLeft: 'auto',
39-
}))
40-
4112
export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> & { scope?: SearchScope }> = ({
4213
scope,
4314
children,
@@ -47,16 +18,22 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
4718
const { isMobile } = useScreenSize()
4819

4920
return (
50-
<Layout action={action} isMobile={isMobile}>
51-
<Box>{children}</Box>
21+
<div
22+
className={cn(
23+
'relative w-full',
24+
action ? 'grid grid-cols-[1fr_auto_1fr]' : 'flex justify-between',
25+
isMobile ? 'items-center' : 'items-start',
26+
)}
27+
>
28+
<div>{children}</div>
5229

5330
{action}
5431

5532
{isMobile && enableMobileSearch && (
56-
<SearchWrapper>
33+
<div className="w-[50px] h-[47px] ml-auto">
5734
<Search scope={scope} variant="expandable" />
58-
</SearchWrapper>
35+
</div>
5936
)}
60-
</Layout>
37+
</div>
6138
)
6239
}

‎src/app/components/Balance/RuntimeBalanceDisplay.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 { RuntimeSdkBalance } from '../../../oasis-nexus/api'
33
import { useTranslation } from 'react-i18next'
44
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
5-
import Box from '@mui/material/Box'
65

76
export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
87
balances = [],
@@ -12,7 +11,7 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
1211
return t('common.missing')
1312
}
1413
return (
15-
<Box>
14+
<div>
1615
{balances.map(balance => (
1716
<div key={balance.token_symbol}>
1817
{t('common.valueInToken', {
@@ -21,6 +20,6 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
2120
})}
2221
</div>
2322
))}
24-
</Box>
23+
</div>
2524
)
2625
}

‎src/app/components/BlockNavigationButtons/index.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 { Link as RouterLink, useSearchParams } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
44
import { PaginationNext, PaginationPrevious } from '@oasisprotocol/ui-library/src/components/pagination'
5-
import Box from '@mui/material/Box'
65
import Tooltip from '@mui/material/Tooltip'
76
import { ConsensusScope, RuntimeScope, SearchScope } from '../../../types/searchScope'
87
import { useConsensusFreshness, useRuntimeFreshness } from '../OfflineBanner/hook'
@@ -38,13 +37,13 @@ const NextBlockButton: FC<{ disabled: boolean; scope: SearchScope; currentRound:
3837
const [searchParams] = useSearchParams()
3938
return (
4039
<Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')} placement="top">
41-
<Box>
40+
<div>
4241
<PaginationNext
4342
linkComponent={RouterLink}
4443
to={RouteUtils.getBlockRoute(scope, currentRound + 1, searchParams, [TX_METHOD_QUERY_ARG_NAME])}
4544
disabled={disabled}
4645
/>
47-
</Box>
46+
</div>
4847
</Tooltip>
4948
)
5049
}

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

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { ReactNode } from 'react'
2-
import Box from '@mui/material/Box'
32
import Tooltip from '@mui/material/Tooltip'
4-
import { styled } from '@mui/material/styles'
5-
import { COLORS } from '../../../styles/theme/colors'
3+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
64

7-
const StyledSquare = styled(Box, {
8-
shouldForwardProp: prop => prop !== 'success',
9-
})(({ success }: { success?: boolean }) => {
10-
return {
11-
display: 'flex',
12-
width: '24px',
13-
height: '24px',
14-
borderRadius: '3px',
15-
backgroundColor: success ? COLORS.eucalyptus : COLORS.errorIndicatorBackground,
16-
}
17-
})
5+
const Square = ({ success, size = 32 }: { success?: boolean; size?: number }) => {
6+
const borderRadius = size <= 8 ? 2 : 6
7+
8+
return (
9+
<div
10+
className={cn(success ? 'bg-success' : 'bg-destructive')}
11+
style={{
12+
width: `${size}px`,
13+
height: `${size}px`,
14+
borderRadius: `${borderRadius}px`,
15+
}}
16+
/>
17+
)
18+
}
1819

1920
type BlockStatsProps<T> = {
2021
data: T[]
@@ -39,25 +40,25 @@ export const BlockStats = <T extends { [key: string]: any }>({
3940

4041
return (
4142
<>
42-
<Box sx={{ display: 'flex', flexWrap: 'wrap' }} gap={2}>
43+
<div className="flex flex-wrap gap-2">
4344
{data.map(item => {
4445
const title = tooltipFormatter ? tooltipFormatter(item[dataKey].toString()) : item[dataKey]
4546
return (
4647
<Tooltip key={item[dataKey]} title={title} placement="top">
47-
<StyledSquare success={item[statusKey]} />
48+
<Square success={item[statusKey]} />
4849
</Tooltip>
4950
)
5051
})}
51-
</Box>
52+
</div>
5253
{legendLabels && (
53-
<Box pt={5} sx={{ display: 'flex' }}>
54-
<Box gap={3} mr={4} sx={{ display: 'flex' }}>
55-
<StyledSquare success /> {legendLabels.success}
56-
</Box>
57-
<Box gap={3} sx={{ display: 'flex' }}>
58-
<StyledSquare /> {legendLabels.fail}
59-
</Box>
60-
</Box>
54+
<div className="pt-8 flex">
55+
<div className="flex gap-2 mr-4 items-center">
56+
<Square success size={8} /> {legendLabels.success}
57+
</div>
58+
<div className="flex gap-2 items-center">
59+
<Square size={8} /> {legendLabels.fail}
60+
</div>
61+
</div>
6162
)}
6263
</>
6364
)

‎src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Layer } from '../../../oasis-nexus/api'
55
import { SearchScope } from '../../../types/searchScope'
66
import { Network } from '../../../types/network'
77
import * as externalLinks from '../../utils/externalLinks'
8-
import Box from '@mui/material/Box'
98

109
export const AbiPlaygroundLink: FC<{
1110
address_eth: string
@@ -38,15 +37,15 @@ export const AbiPlaygroundLink: FC<{
3837
return (
3938
<span>
4039
&nbsp;|&nbsp;
41-
<Box sx={{ display: 'inline-block' }}>
40+
<div className="inline-block">
4241
<Trans
4342
t={t}
4443
i18nKey={'contract.verification.openInAbiPlayground'}
4544
components={{
4645
AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
4746
}}
4847
/>
49-
</Box>
48+
</div>
5049
</span>
5150
)
5251
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { FiatMoneyAmountBox, FiatMoneyWarning } from '../Balance/FiatMoneyAmount'
4-
import Box from '@mui/material/Box'
54
import Tooltip from '@mui/material/Tooltip'
65
import { CoinGeckoReferral } from '../CoinGeckoReferral'
76
import HelpIcon from '@mui/icons-material/Help'
@@ -23,7 +22,7 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({
2322
const { t } = useTranslation()
2423
return price === undefined && !hasFailed ? null : (
2524
<FiatMoneyAmountBox>
26-
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
25+
<div className="inline-flex items-center">
2726
{hasFailed ? (
2827
<FiatMoneyWarning unknownTickers={[ticker]} />
2928
) : (
@@ -42,7 +41,7 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({
4241
</Tooltip>
4342
</>
4443
)}
45-
</Box>
44+
</div>
4645
{hasUsedCoinGecko && <CoinGeckoReferral />}
4746
</FiatMoneyAmountBox>
4847
)

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

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Card from '@mui/material/Card'
33
import CardContent from '@mui/material/CardContent'
44
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
55
import { COLORS } from '../../../styles/theme/colors'
6-
import Box from '@mui/material/Box'
76
import { SearchScope } from '../../../types/searchScope'
87
import Button from '@mui/material/Button'
98
import { EthOrOasisAddress } from '../../../oasis-nexus/api'
@@ -25,15 +24,7 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
2524
}}
2625
>
2726
<CardContent sx={{ paddingBottom: '0!important' }}>
28-
<Box
29-
sx={{
30-
display: 'flex',
31-
flexWrap: 'wrap',
32-
justifyContent: 'center',
33-
alignItems: 'center',
34-
gap: 3,
35-
}}
36-
>
27+
<div className="flex flex-wrap justify-center items-center gap-2">
3728
<Typography variant="h3" className="text-white">
3829
{dApp.description}
3930
</Typography>
@@ -53,7 +44,7 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
5344
>
5445
{dApp.button}
5546
</Button>
56-
</Box>
47+
</div>
5748
</CardContent>
5849
</Card>
5950
)

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, { FC } from 'react'
22
import discord from './discord-blue.svg'
3-
import Typography from '@mui/material/Typography'
4-
import Box from '@mui/material/Box'
53

64
export const DiscordProfileWidget: FC<{
75
handle: string
@@ -14,26 +12,11 @@ export const DiscordProfileWidget: FC<{
1412
: handle
1513

1614
return (
17-
<Box
18-
sx={{
19-
display: 'flex',
20-
alignItems: 'center',
21-
gap: 3,
22-
}}
23-
>
24-
<Typography
25-
component="span"
26-
sx={{
27-
fontWeight: 'bold',
28-
color: '#5865f2' /* Discord's brand color */,
29-
fontSize: '16px',
30-
}}
31-
>
32-
@{cleanHandle}
33-
</Typography>
15+
<div className="flex items-center gap-2">
16+
<span className="font-bold text-[#5865f2]">@{cleanHandle}</span>
3417
at
3518
<img src={discord} height={24} alt="" />
3619
Discord
37-
</Box>
20+
</div>
3821
)
3922
}

0 commit comments

Comments
 (0)