Skip to content

Commit

Permalink
change font styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@aeddaqqa
aeddaqqa committed Jun 4, 2023
1 parent 3179750 commit 3454545
Show file tree
Hide file tree
Showing 23 changed files with 221 additions and 587 deletions.
Binary file removed public/fonts/ClashDisplay-200.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-200.woff2
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-300.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-300.woff2
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-400.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-400.woff2
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-500.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-500.woff2
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-600.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-600.woff2
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-700.woff
View file
Binary file not shown.
Binary file removed public/fonts/ClashDisplay-700.woff2
View file
Binary file not shown.
51 changes: 1 addition & 50 deletions public/fonts/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,53 +38,4 @@
font-style: normal;
font-weight: 700;
src: url('Inter-700.woff2') format('woff2'), url('Inter-700.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 200;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-200.woff2') format('woff2'), url('ClashDisplay-200.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 300;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-300.woff2') format('woff2'), url('ClashDisplay-300.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 400;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-400.woff2') format('woff2'), url('ClashDisplay-400.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 500;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-500.woff2') format('woff2'), url('ClashDisplay-500.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 600;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-600.woff2') format('woff2'), url('ClashDisplay-600.woff') format('woff');
}

@font-face {
font-family: 'ClashDisplay';
font-weight: 700;
font-display: swap;
font-style: normal;
src: url('ClashDisplay-700.woff2') format('woff2'), url('ClashDisplay-700.woff') format('woff');
}

}
6 changes: 3 additions & 3 deletions src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default function Footer() {
</Grid>
<Grid item>
<Typography
variant="body1"
variant="caption"
component="p"
sx={{
color: 'grey.500',
Expand Down Expand Up @@ -92,7 +92,7 @@ export default function Footer() {
sx={{ display: 'flex', flexDirection: 'column' }}
>
<Typography
variant="subtitle1"
variant="body1"
component="span"
fontWeight="fontWeightBold"
sx={{
Expand Down Expand Up @@ -125,7 +125,7 @@ export default function Footer() {
style={{ textDecoration: 'none' }}
>
<Typography
variant="body1"
variant="caption"
component="span"
sx={{ color: 'grey.500' }}
>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navbar/LoginButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,15 @@ export default function LoginIcon() {
onKeyDown={e => {
handleKeyDown(e)
}}
sx={{ typography: 'body1', width: '100%', maxWidth: '326px' }}
sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }}
>
<LoadAccountMenu type="user" />
</MenuItem>
<MenuItem
onKeyDown={e => {
handleKeyDown(e)
}}
sx={{ typography: 'body1', width: '100%', maxWidth: '326px' }}
sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }}
>
<LoadAccountMenu type="kyc" />
</MenuItem>
Expand All @@ -102,7 +102,7 @@ export default function LoginIcon() {
onKeyDown={e => handleKeyDown(e)}
onClick={logout}
sx={{
typography: 'body1',
typography: 'body2',
width: '100%',
maxWidth: '326px',
display: 'flex',
Expand Down
11 changes: 6 additions & 5 deletions src/components/Navbar/NetworkSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function NetworkSwitcher() {
<MenuList sx={{ bgcolor: 'transparent' }}>
<MenuItem
sx={{
typography: 'h6',
typography: 'body2',
fontWeight: theme.typography.fontWeightMedium,
color: theme.palette.text.disabled,
}}
Expand Down Expand Up @@ -82,7 +82,7 @@ export default function NetworkSwitcher() {
}}
/>
<Typography
variant="subtitle1"
variant="body2"
component="span"
noWrap
sx={{ maxWidth: '180px' }}
Expand Down Expand Up @@ -124,7 +124,7 @@ export default function NetworkSwitcher() {
<MenuItem
onClick={handleOpenModal}
sx={{
typography: 'body1',
typography: 'body2',
width: '100%',
maxWidth: '326px',
justifyContent: 'space-between',
Expand Down Expand Up @@ -153,6 +153,7 @@ export default function NetworkSwitcher() {
value={activeNetwork?.name ? activeNetwork?.name : ''}
renderValue={() => <SelectedNetwork />}
sx={{
typography: 'body2',
maxWidth: '13rem',
'.MuiOutlinedInput-notchedOutline': { border: 'none' },
'.MuiSvgIcon-root': { color: theme.palette.text.primary },
Expand All @@ -170,7 +171,7 @@ export default function NetworkSwitcher() {
sx={{ gap: '.6rem', justifyContent: 'space-between' }}
data-cy={`network-name-${network.name}`}
>
<Typography variant="subtitle1" component="span" noWrap>
<Typography variant="body2" component="span" noWrap>
{network.name}
</Typography>
{!network.readonly && (
Expand Down Expand Up @@ -219,7 +220,7 @@ export default function NetworkSwitcher() {
))}
<MenuItem
onClick={handleOpenModal}
sx={{ typography: 'body1', width: '100%', maxWidth: '326px' }}
sx={{ typography: 'body2', width: '100%', maxWidth: '326px' }}
data-cy="add-custom-network"
>
Add Custom Network
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar/SelectNetwork.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function SelectedNetwork() {
}}
/>
<Typography
variant="subtitle1"
variant="body2"
component="span"
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navbar/ThemeSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function ThemeSwitcher() {
'.MuiButton-startIcon': { mr: isDesktop ? '0.5rem' : '0rem' },
}}
>
{isDesktop && <Typography variant="subtitle1">{theme.palette.mode}</Typography>}
{isDesktop && <Typography variant="body2">{theme.palette.mode}</Typography>}
</Button>
)
}
2 changes: 1 addition & 1 deletion src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ export default function Navbar() {
}}
>
<Icon path={mdiWalletOutline} size={1} />
<Typography variant="subtitle1" component="span">
<Typography variant="body2" component="span">
Login
</Typography>
</Box>
Expand Down
8 changes: 4 additions & 4 deletions src/components/PlatformSwitcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ export default function PlatformSwitcher() {
}
/>
<Typography
variant="h4"
variant={!isDesktop ? 'h6' : 'h4'}
component="span"
fontWeight="400"
fontWeight="500"
sx={{ ml: '.5rem', color: theme.palette.logo.primary }}
>
{app}
Expand All @@ -108,7 +108,7 @@ export default function PlatformSwitcher() {
}}
>
<Typography
variant="h5"
variant="subtitle2"
component="span"
noWrap
fontWeight="500"
Expand All @@ -118,7 +118,7 @@ export default function PlatformSwitcher() {
</Typography>
<Icon path={mdiChevronRight} size={0.9} />
</Box>
<Typography variant="subtitle2" component="span" fontWeight="300">
<Typography variant="caption" component="span" fontWeight="300">
{app.subText}
</Typography>
</Box>
Expand Down
108 changes: 62 additions & 46 deletions src/theme/typography.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,98 +16,114 @@ function responsiveFontSizes({ sm, md, lg }: { sm: number; md: number; lg: numbe
}
}

const FONT_PRIMARY = 'ClashDisplay'
const FONT_SECONDARY = 'Inter'
const FONT = 'Inter'

const typography = {
fontFamily: FONT_PRIMARY,
fontFamily: FONT,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightSemiBold: 600,
fontWeightBold: 700,
h1: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 80 / 64,
fontSize: pxToRem(40),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(64),
lineHeight: '83px',
letterSpacing: '-2.2%',
fontWeight: '700',
...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
},
h2: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 64 / 48,
fontSize: pxToRem(32),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(48),
lineHeight: '62px',
letterSpacing: '-2.2%',
fontWeight: '700',
...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
},
h3: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 1.5,
fontSize: pxToRem(24),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(40),
lineHeight: '52px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
},
h4: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 1.5,
fontSize: pxToRem(20),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(32),
lineHeight: '42px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
},
h5: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 1.5,
fontSize: pxToRem(18),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(24),
lineHeight: '36px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
},
h6: {
fontFamily: FONT_PRIMARY,
fontWeight: 700,
lineHeight: 28 / 18,
fontSize: pxToRem(17),
fontFamily: FONT,
fontStyle: 'normal',
fontSize: pxToRem(20),
lineHeight: '26px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
},
subtitle1: {
fontFamily: FONT_PRIMARY,
fontFamily: FONT,
fontWeight: 500,
lineHeight: 1.5,
fontSize: pxToRem(16),
lineHeight: '36px',
letterSpacing: '-2.2%',
fontSize: pxToRem(24),
},
subtitle2: {
fontFamily: FONT_PRIMARY,
fontFamily: FONT,
fontWeight: 500,
lineHeight: 22 / 14,
fontSize: pxToRem(14),
lineHeight: '30px',
letterSpacing: '-1.1%',
fontSize: pxToRem(20),
},
body1: {
fontFamily: FONT_SECONDARY,
lineHeight: 1.5,
fontFamily: FONT,
lineHeight: '28px',
letterSpacing: '-1.1%',
fontWeight: 500,
fontSize: pxToRem(16),
fontSize: pxToRem(18),
},
body2: {
fontFamily: FONT_SECONDARY,
lineHeight: 22 / 14,
fontFamily: FONT,
lineHeight: '24px',
fontWeight: 500,
fontSize: pxToRem(14),
fontSize: pxToRem(16),
letterSpacing: '-1.1%',
},
caption: {
fontFamily: FONT_SECONDARY,
lineHeight: 1.5,
fontFamily: FONT,
lineHeight: '20px',
fontWeight: 500,
fontSize: pxToRem(12),
fontSize: pxToRem(14),
letterSpacing: '-1.1%',
},
overline: {
fontFamily: FONT_SECONDARY,
fontFamily: FONT,
fontWeight: 700,
lineHeight: 1.5,
lineHeight: '18px',
fontSize: pxToRem(12),
letterSpacing: 1.1,
letterSpacing: '-1.1%',
textTransform: 'uppercase',
},
button: {
fontFamily: FONT_SECONDARY,
fontFamily: FONT,
fontWeight: 700,
lineHeight: 24 / 14,
fontSize: pxToRem(14),
Expand Down
Loading

0 comments on commit 3454545

Please sign in to comment.