update font sizes

src/components/Stepper/OpenPaper/index.jsx

@@ -35,7 +35,7 @@ const OpenPaper = ({
 
   return (
     <Paper className={classes.root} elevation={1}>
-      <Block style={containerStyle} className={`${classes.container} ${padding ? classes.padding : ''}`}>
+      <Block style={containerStyle} className={padding ? classes.padding : ''}>
         {children}
       </Block>
       {controls}

src/routes/load/components/OwnerList/index.jsx

@@ -14,7 +14,7 @@ import Link from '~/components/layout/Link'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import {
-  sm, md, lg, border, secondary,
+  sm, md, lg, border, secondary, disabled, extraSmallFontSize,
 } from '~/theme/variables'
 import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
 import { getEtherScanLink } from '~/logic/wallets/getWeb3'
@@ -62,6 +62,8 @@ const styles = () => ({
   },
   header: {
     padding: `${sm} ${lg}`,
+    color: disabled,
+    fontSize: extraSmallFontSize,
   },
   name: {
     marginRight: `${sm}`,
@@ -120,7 +122,7 @@ const OwnerListComponent = (props: Props) => {
   return (
     <>
       <Block className={classes.title}>
-        <Paragraph noMargin size="md" color="primary">
+        <Paragraph noMargin size="lg" color="primary">
           {`This Safe has ${owners.length} owners. Optional: Provide a name for each owner.`}
         </Paragraph>
       </Block>

src/routes/load/components/ReviewInformation/index.jsx

@@ -106,18 +106,18 @@ class ReviewComponent extends React.PureComponent<Props, State> {
     const safeAddress = values[FIELD_LOAD_ADDRESS]
 
     return (
-      <React.Fragment>
+      <>
         <Row className={classes.root}>
           <Col xs={4} layout="column">
             <Block className={classes.details}>
               <Block margin="lg">
                 <Paragraph size="lg" color="primary" noMargin>
-                Review details
+                  Review details
                 </Paragraph>
               </Block>
               <Block margin="lg">
                 <Paragraph size="sm" color="disabled" noMargin>
-                Name of the Safe
+                  Name of the Safe
                 </Paragraph>
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                   {values[FIELD_LOAD_NAME]}
@@ -125,7 +125,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
               </Block>
               <Block margin="lg">
                 <Paragraph size="sm" color="disabled" noMargin>
-                Safe address
+                  Safe address
                 </Paragraph>
                 <Row className={classes.container}>
                   <Identicon address={safeAddress} diameter={32} />
@@ -139,7 +139,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
               </Block>
               <Block margin="lg">
                 <Paragraph size="sm" color="disabled" noMargin>
-                Connected wallet client is owner?
+                  Connected wallet client is owner?
                 </Paragraph>
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                   {isOwner ? 'Yes' : 'No (read-only)'}
@@ -147,7 +147,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
               </Block>
               <Block margin="lg">
                 <Paragraph size="sm" color="disabled" noMargin>
-                Any transaction requires the confirmation of:
+                  Any transaction requires the confirmation of:
                 </Paragraph>
                 <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                   {`${values[THRESHOLD]} out of ${getNumOwnersFrom(values)} owners`}
@@ -162,11 +162,11 @@ class ReviewComponent extends React.PureComponent<Props, State> {
               </Paragraph>
             </Block>
             <Hairline />
-            {owners.map((x, index) => (
-              <React.Fragment key={owners[index].address}>
+            {owners.map((address, index) => (
+              <React.Fragment key={address}>
                 <Row className={classes.owner}>
                   <Col xs={1} align="center">
-                    <Identicon address={owners[index]} diameter={32} />
+                    <Identicon address={address} diameter={32} />
                   </Col>
                   <Col xs={11}>
                     <Block className={classNames(classes.name, classes.userName)}>
@@ -175,9 +175,13 @@ class ReviewComponent extends React.PureComponent<Props, State> {
                       </Paragraph>
                       <Block align="center" className={classes.user}>
                         <Paragraph size="md" color="disabled" noMargin>
-                          {owners[index]}
+                          {address}
                         </Paragraph>
-                        <Link className={classes.open} to={getEtherScanLink('address', owners[index], network)} target="_blank">
+                        <Link
+                          className={classes.open}
+                          to={getEtherScanLink('address', address, network)}
+                          target="_blank"
+                        >
                           <OpenInNew style={openIconStyle} />
                         </Link>
                       </Block>
@@ -189,7 +193,7 @@ class ReviewComponent extends React.PureComponent<Props, State> {
             ))}
           </Col>
         </Row>
-      </React.Fragment>
+      </>
     )
   }
 }
@@ -197,11 +201,11 @@ class ReviewComponent extends React.PureComponent<Props, State> {
 const ReviewPage = withStyles(styles)(ReviewComponent)
 
 const Review = ({ network, userAddress }: LayoutProps) => (controls: React.Node, { values }: Object) => (
-  <React.Fragment>
+  <>
     <OpenPaper controls={controls} padding={false}>
       <ReviewPage network={network} values={values} userAddress={userAddress} />
     </OpenPaper>
-  </React.Fragment>
+  </>
 )
 
 export default Review

src/theme/mui.js

@@ -1,7 +1,6 @@
 // @flow
 import { createMuiTheme } from '@material-ui/core/styles'
 import {
-  largeFontSize,
   mediumFontSize,
   smallFontSize,
   disabled,
@@ -12,6 +11,7 @@ import {
   md,
   lg,
   bolderFont,
+  regularFont,
   boldFont,
   buttonLargeFontSize,
   border,
@@ -47,6 +47,7 @@ export default createMuiTheme({
     MuiButton: {
       label: {
         lineHeight: 1,
+        fontWeight: regularFont,
       },
       root: {
         fontFamily: 'Averta, monospace',
@@ -154,7 +155,7 @@ export default createMuiTheme({
       root: {
         fontFamily: 'Averta, monospace',
         color: primary,
-        fontSize: largeFontSize,
+        fontSize: mediumFontSize,
         lineHeight: '56px',
         order: 1,
         padding: `0 ${md}`,
@@ -190,7 +191,7 @@ export default createMuiTheme({
     MuiStepLabel: {
       label: {
         textAlign: 'left',
-        color: '#B2B5B2',
+        color: secondary,
         '&$active': {
           color: primary,
         },

src/theme/variables.js

@@ -45,8 +45,9 @@ module.exports = {
   bolderFont: 500,
   boldFont: 700,
   extraBoldFont: 800,
-  smallFontSize: '11px',
-  mediumFontSize: '12px',
+  extraSmallFontSize: '11px',
+  smallFontSize: '12px',
+  mediumFontSize: '14px',
   largeFontSize: '16px',
   extraLargeFontSize: '20px',
   xxlFontSize: '32px',