refactor: use font styles for different variants

PolkaGate · Feb 1, 2025 · f9e2705 · f9e2705
1 parent b5e7844
commit f9e2705
Show file tree

Hide file tree

Showing 33 changed files with 78 additions and 95 deletions.
diff --git a/packages/extension-polkagate/src/components/ActionButton.tsx b/packages/extension-polkagate/src/components/ActionButton.tsx
@@ -28,12 +28,10 @@ export default function ActionButton ({ StartIcon, contentPlacement = 'start', d
   const toggleHover = useCallback(() => setHovered(!hovered), [hovered]);
 
   const ButtonFontStyle = useMemo(() => ({
-    fontFamily: 'Inter',
-    fontSize: '14px',
-    fontWeight: 600,
+    ...theme.typography['B-2'],
     justifyContent: { center: 'center', end: 'flex-end', start: 'flex-start' }[contentPlacement],
     textTransform: 'none'
-  } as React.CSSProperties), [contentPlacement]);
+  } as React.CSSProperties), [contentPlacement, theme.typography]);
 
   const GeneralButtonStyle = {
     '&:hover': {

diff --git a/packages/extension-polkagate/src/components/ActionCard.tsx b/packages/extension-polkagate/src/components/ActionCard.tsx
@@ -85,12 +85,12 @@ function ActionCard ({ Icon, description, iconWithBackground, logoIcon, onClick,
       }
       <Grid container item>
         <Grid alignItems='center' container item>
-          <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} fontFamily='Inter' fontSize='14px' fontWeight={600} sx={{ transition: 'all 250ms ease-out' }}>
+          <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} sx={{ transition: 'all 250ms ease-out' }} variant='B-2'>
             {title}
           </Typography>
           <ArrowRight2 color={hovered ? '#AA83DC' : theme.palette.text.primary} size='12' style={chevronStyle} />
         </Grid>
-        <Typography color={theme.palette.text.secondary} fontFamily='Inter' fontSize='12px' fontWeight={500}>
+        <Typography color={theme.palette.text.secondary} variant='B-4'>
           {description}
         </Typography>
       </Grid>

diff --git a/packages/extension-polkagate/src/components/ExtensionPopup.tsx b/packages/extension-polkagate/src/components/ExtensionPopup.tsx
@@ -59,7 +59,7 @@ function ExtensionPopup ({ TitleIcon, children, handleClose, openMenu, title, wi
               ? <TitleIcon color='#AA83DC' size={28} variant='Bold' />
               : undefined
             }
-            <Typography color='text.primary' fontFamily='OdibeeSans' fontSize='24px' fontWeight={400} textTransform='uppercase'>
+            <Typography color='text.primary' textTransform='uppercase' variant='H-3'>
               {title}
             </Typography>
           </Grid>

diff --git a/packages/extension-polkagate/src/components/GlowCheckbox.tsx b/packages/extension-polkagate/src/components/GlowCheckbox.tsx
@@ -74,9 +74,7 @@ function GlowCheckbox ({ changeState, checked = false, disabled, iconStyle = {},
 
   const LabelFontStyle = {
     color: theme.palette.text.primary,
-    fontFamily: 'Inter',
-    fontSize: '12px',
-    fontWeight: 500
+    ...theme.typography['B-4']
   } as React.CSSProperties;
 
   return (

diff --git a/packages/extension-polkagate/src/components/GradientButton.tsx b/packages/extension-polkagate/src/components/GradientButton.tsx
@@ -82,7 +82,7 @@ export default function GradientButton ({ EndIcon, StartIcon, contentPlacement =
     <Grid component='button' container item onClick={disabled ? noop : onClick} onMouseEnter={toggleHovered} onMouseLeave={toggleHovered} sx={GradientButtonStyle}>
       {StartIcon && <StartIcon color={theme.palette.text.primary} size='20' style={{ zIndex: 10 }} variant='Bulk' />}
       {startIconNode && startIconNode}
-      <Typography sx={{ fontFamily: 'Inter', fontSize: '14px', fontWeight: 600, pl: '10px', pr: '2px', width: 'fit-content', zIndex: 10 }}>
+      <Typography sx={{ pl: contentPlacement === 'center' ? 0 : '10px', pr: '2px', width: 'fit-content', zIndex: 10 }} variant='B-2'>
         {text}
       </Typography>
       {EndIcon && <EndIcon color={theme.palette.text.primary} size='20' style={{ zIndex: 10 }} variant='Bulk' />}

diff --git a/packages/extension-polkagate/src/components/NeonButton.tsx b/packages/extension-polkagate/src/components/NeonButton.tsx
@@ -28,12 +28,10 @@ export default function NeonButton ({ EndIcon, StartIcon, contentPlacement = 'st
 
   const ButtonFontStyle = useMemo(() => ({
     color: hovered ? '#FF4FB9' : '#BEAAD8',
-    fontFamily: 'Inter',
-    fontSize: '14px',
-    fontWeight: 600,
+    ...theme.typography['B-2'],
     justifyContent: { center: 'center', end: 'flex-end', start: 'flex-start' }[contentPlacement],
     textTransform: 'none'
-  } as React.CSSProperties), [contentPlacement, hovered]);
+  } as React.CSSProperties), [contentPlacement, hovered, theme.typography]);
 
   const GeneralButtonStyle = {
     background: 'transparent',

diff --git a/packages/extension-polkagate/src/components/PasswordInput.tsx b/packages/extension-polkagate/src/components/PasswordInput.tsx
@@ -46,9 +46,8 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   },
   '& input::placeholder': {
     color: theme.palette.text.secondary,
-    fontFamily: 'Inter',
-    fontSize: '12px',
-    fontWeight: 500
+    ...theme.typography['B-4'],
+    textAlign: 'left'
   },
   transition: 'all 150ms ease-out'
 }));
@@ -85,7 +84,8 @@ export default function PasswordInput ({ focused = false, onEnterPress, onPassCh
   return (
     <Container disableGutters sx={style}>
       {title &&
-        <Typography fontFamily='Inter' fontSize='13px' fontWeight={500} mb='12px' textAlign='left' width='100%'>
+        // In design its variant is B-1
+        <Typography mb='12px' textAlign='left' variant='B-4' width='100%'>
           {title}
         </Typography>
       }

diff --git a/packages/extension-polkagate/src/components/SearchField.tsx b/packages/extension-polkagate/src/components/SearchField.tsx
@@ -35,10 +35,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   },
   '& input::placeholder': {
     color: theme.palette.text.secondary,
-    fontFamily: 'Inter',
-    fontSize: '13px',
-    fontWeight: 500,
-    textAlign: 'center'
+    ...theme.typography['B-4']
   },
   transition: 'all 150ms ease-out'
 }));

diff --git a/packages/extension-polkagate/src/components/Tooltip.tsx b/packages/extension-polkagate/src/components/Tooltip.tsx
@@ -5,7 +5,7 @@
 
 import type { RefObject } from 'react';
 
-import { Tooltip } from '@mui/material';
+import { Tooltip, useTheme } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
 interface CustomTooltipProps {
@@ -37,6 +37,7 @@ interface Position {
 }
 
 const CustomTooltip = ({ content, placement = 'bottom', positionAdjustment, targetRef }: CustomTooltipProps) => {
+  const theme = useTheme();
   const [isVisible, setIsVisible] = useState(false);
   const [position, setPosition] = useState<Position | null>(null);
 
@@ -99,9 +100,7 @@ const CustomTooltip = ({ content, placement = 'bottom', positionAdjustment, targ
               backgroundColor: '#674394',
               borderRadius: '8px',
               color: '#fff',
-              fontFamily: 'Inter',
-              fontSize: '12px',
-              fontWeight: 400,
+              ...theme.typography['B-4'],
               p: '8px'
             }
           }

diff --git a/packages/extension-polkagate/src/partials/ConnectedDapp.tsx b/packages/extension-polkagate/src/partials/ConnectedDapp.tsx
@@ -34,7 +34,7 @@ const DappInfo = ({ dappName, favicon }: { favicon?: string, dappName: string })
         variant='square'
       />
       <Grid alignItems='center' container item justifyContent='center' xs>
-        <Typography color='text.secondary' fontFamily='Inter' fontSize='14px' fontWeight={600} sx={{ maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        <Typography color='text.secondary' sx={{ maxWidth: '300px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} variant='B-2'>
           {dappName}
         </Typography>
       </Grid>
@@ -117,12 +117,12 @@ function ConnectedAccounts ({ closePopup, dappInfo, setRefresh }: ConnectedAccou
           <Grid alignItems='center' container item justifyContent='space-between' p='10px 15px'>
             <Grid container item sx={{ columnGap: '8px', width: 'fit-content' }}>
               <User color='#AA83DC' size='18' variant='Bulk' />
-              <Typography color='#AA83DC' fontFamily='Inter' fontSize='14px' fontWeight={600}>
+              <Typography color='#AA83DC' variant='B-2'>
                 {t('Accounts')}
               </Typography>
             </Grid>
             <Grid container item onClick={selectAllAccounts} sx={{ columnGap: '8px', cursor: 'pointer', width: 'fit-content' }}>
-              <Typography color='#AA83DC' fontFamily='Inter' fontSize='14px' fontWeight={600}>
+              <Typography color='#AA83DC' variant='B-4'>
                 {isAllSelected ? t('Disconnect all') : t('Connect all')}
               </Typography>
               <GradientSwitch
@@ -143,7 +143,7 @@ function ConnectedAccounts ({ closePopup, dappInfo, setRefresh }: ConnectedAccou
                         address={address}
                         size={24}
                       />
-                      <Typography color='text.primary' fontFamily='Inter' fontSize='12px' fontWeight={500} sx={{ maxWidth: '150px', overflowX: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      <Typography color='text.primary' sx={{ maxWidth: '150px', overflowX: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} variant='B-4'>
                         {name}
                       </Typography>
                     </Grid>
@@ -250,7 +250,7 @@ export default function ConnectedDapp (): React.ReactElement {
         withoutTopBorder
       >
         <Grid container item justifyContent='center' sx={{ overflow: 'hidden', position: 'relative', pt: '5px', zIndex: 1 }}>
-          <Typography color='text.secondary' fontFamily='Inter' fontSize='12px' fontWeight={500}>
+          <Typography color='text.secondary' variant='B-4'>
             {t('Here you can manage the current connections to your accounts')}
           </Typography>
           <DappInfo

diff --git a/packages/extension-polkagate/src/partials/PrivacyPolicy.tsx b/packages/extension-polkagate/src/partials/PrivacyPolicy.tsx
@@ -32,29 +32,29 @@ function PrivacyPolicy ({ openMenu, setPopup }: Props): React.ReactElement {
       title={t('Privacy and security')}
     >
       <Grid container item justifyContent='center' sx={{ pb: '5px', position: 'relative', pt: '15px', rowGap: '20px', zIndex: 1 }}>
-        <Typography color='text.secondary' fontFamily='Inter' fontSize='12px' fontWeight={500} px='20px' textAlign='center'>
+        <Typography color='text.secondary' px='20px' variant='B-4'>
           {t('PolkaGate is a browser extension that lets you use the Polkadot network and decentralized apps. We respect your privacy and do not collect or store any of your personal data. This is how we protect your privacy:')}
         </Typography>
         <Box>
           <Box sx={{ alignItems: 'flex-start', display: 'flex', gap: '8px' }}>
             <SquareIcon sx={{ color: '#FF4FB9', fontSize: '10px', marginTop: '4px', transform: 'rotate(45deg)' }} />
-            <Typography color='text.secondary' fontFamily='Inter' fontSize='13px' fontWeight={500} textAlign='left'>
+            <Typography color='text.secondary' textAlign='left' variant='B-1'>
               {t('We do not collect your clicks, browsing history, keys, addresses, transactions, or any other data.')}
             </Typography>
           </Box>
         </Box>
         <Box>
           <Box sx={{ alignItems: 'flex-start', display: 'flex', gap: '8px' }}>
             <SquareIcon sx={{ color: '#FF4FB9', fontSize: '10px', marginTop: '4px', transform: 'rotate(45deg)' }} />
-            <Typography color='text.secondary' fontFamily='Inter' fontSize='13px' fontWeight={500} textAlign='left'>
+            <Typography color='text.secondary' textAlign='left' variant='B-1'>
               {t('We use open-source code, end-to-end encryption, local storage, and secure communication protocols.')}
             </Typography>
           </Box>
         </Box>
         <Box>
           <Box sx={{ alignItems: 'flex-start', display: 'flex', gap: '8px' }}>
             <SquareIcon sx={{ color: '#FF4FB9', fontSize: '10px', marginTop: '4px', transform: 'rotate(45deg)' }} />
-            <Typography color='text.secondary' fontFamily='Inter' fontSize='13px' fontWeight={500} textAlign='left'>
+            <Typography color='text.secondary' textAlign='left' variant='B-1'>
               {t('We may update this privacy policy and notify you on our website and extension.')}
             </Typography>
           </Box>
@@ -65,13 +65,13 @@ function PrivacyPolicy ({ openMenu, setPopup }: Props): React.ReactElement {
             <Translation>
               {() => (
                 <div style={{ lineHeight: 1.3, textAlign: 'left' }}>
-                  <span style={{ color: theme.palette.text.secondary, fontFamily: 'Inter', fontSize: '13px', fontWeight: 500, textAlign: 'left' }}>
+                  <span style={{ color: theme.palette.text.secondary, ...theme.typography['B-1'], textAlign: 'left' }}>
                     {t('If you have any questions, please contact us at ')}
                   </span>
-                  <Link href='mailto:[email protected]' sx={{ color: 'text.secondary', textDecoration: 'underline' }}>
+                  <Link href='mailto:[email protected]' sx={{ color: 'text.secondary', ...theme.typography['B-1'], textDecoration: 'underline' }}>
                     {'[email protected]'}
                   </Link>
-                  <span style={{ color: theme.palette.text.secondary, fontFamily: 'Inter', fontSize: '13px', fontWeight: 500, textAlign: 'left' }}>
+                  <span style={{ color: theme.palette.text.secondary, ...theme.typography['B-1'], textAlign: 'left' }}>
                     {t(' or follow us on our social media accounts.')}
                   </span>
                 </div>

diff --git a/packages/extension-polkagate/src/partials/SelectLanguage.tsx b/packages/extension-polkagate/src/partials/SelectLanguage.tsx
@@ -83,7 +83,7 @@ const LanguageOptions = React.memo(function LanguageOptions ({ handleLanguageSel
                 src={flag(value as string)}
                 sx={{ borderRadius: '5px', height: '18px', width: '18px' }}
               />
-              <Typography color='text.primary' fontFamily='Inter' fontSize='14px' fontWeight={600}>
+              <Typography color='text.primary' variant='B-2'>
                 {text}
               </Typography>
             </Grid>

diff --git a/packages/extension-polkagate/src/partials/Version.tsx b/packages/extension-polkagate/src/partials/Version.tsx
@@ -13,7 +13,7 @@ export default function Version (): React.ReactElement {
 
   return (
     <Grid alignItems='center' container item justifyContent='center'>
-      <Typography color='#674394' fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px' pt='8px' textAlign='center'>
+      <Typography color='#674394' pt='8px' variant='B-1'>
         {'v.'}{version}
       </Typography>
     </Grid>

diff --git a/packages/extension-polkagate/src/partials/Version2.tsx b/packages/extension-polkagate/src/partials/Version2.tsx
@@ -20,15 +20,15 @@ export default function Version (): React.ReactElement {
 
   return (
     <Grid alignItems='center' container item justifyContent='center' sx={{ columnGap: '5px', py: '24px' }}>
-      <Typography color='#BEAAD880' fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px'>
+      <Typography color='#BEAAD880' variant='B-1'>
         {t('Version')}
       </Typography>
-      <Typography color='#BEAAD880' fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px'>
+      <Typography color='#BEAAD880' variant='B-1'>
         {version}
       </Typography>
       <GradientDivider orientation='vertical' />
       <Sparkles color={hovered ? '#AA83DC' : '#FF4FB9'} height={12} width={12} />
-      <Typography color={hovered ? '#AA83DC' : '#BEAAD8'} fontFamily='Inter' fontSize='13px' fontWeight={500} lineHeight='18.2px' onMouseEnter={toggleHovered} onMouseLeave={toggleHovered} sx={{ cursor: 'pointer', textDecoration: hovered ? 'underline' : 'none' }}>
+      <Typography color={hovered ? '#AA83DC' : '#BEAAD8'} onMouseEnter={toggleHovered} onMouseLeave={toggleHovered} sx={{ cursor: 'pointer', textDecoration: hovered ? 'underline' : 'none' }} variant='B-1'>
         {t('What’s new page')}
       </Typography>
     </Grid>

diff --git a/packages/extension-polkagate/src/partials/WelcomeHeader.tsx b/packages/extension-polkagate/src/partials/WelcomeHeader.tsx
@@ -90,7 +90,7 @@ function WelcomeHeader (): React.ReactElement {
           onMouseLeave={onHoveredPopup()}
           sx={{ alignItems: 'center', bgcolor: hovered === WelcomeHeaderPopups.LANGUAGE ? '#674394' : '#BFA1FF26', borderRadius: '10px', cursor: 'pointer', p: '5px', transition: 'all 250ms ease-out', width: 'fit-content' }}
         >
-          <Typography color={hovered === WelcomeHeaderPopups.LANGUAGE ? '#EAEBF1' : '#AA83DC'} fontFamily='Inter' fontSize='13px' fontWeight={500} sx={{ transition: 'all 250ms ease-out' }}>
+          <Typography color={hovered === WelcomeHeaderPopups.LANGUAGE ? '#EAEBF1' : '#AA83DC'} sx={{ transition: 'all 250ms ease-out' }} variant='B-1'>
             {'EN'}
           </Typography>
           <ArrowDown2

diff --git a/packages/extension-polkagate/src/popup/home/partial/AccountSelection.tsx b/packages/extension-polkagate/src/popup/home/partial/AccountSelection.tsx
@@ -5,7 +5,7 @@
 
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 
-import { Container, Grid } from '@mui/material';
+import { Container, Grid, useTheme } from '@mui/material';
 import { ArrowDown2 } from 'iconsax-react';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
@@ -14,6 +14,7 @@ import ScrollingTextBox from './ScrollingTextBox';
 import SelectAccount from './SelectAccount';
 
 function AccountSelection (): React.ReactElement {
+  const theme = useTheme();
   const { accounts } = useContext(AccountContext);
 
   const [selectedAccount, setSelectedAccount] = useState<AccountJson | undefined>();
@@ -54,9 +55,7 @@ function AccountSelection (): React.ReactElement {
         <ScrollingTextBox
           style={{
             color: 'text.primary',
-            fontFamily: 'Inter',
-            fontSize: '14px',
-            fontWeight: 600
+            ...theme.typography['B-2']
           }}
           text={selectedAccount?.name ?? ''}
           width={65}

diff --git a/packages/extension-polkagate/src/popup/home/partial/AssetTabs.tsx b/packages/extension-polkagate/src/popup/home/partial/AssetTabs.tsx
@@ -60,7 +60,7 @@ function ChainTokensTab ({ isActive = false, setTab }: TabProps) {
           transition: 'all 250ms ease-out'
         }}
       />
-      <Typography color={showChains ? '#EAEBF1' : '#AA83DC'} fontFamily='Inter' fontSize='14px' fontWeight={600} sx={{ color: showChains ? '#EAEBF1' : '#AA83DC', opacity: textOpacity, textTransform: 'capitalize', transition: 'opacity 0.3s ease-in-out, color 0.3s ease-in-out' }}>
+      <Typography color={showChains ? '#EAEBF1' : '#AA83DC'} sx={{ color: showChains ? '#EAEBF1' : '#AA83DC', opacity: textOpacity, textTransform: 'capitalize', transition: 'opacity 0.3s ease-in-out, color 0.3s ease-in-out' }} variant='B-2'>
         {displayedText}
       </Typography>
       <UnfoldMoreIcon sx={{ color: showChains ? '#AA83DC' : '#EAEBF1', fontSize: '15px' }} />
@@ -74,7 +74,7 @@ function NFTTab ({ isActive = false }: TabProps) {
   return (
     <Container disableGutters sx={{ alignItems: 'center', columnGap: '3px', cursor: 'pointer', display: 'flex', width: 'fit-content' }}>
       <Triangle color='#AA83DC' size='16' variant='Bulk' />
-      <Typography color={isActive ? '#EAEBF1' : '#AA83DC'} fontFamily='Inter' fontSize='14px' fontWeight={600} textTransform='capitalize'>
+      <Typography color={isActive ? '#EAEBF1' : '#AA83DC'} textTransform='capitalize' variant='B-2'>
         {t('NFTs')}
       </Typography>
     </Container>

diff --git a/packages/extension-polkagate/src/popup/home/partial/AssetsBox.tsx b/packages/extension-polkagate/src/popup/home/partial/AssetsBox.tsx
@@ -43,7 +43,7 @@ const AssetNull = () => {
         src={SafeBox as string}
         sx={{ width: '135px' }}
       />
-      <Typography fontFamily='Inter' fontSize='14px' fontWeight={600} pt='10px'>
+      <Typography pt='10px' variant='B-2'>
         {t("You don't have any tokens yet")}
       </Typography>
     </Container>

diff --git a/packages/extension-polkagate/src/popup/home/partial/ChainsAssetsBox.tsx b/packages/extension-polkagate/src/popup/home/partial/ChainsAssetsBox.tsx
@@ -32,7 +32,7 @@ function AssetsHeader ({ assetsDetail }: { assetsDetail: AssetDetailType }) {
     <Grid alignItems='center' container item justifyContent='space-between'>
       <Grid alignItems='center' container item sx={{ bgcolor: '#C6AECC26', borderRadius: '9px', columnGap: '4px', p: '2px 3px', pr: '4px', width: 'fit-content' }}>
         <AssetLogo assetSize='18px' baseTokenSize='16px' genesisHash={assetsDetail.genesisHash} logo={assetsDetail?.logoInfo?.logo} subLogo={undefined} />
-        <Typography color='text.secondary' fontFamily='Inter' fontSize='14px' fontWeight={600}>
+        <Typography color='text.secondary' variant='B-2'>
           {assetsDetail.chainName}
         </Typography>
       </Grid>

diff --git a/packages/extension-polkagate/src/popup/home/partial/Currency.tsx b/packages/extension-polkagate/src/popup/home/partial/Currency.tsx
@@ -35,7 +35,7 @@ function Currency () {
     <>
       <Grid alignItems='center' container item justifyContent='center' onClick={toggleMenu} sx={containerStyle}>
         <Share color='#BEAAD8' size='18' variant='Bold' />
-        <Typography color='text.secondary' fontFamily='Inter' fontSize='14px' fontWeight={600} textTransform='uppercase'>
+        <Typography color='text.secondary' textTransform='uppercase' variant='B-2'>
           {currency?.code}
         </Typography>
       </Grid>

diff --git a/packages/extension-polkagate/src/popup/home/partial/DailyChange.tsx b/packages/extension-polkagate/src/popup/home/partial/DailyChange.tsx
@@ -86,7 +86,7 @@ function DailyChange (): React.ReactElement {
       <Typography style={{ color: color(youHave?.change), fontFamily: 'Inter', fontSize: '14px', fontWeight: 900, lineHeight: '15px' }}>
         •
       </Typography>
-      <Typography style={{ color: color(youHave?.change), fontFamily: 'Inter', fontSize: '13px', fontWeight: 500, lineHeight: '15px' }}>
+      <Typography style={{ color: color(youHave?.change), lineHeight: '15px' }} variant='B-1'>
         {`${COIN_GECKO_PRICE_CHANGE_DURATION}h`}
       </Typography>
     </Container>