Update Typography (#687)

* Refactor text styles * Update typography in missing places * Add hover effect for body3 typography type * Font size as numbers instead of px * Apply constant values in some components instead of numeric values * Removing redundant * Remove px in fontSize definition * Increase spacing between elements in LastInteractions items
CirclesUBI · Jun 19, 2023 · a238759 · a238759
1 parent f76232c
commit a238759
Show file tree

Hide file tree

Showing 61 changed files with 729 additions and 425 deletions.
diff --git a/src/App.js b/src/App.js
@@ -46,16 +46,8 @@ const useStyles = makeStyles((theme) => {
         boxShadow: theme.custom.shadows.lightGray,
         color: theme.custom.colors.purple,
         textAlign: 'center',
-        '& span': {
-          background: theme.custom.gradients.lightPinkToPurple,
-          '-webkit-background-clip': 'text',
-          '-webkit-text-fill-color': 'transparent',
-        },
         '& div': {
           paddingLeft: '0px',
-          background: theme.custom.gradients.lightPinkToPurple,
-          '-webkit-background-clip': 'text',
-          '-webkit-text-fill-color': 'transparent',
         },
       },
       '&.notistack-MuiContent-info': {

diff --git a/src/components/ActivityStream.js b/src/components/ActivityStream.js
@@ -64,19 +64,10 @@ const useStyles = makeStyles((theme) => ({
       background: theme.custom.gradients.purple,
     },
   },
-  cardHeaderContent: {
-    fontWeight: theme.typography.fontWeight,
-  },
-  cardHeaderSubheader: {
-    fontWeight: theme.typography.fontWeightLight,
-    fontSize: '0.8rem',
-  },
   cardHeaderAction: {
     marginTop: 0,
     marginRight: theme.spacing(0.25),
     alignSelf: 'center',
-    fontSize: '2rem',
-    fontWeight: theme.typography.fontWeightLight,
   },
   cardContent: {
     paddingTop: 0,
@@ -85,13 +76,11 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   cardContentText: {
-    fontSize: '0.8rem',
     paddingBottom: theme.spacing(1),
   },
   cardContentPaymentNote: {
     margin: 0,
     paddingBottom: 0,
-    fontSize: '0.8rem',
     wordWrap: 'break-word',
     fontWeight: theme.typography.fontWeightMedium,
   },
@@ -237,7 +226,16 @@ const ActivityStreamItem = (props) => {
       return;
     }
     const prefix = data.from === props.safeAddress ? '-' : '+';
-    return `${prefix}${data.value}`;
+    return (
+      <Typography
+        classes={{ root: prefix === '+' ? 'h1_blue' : 'h1_violet' }}
+        component="span"
+        variant="h1"
+      >
+        {prefix}
+        {data.value}
+      </Typography>
+    );
   }, [data, props.safeAddress]);
 
   const message = useMemo(() => {
@@ -279,15 +277,16 @@ const ActivityStreamItem = (props) => {
           content: classes.cardHeaderContent,
           subheader: classes.cardHeaderSubheader,
         }}
-        subheader={formattedDate}
-        title={message}
+        subheader={
+          <Typography classes={{ root: 'body6_monochrome' }} variant="body6">
+            {formattedDate}
+          </Typography>
+        }
+        title={<Typography variant="h5">{message}</Typography>}
         onClick={handleClick}
       />
       <Collapse in={isExpanded}>
-        <CardContent
-          // className={classes.cardContent}
-          classes={{ root: classes.cardContent }}
-        >
+        <CardContent classes={{ root: classes.cardContent }}>
           <ActivityStreamExplained
             actor={actor}
             data={data}
@@ -337,20 +336,18 @@ const ActivityStreamExplained = ({
       )}
       <Typography
         className={classes.cardContentText}
-        color="textSecondary"
         component="p"
-        variant="body1"
+        variant="body4"
       >
         {text}
       </Typography>
       <Typography
         className={classes.cardContentText}
-        color="textSecondary"
         component="p"
-        variant="body1"
+        variant="body4"
       >
         {translate('ActivityStream.bodyExplainSecondary')}{' '}
-        <ExternalLink href={FAQ_URL} underline="hover">
+        <ExternalLink classes="body5_link" href={FAQ_URL} variant="body5">
           {translate('ActivityStream.linkLearnMore')}
         </ExternalLink>
       </Typography>
@@ -368,7 +365,6 @@ const ActivityStreamPaymentNote = ({ txHash }) => {
         <Divider className={classes.divider} light />
         <Typography
           className={classes.cardContentPaymentNote}
-          color="textSecondary"
           component="p"
           variant="body1"
         >

diff --git a/src/components/AvatarHeader.js b/src/components/AvatarHeader.js
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -10,7 +10,7 @@ import { MY_PROFILE_PATH } from '~/routes';
 import Avatar from '~/components/Avatar';
 import UsernameDisplay from '~/components/UsernameDisplay';
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   avatarContainer: {
     height: '80px',
     margin: '0 auto',
@@ -26,10 +26,7 @@ const useStyles = makeStyles((theme) => ({
     marginTop: '8px',
 
     '& a': {
-      fontSize: '18px',
       textDecoration: 'none',
-      color: theme.custom.colors.black,
-      fontWeight: 'black',
     },
   },
 }));
@@ -73,7 +70,7 @@ const AvatarHeader = ({
       </Box>
       <Box className={classes.textContainer}>
         <Link className={classes.profileLink} to={MY_PROFILE_PATH}>
-          {displayedUsername}
+          <Typography variant="h3">{displayedUsername}</Typography>
         </Link>
       </Box>
     </Box>

diff --git a/src/components/AvatarUploader.js b/src/components/AvatarUploader.js
@@ -1,4 +1,4 @@
-import { Avatar, Box, CircularProgress } from '@mui/material';
+import { Avatar, Box, CircularProgress, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import mime from 'mime/lite';
 import PropTypes from 'prop-types';
@@ -83,7 +83,11 @@ const AvatarUploader = ({
     } catch (error) {
       dispatch(
         notify({
-          text: translate('AvatarUploader.errorAvatarUpload'),
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translate('AvatarUploader.errorAvatarUpload')}
+            </Typography>
+          ),
           type: NotificationsTypes.ERROR,
         }),
       );

diff --git a/src/components/BalanceDisplay.js b/src/components/BalanceDisplay.js
@@ -20,10 +20,6 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'center',
     height: '6.5rem',
   },
-  balance: {
-    fontSize: '2.9rem',
-    fontWeight: theme.typography.fontWeightRegular,
-  },
   balanceIcon: {
     position: 'relative',
     top: 2,
@@ -59,7 +55,7 @@ const BalanceDisplay = () => {
         {isLoading ? (
           <CircularProgress />
         ) : (
-          <Typography className={classes.balance}>
+          <Typography variant="balance1">
             <IconCircles className={classes.balanceIcon} />
             {tokenBalance}
           </Typography>

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -5,10 +5,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { fontSizeRegular } from '~/styles/fonts';
+
 const useStyles = makeStyles((theme) => ({
   button: {
     fontWeight: theme.typography.fontWeightMedium,
-    fontSize: '16px',
+    fontSize: fontSizeRegular,
     textTransform: 'none',
     borderRadius: 30,
     zIndex: theme.zIndex.layer2,
@@ -43,6 +45,8 @@ const useStyles = makeStyles((theme) => ({
         background: theme.custom.gradients.lightPinkToPurple,
         '-webkit-background-clip': 'text',
         '-webkit-text-fill-color': 'transparent',
+        backgroundClip: 'text',
+        textFillColor: 'transparent',
       },
     },
     '&.Mui-disabled': {
@@ -52,12 +56,15 @@ const useStyles = makeStyles((theme) => ({
         background: 'none',
         color: theme.custom.colors.lola,
         '-webkit-text-fill-color': theme.custom.colors.lola,
+        textFillColor: 'transparent',
       },
     },
     '& .MuiTouchRipple-root': {
       background: theme.custom.gradients.pinkToPurple,
       '-webkit-background-clip': 'text',
       '-webkit-text-fill-color': 'transparent',
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
     },
   },
   buttonDanger: {
@@ -70,28 +77,34 @@ const useStyles = makeStyles((theme) => ({
       background: theme.custom.colors.lightGrey,
       '& .MuiTouchRipple-root': {
         '-webkit-text-fill-color': theme.custom.colors.white,
+        textFillColor: theme.custom.colors.white,
       },
     },
     '& .MuiTouchRipple-root': {
       '-webkit-text-fill-color': theme.custom.colors.white,
+      textFillColor: theme.custom.colors.white,
     },
   },
   buttonText: {
     border: 0,
     background: theme.custom.gradients.purple,
-    backgroundClip: 'text',
     color: 'transparent',
     '-webkit-background-clip': 'text',
     '-webkit-text-fill-color': 'transparent',
+    backgroundClip: 'text',
+    textFillColor: 'transparent',
     '&:hover': {
       background: theme.custom.colors.lightPinkToPurple,
       '-webkit-background-clip': 'text',
       '-webkit-text-fill-color': 'transparent',
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
     },
     '&.Mui-disabled': {
       background: 'transparent',
       color: theme.custom.colors.lily,
       '-webkit-text-fill-color': theme.custom.colors.lily,
+      textFillColor: theme.custom.colors.lily,
 
       '&:hover': {
         cursor: 'not-allowed',

diff --git a/src/components/ButtonClipboard.js b/src/components/ButtonClipboard.js
@@ -1,4 +1,4 @@
-import { IconButton } from '@mui/material';
+import { IconButton, Typography } from '@mui/material';
 import Clipboard from 'clipboard';
 import PropTypes from 'prop-types';
 import React, { createRef, useEffect } from 'react';
@@ -23,8 +23,12 @@ const ButtonClipboard = ({ text, children, isIcon, ...props }) => {
     clipboard.on('success', () => {
       dispatch(
         notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translate('ButtonClipboard.infoCopiedMessage')}
+            </Typography>
+          ),
           type: NotificationsTypes.SUCCESS,
-          text: translate('ButtonClipboard.infoCopiedMessage'),
         }),
       );
     });

diff --git a/src/components/ButtonIcon.js b/src/components/ButtonIcon.js
@@ -5,10 +5,12 @@ import React from 'react';
 
 import { iconSelector } from '../styles/icons';
 
+import { fontSizeSmaller, fontWeightRegular } from '~/styles/fonts';
+
 const useStyles = makeStyles((theme) => ({
   button: {
-    fontWeight: '400',
-    fontSize: '12px',
+    fontWeight: fontWeightRegular,
+    fontSize: fontSizeSmaller,
     color: theme.custom.colors.violet,
     textTransform: 'none',
     '&:hover': {

diff --git a/src/components/ButtonTrust.js b/src/components/ButtonTrust.js
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { fontSizeLargest } from '~/styles/fonts';
 import {
   IconTrust,
   IconTrustActive,
@@ -129,7 +130,7 @@ const ButtonTrust = ({
       <Box className={classes.trustButtonContainer}>
         <IconWobblyCircle className={classes.trustButtonIconBackground} />
         {trustStatus.isPending ? (
-          <CircularProgress size={24} />
+          <CircularProgress size={fontSizeLargest} />
         ) : (
           <TrustIcon className={classes.trustButtonIcon} />
         )}

diff --git a/src/components/ButtonWobbly.js b/src/components/ButtonWobbly.js
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import { fontSizeLargest } from '~/styles/fonts';
 import { IconWobblyCircle, iconSelector } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
@@ -67,11 +68,10 @@ const ButtonWobbly = ({
         disabled: classes.buttonWobblyDisabled,
       }}
       disabled={isPending || !isReady}
-      to={to}
       onClick={onClick}
     >
       {isPending ? (
-        <CircularProgress size={24} />
+        <CircularProgress size={fontSizeLargest} />
       ) : (
         <Box className={classes.buttonContainer}>
           <IconWobblyCircle className={classes.buttonWobblyIconBackground} />

diff --git a/src/components/CenteredHeading.js b/src/components/CenteredHeading.js
@@ -7,7 +7,7 @@ import Centered from '~/components/Centered';
 const CenteredHeading = ({ children }) => {
   return (
     <Centered>
-      <Typography align="center" component="h1" noWrap variant="h6">
+      <Typography align="center" component="h1" noWrap variant="h2">
         {children}
       </Typography>
     </Centered>

diff --git a/src/components/CheckboxPrivacy.js b/src/components/CheckboxPrivacy.js
@@ -1,6 +1,6 @@
-import { Checkbox, FormControlLabel } from '@mui/material';
+import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import ExternalLink from '~/components/ExternalLink';
 import translate from '~/services/locale';
@@ -18,12 +18,16 @@ const CheckboxPrivacy = (props) => {
 };
 
 const CheckboxPrivacyLabel = () => (
-  <Fragment>
+  <Typography>
     {translate('CheckboxPrivacy.checkboxLabel')}{' '}
-    <ExternalLink href={PRIVACY_LEGAL_URL} underline="hover">
+    <ExternalLink
+      classes={{ root: 'body3_link_gradient' }}
+      href={PRIVACY_LEGAL_URL}
+      variant="body3"
+    >
       {translate('CheckboxPrivacy.checkboxLink')}
     </ExternalLink>
-  </Fragment>
+  </Typography>
 );
 
 CheckboxPrivacy.propTypes = {