Skip to content

Commit ab8988d

Browse files
kaja-osojnikkaja-osojnik
authored
Merge pull request #2192 from oasisprotocol/kaja/uil-card-headers
Update headers to ui library and body typography size
2 parents 404f0ce + ae9c9cc commit ab8988d

48 files changed

Lines changed: 365 additions & 731 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changelog/2192.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Update headers and body font size

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

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
import { FC } from 'react'
2-
import Box from '@mui/material/Box'
3-
import Typography from '@mui/material/Typography'
4-
import { COLORS } from 'styles/theme/colors'
5-
import { useTheme } from '@mui/material/styles'
62

73
type CardHeaderWithCounterProps = {
84
label: string | undefined
@@ -15,23 +11,14 @@ export const CardHeaderWithCounter: FC<CardHeaderWithCounterProps> = ({
1511
totalCount,
1612
isTotalCountClipped,
1713
}) => {
18-
const theme = useTheme()
19-
2014
return (
21-
<Box sx={{ display: 'flex', alignItems: 'baseline' }} gap={'0.8ex'}>
22-
<Typography
23-
fontWeight={700}
24-
component="span"
25-
color={theme.palette.layout.titleOnBackground}
26-
fontSize="inherit"
27-
>
28-
{label}
29-
</Typography>
15+
<div className="flex gap-1">
16+
<span>{label}</span>
3017
{!!totalCount && (
31-
<Typography fontWeight="normal" component="span" color={COLORS.grayMedium} fontSize="inherit">
18+
<span className="font-normal text-muted-foreground">
3219
({`${isTotalCountClipped ? '>' : ''}${totalCount}`})
33-
</Typography>
20+
</span>
3421
)}
35-
</Box>
22+
</div>
3623
)
3724
}

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FC, useState, Suspense } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import Box from '@mui/material/Box'
4-
import Typography from '@mui/material/Typography'
4+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
55
import { CopyToClipboard, FloatingCopyToClipboard } from '../../components/CopyToClipboard'
66
import { useScreenSize } from '../../hooks/useScreensize'
77
import { base64ToHex } from '../../utils/helpers'
@@ -76,11 +76,7 @@ const CodeDisplay: FC<CodeDisplayProps> = ({
7676
pt: extraTopPadding ? 4 : 0,
7777
}}
7878
>
79-
{label && (
80-
<Typography variant="h4" component="h4">
81-
{label}
82-
</Typography>
83-
)}
79+
{label && <Typography variant="h4">{label}</Typography>}
8480
{floatingCopyButton ? (
8581
<FloatingCopyToClipboard isVisible={isHovering} value={code} />
8682
) : (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ const MethodIconContent: FC<MethodIconContentProps> = ({
103103
{label && (
104104
<Typography
105105
sx={{
106+
fontSize: '14px',
106107
fontWeight: 'inherit',
107108
order: reverseLabel ? -1 : 0,
108109
...(truncate

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const StyledIconButton = styled(ButtonBase, {
2424
border: 0,
2525
background: 'none',
2626
cursor: 'pointer',
27-
fontSize: 'inherit',
27+
fontSize: '14px',
2828
fontFamily: 'inherit',
2929
padding: 0,
3030
marginLeft: theme.spacing(3),
@@ -95,7 +95,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, floating, isF
9595
onClick={handleCopyToClipboard}
9696
aria-label={ariaLabel}
9797
>
98-
<ContentCopyIcon sx={{ fontSize: '1.25em', color: COLORS.brandDark }} />
98+
<ContentCopyIcon sx={{ fontSize: '14px', color: COLORS.brandDark }} />
9999
</StyledIconButton>
100100
)}
101101
</Tooltip>

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

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
import { FC } from 'react'
22
import Card from '@mui/material/Card'
33
import CardContent from '@mui/material/CardContent'
4-
import Typography from '@mui/material/Typography'
4+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
55
import { COLORS } from '../../../styles/theme/colors'
66
import Box from '@mui/material/Box'
77
import { SearchScope } from '../../../types/searchScope'
88
import Button from '@mui/material/Button'
9-
import { useScreenSize } from '../../hooks/useScreensize'
109
import { EthOrOasisAddress } from '../../../oasis-nexus/api'
1110
import { useAccountMetadata } from '../../hooks/useAccountMetadata'
1211

1312
export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisAddress }> = ({
1413
scope,
1514
ethOrOasisAddress,
1615
}) => {
17-
const { isMobile } = useScreenSize()
18-
1916
const { metadata } = useAccountMetadata(scope, ethOrOasisAddress)
2017
const dApp = metadata?.dapp
2118

@@ -27,7 +24,7 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
2724
border: `2px dashed ${COLORS.white}`,
2825
}}
2926
>
30-
<CardContent>
27+
<CardContent sx={{ paddingBottom: '0!important' }}>
3128
<Box
3229
sx={{
3330
display: 'flex',
@@ -37,23 +34,15 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
3734
gap: 3,
3835
}}
3936
>
40-
<Typography
41-
variant="h3"
42-
sx={{
43-
color: COLORS.white,
44-
fontSize: isMobile ? '18px' : '24px',
45-
fontWeight: 700,
46-
lineHeight: '140%' /* 33.6px */,
47-
}}
48-
>
37+
<Typography variant="h3" className="text-white">
4938
{dApp.description}
5039
</Typography>
5140
&nbsp;
5241
<Button
5342
href={dApp.url}
5443
sx={{
5544
backgroundColor: COLORS.white,
56-
fontSize: '18px',
45+
fontSize: '14px',
5746
fontWeight: 500,
5847
lineHeight: '125%',
5948
textTransform: 'none',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import { ChartDuration } from '../../utils/chart-utils'
43
import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
4+
import { ChartDuration } from '../../utils/chart-utils'
55

66
type DurationPillsProps = {
77
handleChange: (duration: ChartDuration) => void

‎src/app/components/LearningMaterialsCard/LearningSection.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ export const LearningSection: FC<LearningSectionProps> = ({ className, descripti
1616
className={cn('flex flex-row p-6 gap-4 rounded-md border border-zinc-200 bg-zinc-50 w-full', className)}
1717
>
1818
<div className="flex-1 flex flex-col gap-1">
19-
<Typography variant="h4">{title}</Typography>
19+
<Typography variant="h4" className="text-sm">
20+
{title}
21+
</Typography>
2022
<Typography>{description}</Typography>
2123
</div>
2224
<div className="flex items-end">

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import Card from '@mui/material/Card'
4-
import CardHeader from '@mui/material/CardHeader'
5-
import Link from '@mui/material/Link'
6-
import { COLORS } from '../../../styles/theme/colors'
4+
import CardContent from '@mui/material/CardContent'
75
import { docs } from '../../utils/externalLinks'
6+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
7+
import { Link } from '@oasisprotocol/ui-library/src/components/link'
88

99
type LearningMaterialsCardProps = {
1010
children: React.ReactNode
@@ -14,18 +14,20 @@ export const LearningMaterialsCard: FC<LearningMaterialsCardProps> = ({ children
1414
const { t } = useTranslation()
1515

1616
return (
17-
<Card sx={{ display: 'flex', flexDirection: 'column' }}>
18-
<CardHeader
19-
disableTypography
20-
component="h3"
21-
title={t('learningMaterials.header')}
22-
action={
23-
<Link href={docs.home} rel="noopener noreferrer" target="_blank" sx={{ color: COLORS.brandDark }}>
24-
{t('common.viewAll')}
25-
</Link>
26-
}
27-
/>
28-
<div className="md:h-[-webkit-fill-available]">{children}</div>
17+
<Card>
18+
<div className="flex justify-between mb-4">
19+
<Typography variant="h3">{t('learningMaterials.header')}</Typography>
20+
<Link
21+
href={docs.home}
22+
rel="noopener noreferrer"
23+
target="_blank"
24+
textColor="primary"
25+
className="font-medium "
26+
>
27+
{t('common.viewAll')}
28+
</Link>
29+
</div>
30+
<CardContent>{children}</CardContent>
2931
</Card>
3032
)
3133
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { FC, ReactNode } from 'react'
22
import Card from '@mui/material/Card'
3-
import CardHeader from '@mui/material/CardHeader'
43
import CardContent from '@mui/material/CardContent'
54
import { ErrorBoundary } from '../../components/ErrorBoundary'
65
import { LinkableDiv } from '../../components/PageLayout/LinkableDiv'
6+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
77

88
type LinkableCardLayoutProps = {
99
children: ReactNode
@@ -21,7 +21,10 @@ export const LinkableCardLayout: FC<LinkableCardLayoutProps> = ({ children, cont
2121
}}
2222
>
2323
<LinkableDiv id={containerId}>
24-
<CardHeader disableTypography component="h3" title={title} action={action} />
24+
<div className="flex items-center justify-between p-4">
25+
<Typography variant="h3">{title}</Typography>
26+
{action ? <div className="self-start -mt-2 -mr-2">{action}</div> : null}
27+
</div>
2528
</LinkableDiv>
2629
<CardContent>
2730
<ErrorBoundary light={true}>{children}</ErrorBoundary>

0 commit comments

Comments
 (0)