Skip to content

Commit e8e974e

Browse files
kaja-osojnikkaja-osojnik
committed
Subpage Card Typography
1 parent a6b84eb commit e8e974e

28 files changed

Lines changed: 175 additions & 346 deletions

File tree

‎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: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
33
import { Tabs, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
44
import { ChartDuration } from '../../utils/chart-utils'
55

6-
76
type DurationPillsProps = {
87
handleChange: (duration: ChartDuration) => void
98
value?: ChartDuration

‎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/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>

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

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { FC, ReactNode } from 'react'
2-
import Box from '@mui/material/Box'
32
import Card from '@mui/material/Card'
43
import CardContent from '@mui/material/CardContent'
54
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
6-
import Typography from '@mui/material/Typography'
5+
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
76
import { styled } from '@mui/material/styles'
87

98
export const StyledCard = styled(Card)(() => ({
@@ -24,37 +23,14 @@ type TitleCardProps = {
2423
export const TitleCard: FC<TitleCardProps> = ({ isLoading, details, title }) => {
2524
return (
2625
<StyledCard>
27-
<CardContent>
28-
<Box
29-
sx={{
30-
display: 'flex',
31-
flexWrap: 'wrap',
32-
justifyContent: 'space-between',
33-
alignItems: 'center',
34-
}}
35-
gap={3}
36-
>
37-
<Typography
38-
variant="h2"
39-
sx={{
40-
display: 'inline-flex',
41-
fontWeight: 700,
42-
flexWrap: 'wrap',
43-
}}
44-
>
26+
<CardContent sx={{ paddingBottom: '0!important' }}>
27+
<div className="flex flex-wrap justify-between items-center gap-3">
28+
<Typography variant="h2" className="inline-flex flex-wrap">
4529
{isLoading ? <TitleSkeleton /> : title}
4630
</Typography>
4731

48-
<Box
49-
sx={{
50-
display: 'flex',
51-
justifyContent: 'center',
52-
alignItems: 'center',
53-
}}
54-
>
55-
{isLoading ? <TitleSkeleton /> : details}
56-
</Box>
57-
</Box>
32+
<div className="flex justify-center align-center">{isLoading ? <TitleSkeleton /> : details}</div>
33+
</div>
5834
</CardContent>
5935
</StyledCard>
6036
)

‎src/app/components/Snapshots/SnapshotCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const SnapshotCard: FC<SnapshotCardProps> = ({
5151
<CardActions sx={{ minHeight: 60 }}>
5252
<div className="flex justify-between items-center w-full px-4 pb-4">
5353
<div>{badge}</div>
54-
<Typography variant="h2" className="font-bold flex-1 text-primary">
54+
<Typography textColor="muted" className="flex-1">
5555
{label}
5656
</Typography>
5757
</div>
@@ -84,7 +84,7 @@ export const SnapshotTextCard: FC<SnapshotTextCardProps> = ({
8484
alignWithCardsWithActions={alignWithCardsWithActions}
8585
>
8686
<div className="h-full flex items-center justify-center">
87-
<span className="text-2xl font-bold text-primary flex-1 text-center px-4">{children}</span>
87+
<span className="text-2xl font-semibold text-primary flex-1 text-center px-4">{children}</span>
8888
</div>
8989
</SnapshotCard>
9090
)

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,7 @@ const SocialLink: FC<SocialLinkProps> = ({ label, href, imgSrc, img }) => {
3535
{img && <span className="[&_svg]:h-10 [&_svg]:w-10 inline-block">{img}</span>}
3636
</>
3737
</div>
38-
<Typography variant="large" className="mb-1 text-white">
39-
{label}
40-
</Typography>
38+
<Typography className="mb-1 text-white">{label}</Typography>
4139
</Link>
4240
)
4341
}

0 commit comments

Comments
 (0)