Skip to content

Commit 28b30b3

Browse files
kaja-osojnikkaja-osojnik
authored
Merge pull request #2208 from oasisprotocol/kaja/uil-dashboard-mono-typography
Update mono fonts on dashboards
2 parents 35a9ddc + 39400de commit 28b30b3

File tree

6 files changed

+52
-70
lines changed

6 files changed

+52
-70
lines changed

‎.changelog/2208.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Update mono fonts on dashboards.

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { FC, ReactNode } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
33
import { useScreenSize } from '../../hooks/useScreensize'
4-
import Link from '@mui/material/Link'
54
import { RouteUtils } from '../../utils/route-utils'
65
import InfoIcon from '@mui/icons-material/Info'
7-
import Typography from '@mui/material/Typography'
86
import { SearchScope } from '../../../types/searchScope'
97
import { useAccountMetadata } from '../../hooks/useAccountMetadata'
108
import { trimLongString } from '../../utils/trimLongString'
@@ -15,6 +13,7 @@ import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedT
1513
import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
1614
import { AccountMetadataSourceIndicator } from './AccountMetadataSourceIndicator'
1715
import { WithHoverHighlighting } from '../HoverHighlightingContext/WithHoverHighlighting'
16+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
1817

1918
const WithTypographyAndLink: FC<{
2019
scope: SearchScope
@@ -26,15 +25,13 @@ const WithTypographyAndLink: FC<{
2625
const to = RouteUtils.getAccountRoute(scope, address)
2726
return (
2827
<WithHoverHighlighting address={address}>
29-
<Typography variant="mono" component="span" sx={{ display: 'inline-flex' }}>
30-
{labelOnly ? (
31-
children
32-
) : (
33-
<Link component={RouterLink} to={to} sx={{ display: 'inline-flex' }}>
34-
{children}
35-
</Link>
36-
)}
37-
</Typography>
28+
{labelOnly ? (
29+
<span className="text-foreground font-medium">{children}</span>
30+
) : (
31+
<Link asChild className="font-medium">
32+
<RouterLink to={to}>{children}</RouterLink>
33+
</Link>
34+
)}
3835
</WithHoverHighlighting>
3936
)
4037
}

‎src/app/components/Blocks/BlockLink.tsx‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import { FC } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
3-
import Typography from '@mui/material/Typography'
4-
import Link from '@mui/material/Link'
53
import { RouteUtils } from '../../utils/route-utils'
64
import { trimLongString } from '../../utils/trimLongString'
75
import { SearchScope } from '../../../types/searchScope'
86
import { useScreenSize } from '../../hooks/useScreensize'
97
import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
108
import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
9+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
1110

1211
export const BlockLink: FC<{ scope: SearchScope; height: number }> = ({ scope, height }) => (
13-
<Typography variant="mono">
14-
<Link component={RouterLink} to={RouteUtils.getBlockRoute(scope, height)}>
15-
{height?.toLocaleString()}
16-
</Link>
17-
</Typography>
12+
<Link asChild className="font-medium">
13+
<RouterLink to={RouteUtils.getBlockRoute(scope, height)}>{height?.toLocaleString()}</RouterLink>
14+
</Link>
1815
)
1916

2017
export const BlockHashLink: FC<{
@@ -29,33 +26,35 @@ export const BlockHashLink: FC<{
2926
if (alwaysTrim) {
3027
// Table view
3128
return (
32-
<Typography variant="mono">
33-
<MaybeWithTooltip title={hash}>
34-
<Link component={RouterLink} to={to}>
29+
<MaybeWithTooltip title={hash}>
30+
<Link asChild>
31+
<RouterLink to={to} className="text-primary font-medium">
3532
{trimLongString(hash)}
36-
</Link>
37-
</MaybeWithTooltip>
38-
</Typography>
33+
</RouterLink>
34+
</Link>
35+
</MaybeWithTooltip>
3936
)
4037
}
4138

4239
if (!isTablet) {
4340
// Desktop view
4441
return (
45-
<Typography variant="mono">
46-
<Link component={RouterLink} to={to}>
42+
<Link asChild>
43+
<RouterLink to={to} className="text-primary font-medium">
4744
{hash}
48-
</Link>
49-
</Typography>
45+
</RouterLink>
46+
</Link>
5047
)
5148
}
5249

5350
// Mobile view
5451
return (
55-
<Typography variant="mono" sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
56-
<Link component={RouterLink} to={to}>
57-
<AdaptiveTrimmer text={hash} strategy="middle" minLength={13} />
52+
<span className="max-w-full overflow-x-hidden">
53+
<Link asChild>
54+
<RouterLink to={to} className="text-primary font-medium">
55+
<AdaptiveTrimmer text={hash} strategy="middle" minLength={13} />
56+
</RouterLink>
5857
</Link>
59-
</Typography>
58+
</span>
6059
)
6160
}

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

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { FC, PropsWithChildren } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
33
import { useScreenSize } from '../../hooks/useScreensize'
4-
import MuiLink from '@mui/material/Link'
5-
import Typography from '@mui/material/Typography'
6-
import { COLORS } from '../../../styles/theme/colors'
4+
import { Link as UilLink } from '@oasisprotocol/ui-library/src/components/link'
75
import { trimLongString } from '../../utils/trimLongString'
86
import { HighlightedText } from '../HighlightedText'
97
import Box from '@mui/material/Box'
@@ -13,6 +11,7 @@ import { WithHoverHighlighting } from '../HoverHighlightingContext/WithHoverHigh
1311
import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
1412
import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedText'
1513
import { HighlightedTrimmedText } from '../HighlightedText/HighlightedTrimmedText'
14+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
1615

1716
export type TrimMode = 'fixes' | 'adaptive'
1817

@@ -62,11 +61,7 @@ export const Link: FC<LinkProps> = ({
6261
<MaybeWithTooltip title={tooltipTitle}>
6362
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
6463
{hasName && withSourceIndicator && <AccountMetadataSourceIndicator source={'SelfProfessed'} />}
65-
<Typography
66-
variant="mono"
67-
component="span"
68-
sx={{ color: labelOnly ? COLORS.brandExtraDark : COLORS.brandDark, fontWeight: 700 }}
69-
>
64+
<span className={cn('font-medium', !labelOnly && 'text-primary')}>
7065
{isTablet ? (
7166
<TabletLink address={address} name={name} to={to} labelOnly={labelOnly} trimMode={trimMode} />
7267
) : (
@@ -79,7 +74,7 @@ export const Link: FC<LinkProps> = ({
7974
trimMode={trimMode}
8075
/>
8176
)}
82-
</Typography>
77+
</span>
8378
</Box>
8479
</MaybeWithTooltip>
8580
)
@@ -93,9 +88,7 @@ type CustomTrimEndLinkLabelProps = {
9388
}
9489

9590
const LinkLabel: FC<PropsWithChildren> = ({ children }) => (
96-
<Typography component="span" fontSize={'inherit'} fontWeight={'inherit'} lineHeight={'inherit'}>
97-
<span>{children}</span>
98-
</Typography>
91+
<span className="text-inherit font-inherit leading-inherit">{children}</span>
9992
)
10093

10194
const CustomTrimEndLinkLabel: FC<CustomTrimEndLinkLabelProps> = ({ name, to, labelOnly, trimMode }) => {
@@ -108,9 +101,9 @@ const CustomTrimEndLinkLabel: FC<CustomTrimEndLinkLabelProps> = ({ name, to, lab
108101
return labelOnly ? (
109102
<LinkLabel>{label}</LinkLabel>
110103
) : (
111-
<MuiLink component={RouterLink} to={to}>
112-
{label}
113-
</MuiLink>
104+
<UilLink asChild>
105+
<RouterLink to={to}>{label}</RouterLink>
106+
</UilLink>
114107
)
115108
}
116109

@@ -136,9 +129,9 @@ const TabletLink: FC<TabletLinkProps> = ({ address, name, to, labelOnly, trimMod
136129
return labelOnly ? (
137130
<LinkLabel>{label}</LinkLabel>
138131
) : (
139-
<MuiLink component={RouterLink} to={to}>
140-
{label}
141-
</MuiLink>
132+
<UilLink asChild>
133+
<RouterLink to={to}>{label}</RouterLink>
134+
</UilLink>
142135
)
143136
}
144137

@@ -156,9 +149,9 @@ const DesktopLink: FC<DesktopLinkProps> = ({ address, name, to, alwaysTrim, trim
156149
) : labelOnly ? (
157150
<LinkLabel>{trimLongString(address)}</LinkLabel>
158151
) : (
159-
<MuiLink component={RouterLink} to={to}>
160-
{trimLongString(address)}
161-
</MuiLink>
152+
<UilLink asChild>
153+
<RouterLink to={to}>{trimLongString(address)}</RouterLink>
154+
</UilLink>
162155
)}
163156
</WithHoverHighlighting>
164157
)
@@ -169,9 +162,9 @@ const DesktopLink: FC<DesktopLinkProps> = ({ address, name, to, alwaysTrim, trim
169162
{labelOnly ? (
170163
<LinkLabel>{label}</LinkLabel>
171164
) : (
172-
<MuiLink component={RouterLink} to={to}>
173-
{label}
174-
</MuiLink>
165+
<UilLink asChild>
166+
<RouterLink to={to}>{label}</RouterLink>
167+
</UilLink>
175168
)}
176169
</WithHoverHighlighting>
177170
)

‎src/app/components/Transactions/TransactionLink.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { FC, ReactNode } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
3-
import Link from '@mui/material/Link'
4-
import Typography from '@mui/material/Typography'
53
import InfoIcon from '@mui/icons-material/Info'
64
import { useScreenSize } from '../../hooks/useScreensize'
75
import { RouteUtils } from '../../utils/route-utils'
@@ -10,23 +8,17 @@ import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
108
import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
119
import { trimLongString } from '../../utils/trimLongString'
1210
import Box from '@mui/material/Box'
11+
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
12+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
1313

1414
const WithTypographyAndLink: FC<{ children: ReactNode; mobile?: boolean; to: string }> = ({
1515
children,
1616
mobile,
1717
to,
1818
}) => (
19-
<Typography
20-
variant="mono"
21-
component="span"
22-
sx={{
23-
...(mobile ? { maxWidth: '85%' } : {}),
24-
}}
25-
>
26-
<Link component={RouterLink} to={to}>
27-
{children}
28-
</Link>
29-
</Typography>
19+
<Link asChild className={cn('font-medium', mobile && 'max-w-[85%]')}>
20+
<RouterLink to={to}>{children}</RouterLink>
21+
</Link>
3022
)
3123

3224
export const TransactionLink: FC<{

‎src/styles/tailwind.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
/* Override MUI styles that are applied globally */
66
[class*=' text-'] {
7-
font-family: var(--default-font-family);
7+
font-family: 'Inter Variable', sans-serif;
88
}
99

1010
/* Override Tailwind's vertical-align reset for MUI SVG components */

0 commit comments

Comments
 (0)