Skip to content

Commit c6c4a2a

Browse files
kaja-osojnikkaja-osojnik
authored
Merge pull request #2258 from oasisprotocol/kaja/uil-box-various-3
Update Box element
2 parents d72dbd3 + 1e1b78e commit c6c4a2a

File tree

13 files changed

+45
-109
lines changed

13 files changed

+45
-109
lines changed

‎.changelog/2258.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Update Box element.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const ContractCreatorInfo: FC<{
4444
) : (
4545
<>
4646
<TxSender scope={scope} txHash={creationTxHash} alwaysTrim={alwaysTrim} />
47-
<div className="self-end">&nbsp;{t('contract.createdAt')}&nbsp;</div>
47+
<div>&nbsp;{t('contract.createdAt')}&nbsp;</div>
4848
<TransactionLink scope={scope} hash={creationTxHash} alwaysTrim={alwaysTrim} />
4949
</>
5050
)

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { useScreenSize } from '../../hooks/useScreensize'
44
import { Link as UilLink } from '@oasisprotocol/ui-library/src/components/link'
55
import { trimLongString } from '../../utils/trimLongString'
66
import { HighlightedText } from '../HighlightedText'
7-
import Box from '@mui/material/Box'
87
import { AccountMetadataSourceIndicator } from '../Account/AccountMetadataSourceIndicator'
98
import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
109
import { WithHoverHighlighting } from '../HoverHighlightingContext/WithHoverHighlighting'
@@ -41,25 +40,25 @@ export const Link: FC<LinkProps> = ({
4140
hasName && (withSourceIndicator || isTablet) ? (
4241
<div>
4342
{name && (
44-
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
45-
<Box sx={{ fontWeight: 'bold' }}>{name}</Box>
43+
<div className="inline-flex items-center gap-2">
44+
<div className="font-bold">{name}</div>
4645
{withSourceIndicator && (
4746
<>
4847
<span>-</span>
4948
<AccountMetadataSourceIndicator source={'SelfProfessed'} withText />
5049
</>
5150
)}
52-
</Box>
51+
</div>
5352
)}
54-
<Box sx={{ fontWeight: 'normal' }}>{address}</Box>
53+
<div className="font-normal">{address}</div>
5554
</div>
5655
) : isTablet ? (
5756
address
5857
) : undefined
5958

6059
return (
6160
<MaybeWithTooltip title={tooltipTitle}>
62-
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
61+
<div className="inline-flex items-center gap-1">
6362
{hasName && withSourceIndicator && <AccountMetadataSourceIndicator source={'SelfProfessed'} />}
6463
<span className={cn('font-medium', !labelOnly && 'text-primary')}>
6564
{isTablet ? (
@@ -75,7 +74,7 @@ export const Link: FC<LinkProps> = ({
7574
/>
7675
)}
7776
</span>
78-
</Box>
77+
</div>
7978
</MaybeWithTooltip>
8079
)
8180
}

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

Lines changed: 13 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,47 @@
11
import { FC, PropsWithChildren, ReactNode } from 'react'
22
import { Header } from './Header'
33
import { Footer } from './Footer'
4-
import Box from '@mui/material/Box'
54
import { useScreenSize } from '../../hooks/useScreensize'
6-
import { styled, useTheme } from '@mui/material/styles'
75
import { BuildBanner } from '../BuildBanner'
86
import { useScopeParam } from '../../hooks/useScopeParam'
97
import { NetworkOfflineBanner, RuntimeOfflineBanner, ConsensusOfflineBanner } from '../OfflineBanner'
108
import { Search } from '../Search'
119
import { useIsApiReachable } from '../OfflineBanner/hook'
10+
import useTheme from '@mui/material/styles/useTheme'
1211

1312
interface PageLayoutProps {
1413
mobileFooterAction?: ReactNode
1514
}
1615

17-
export const StyledMain = styled('main')({
18-
minHeight: '75vh',
19-
})
20-
2116
export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
22-
const theme = useTheme()
2317
const { isMobile } = useScreenSize()
2418
const scope = useScopeParam()
2519
const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
20+
const theme = useTheme()
2621

2722
return (
2823
<>
2924
<BuildBanner />
3025
<NetworkOfflineBanner />
3126
{scope && scope.layer !== 'consensus' && <RuntimeOfflineBanner />}
3227
{scope && scope.layer === 'consensus' && <ConsensusOfflineBanner />}
33-
<Box
34-
sx={{
35-
minHeight: '100vh',
36-
}}
37-
>
28+
<div className="min-h-screen">
3829
<Header />
39-
<Box
40-
sx={
41-
isMobile
42-
? {
43-
border:
44-
theme.palette.background.default !== theme.palette.layout.border
45-
? `solid 10px ${theme.palette.layout.border}`
46-
: 'none',
47-
borderTop: 0,
48-
px: 0,
49-
pt: 4,
50-
}
51-
: {
52-
border: `solid 15px ${theme.palette.layout.border}`,
53-
borderTop: 0,
54-
px: '4%',
55-
pt: 6,
56-
}
57-
}
30+
<div
31+
className="border-8 md:border-[15px] border-transparent px-0 md:px-[4%] pt-4 md:pt-6 border-t-0"
32+
style={{
33+
borderColor: theme.palette.layout.border,
34+
}}
5835
>
5936
{!isMobile && (
60-
<Box
61-
sx={{
62-
mb: 6,
63-
}}
64-
>
37+
<div className="mb-6">
6538
<Search scope={scope} disabled={!isApiReachable} />
66-
</Box>
39+
</div>
6740
)}
68-
<StyledMain>{children}</StyledMain>
41+
<main className="min-h-[75vh]">{children}</main>
6942
<Footer scope={scope} mobileSearchAction={mobileFooterAction} />
70-
</Box>
71-
</Box>
43+
</div>
44+
</div>
7245
</>
7346
)
7447
}

‎src/app/components/RuntimeEvents/RuntimeEventDetails.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { exhaustedTypeWarning } from '../../../types/errors'
1919
import { LongDataDisplay } from '../LongDataDisplay'
2020
import { parseEvmEvent } from '../../utils/parseEvmEvent'
2121
import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
22-
import Box from '@mui/material/Box'
2322
import StreamIcon from '@mui/icons-material/Stream'
2423
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
2524
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
@@ -158,9 +157,9 @@ export const EventTypeIcon: FC<{
158157
}
159158

160159
return (
161-
<Box sx={{ display: 'flex', alignItems: 'center' }}>
160+
<div className="flex items-center">
162161
<b>{eventTypeIcons[eventType]}</b>
163-
</Box>
162+
</div>
164163
)
165164
}
166165

@@ -317,11 +316,11 @@ const RuntimeEventDetailsInner: FC<{
317316
}
318317
return (
319318
<div>
320-
<Box sx={{ display: 'flex', alignItems: 'center' }}>
319+
<div className="flex items-center">
321320
<b>
322321
<TokenTransferIcon reverseLabel method={parsedEvmLogName} size={25} />
323322
</b>
324-
</Box>
323+
</div>
325324
<br />
326325
{event.evm_log_params && event.evm_log_params.length > 0 && (
327326
<Table className="border">

‎src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
66
import { CardEmptyState } from '../CardEmptyState'
77
import { TextSkeleton } from '../Skeleton'
88
import { RuntimeEventDetails } from './RuntimeEventDetails'
9-
import Box from '@mui/material/Box'
109
import { AppErrors } from '../../../types/errors'
1110
import { EmptyState } from '../EmptyState'
1211
import { CardDivider } from '../../components/Divider'
@@ -56,9 +55,9 @@ export const RuntimeEventsDetailedList: FC<{
5655
</div>
5756
))}
5857
{pagination && (
59-
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
58+
<div className="flex justify-center">
6059
<TablePagination {...pagination} />
61-
</Box>
60+
</div>
6261
)}
6362
</>
6463
)

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Select as SelectUnstyled, SelectProps, selectClasses, SelectRootSlotProps } from '@mui/base/Select'
22
import { Option, optionClasses } from '@mui/base/Option'
33
import { styled } from '@mui/material/styles'
4-
import Box from '@mui/material/Box'
54
import React, {
65
ForwardedRef,
76
forwardRef,
@@ -226,7 +225,7 @@ const SelectCmp = <T extends SelectOptionBase>({
226225
const withLight = { light }
227226

228227
return (
229-
<Box className={className}>
228+
<div className={className}>
230229
{label && <label htmlFor={selectId}>{label}</label>}
231230
<CustomSelect<T['value']>
232231
id={selectId}
@@ -246,7 +245,7 @@ const SelectCmp = <T extends SelectOptionBase>({
246245
<Option key={props.value.toString()} {...props} light={light} />
247246
))}
248247
</CustomSelect>
249-
</Box>
248+
</div>
250249
)
251250
}
252251

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ComponentProps, FC, ReactNode } from 'react'
22
import { styled } from '@mui/material/styles'
3-
import Box from '@mui/material/Box'
43
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
54
import {
65
Table as BaseTable,
@@ -164,9 +163,9 @@ export const Table: FC<TableProps> = ({
164163
</TableBody>
165164
</BaseTable>
166165
{pagination && (
167-
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
166+
<div className="flex justify-center">
168167
<TablePagination {...pagination} />
169-
</Box>
168+
</div>
170169
)}
171170
</>
172171
)

‎src/app/components/TableCellAge/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 Tooltip from '@mui/material/Tooltip'
33
import { formatDistanceToNow } from '../../utils/dateFormatter'
4-
import Box from '@mui/material/Box'
54
import { useFormattedTimestamp } from '../../hooks/useFormattedTimestamp'
65
import { tooltipDelay } from '../../../styles/theme'
76
import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
@@ -34,14 +33,14 @@ export const TableCellAge: FC<{ sinceTimestamp: string }> = ({ sinceTimestamp })
3433
const title = (
3534
<span>
3635
{defaultFormatted}
37-
<Box fontWeight={100}>{distanceWithSuffix}</Box>
36+
<div className="font-normal">{distanceWithSuffix}</div>
3837
</span>
3938
)
4039
const content = ageHeaderType === TableAgeType.DateTime ? tableFormatted : distance
4140

4241
return (
4342
<Tooltip title={title} enterDelay={tooltipDelay} placement={'top'}>
44-
<Box>{content}</Box>
43+
<div>{content}</div>
4544
</Tooltip>
4645
)
4746
}

‎src/app/components/Tokens/TokenDetails.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import { CopyToClipboard } from '../CopyToClipboard'
99
import { AccountLink } from '../Account/AccountLink'
1010
import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
1111
import { VerificationIcon } from '../ContractVerificationIcon'
12-
import Box from '@mui/material/Box'
13-
import { COLORS } from '../../../styles/theme/colors'
1412
import { TokenTypeTag } from './TokenList'
1513
import { RoundedBalance } from '../RoundedBalance'
1614
import { HighlightedText } from '../HighlightedText'
@@ -44,9 +42,9 @@ export const TokenDetails: FC<{
4442
address={token.eth_contract_addr ?? token.contract_addr}
4543
name={token.name}
4644
/>
47-
<Box sx={{ ml: 3, fontWeight: 700, color: COLORS.grayMedium, whiteSpace: 'nowrap' }}>
45+
<div className="ml-2 font-bold text-muted-foreground whitespace-nowrap">
4846
<HighlightedText text={token.symbol} />
49-
</Box>
47+
</div>
5048
</dd>
5149

5250
<dt>{t('common.type')}</dt>
@@ -56,14 +54,14 @@ export const TokenDetails: FC<{
5654

5755
<dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
5856
<dd>
59-
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
57+
<div className="inline-flex items-center">
6058
<AccountLink
6159
showOnlyAddress
6260
scope={token}
6361
address={token.eth_contract_addr ?? token.contract_addr}
6462
/>
6563
<CopyToClipboard value={token.eth_contract_addr ?? token.contract_addr} />
66-
</Box>
64+
</div>
6765
</dd>
6866
<dt>{t('contract.verification.title')}</dt>
6967
<dd>

0 commit comments

Comments
 (0)