fix: typography styling

new-lamassu-admin/src/components/typography/styles.js

@@ -8,7 +8,7 @@ import {
   fontPrimary,
   fontSecondary,
   fontMonospaced,
-  fontSize2FA
+  codeInputFontSize
 } from 'src/styling/variables'
 
 const base = {
@@ -128,7 +128,7 @@ export default {
   },
   confirmationCode: {
     extend: base,
-    fontSize: fontSize2FA,
+    fontSize: codeInputFontSize,
     fontFamily: fontPrimary,
     fontWeight: 900
   },

new-lamassu-admin/src/pages/Authentication/Input2FAState.js

@@ -7,9 +7,9 @@ import { useHistory } from 'react-router-dom'
 import AppContext from 'src/AppContext'
 import { Button } from 'src/components/buttons'
 import { CodeInput } from 'src/components/inputs/base'
-import { H2, P } from 'src/components/typography'
+import { TL1, P } from 'src/components/typography'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 import { STATES } from './states'
 
 const useStyles = makeStyles(styles)
@@ -99,9 +99,9 @@ const Input2FAState = ({ state, dispatch }) => {
 
   return (
     <>
-      <H2 className={classes.info}>
+      <TL1 className={classes.info}>
         Enter your two-factor authentication code
-      </H2>
+      </TL1>
       <CodeInput
         name="2fa"
         value={state.twoFAField}

new-lamassu-admin/src/pages/Authentication/Login.js

@@ -1,8 +1,8 @@
 import { makeStyles, Grid } from '@material-ui/core'
 import React from 'react'
 
-import styles from './Login.styles'
 import LoginCard from './LoginCard'
+import styles from './shared.styles'
 
 const useStyles = makeStyles(styles)
 

new-lamassu-admin/src/pages/Authentication/LoginCard.js

@@ -2,13 +2,13 @@ import Paper from '@material-ui/core/Paper'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useReducer } from 'react'
 
-import { H2 } from 'src/components/typography'
+import { H5 } from 'src/components/typography'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
 import Input2FAState from './Input2FAState'
-import styles from './Login.styles'
 import LoginState from './LoginState'
 import Setup2FAState from './Setup2FAState'
+import styles from './shared.styles'
 import { STATES } from './states'
 
 const useStyles = makeStyles(styles)
@@ -49,7 +49,7 @@ const LoginCard = () => {
       <div className={classes.wrapper}>
         <div className={classes.titleWrapper}>
           <Logo className={classes.icon} />
-          <H2 className={classes.title}>Lamassu Admin</H2>
+          <H5 className={classes.title}>Lamassu Admin</H5>
         </div>
         {renderState()}
       </div>

new-lamassu-admin/src/pages/Authentication/LoginState.js

@@ -7,9 +7,9 @@ import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
 import { Checkbox, SecretInput, TextInput } from 'src/components/inputs/formik'
-import { Label2, P } from 'src/components/typography'
+import { Label3, P } from 'src/components/typography'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 import { STATES } from './states'
 
 const useStyles = makeStyles(styles)
@@ -104,7 +104,7 @@ const LoginState = ({ state, dispatch }) => {
               className={classes.checkbox}
               component={Checkbox}
             />
-            <Label2 className={classes.inputLabel}>Keep me logged in</Label2>
+            <Label3>Keep me logged in</Label3>
           </div>
           <div className={classes.footer}>
             {getErrorMsg(errors, touched) && (

new-lamassu-admin/src/pages/Authentication/Register.js

@@ -9,10 +9,10 @@ import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
 import { SecretInput } from 'src/components/inputs/formik'
-import { H2, Label2, P } from 'src/components/typography'
+import { H2, Label3, P } from 'src/components/typography'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 
 const QueryParams = () => new URLSearchParams(useLocation().search)
 const useStyles = makeStyles(styles)
@@ -178,9 +178,7 @@ const Register = () => {
               )}
               {!loading && !state.wasSuccessful && (
                 <>
-                  <Label2 className={classes.inputLabel}>
-                    Link has expired
-                  </Label2>
+                  <Label3>Link has expired</Label3>
                 </>
               )}
             </div>

new-lamassu-admin/src/pages/Authentication/Reset2FA.js

@@ -8,11 +8,11 @@ import { useLocation, useHistory } from 'react-router-dom'
 
 import { ActionButton, Button } from 'src/components/buttons'
 import { CodeInput } from 'src/components/inputs/base'
-import { H2, Label2, P } from 'src/components/typography'
+import { H2, Label2, Label3, P } from 'src/components/typography'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 import { primaryColor } from 'src/styling/variables'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 
 const QueryParams = () => new URLSearchParams(useLocation().search)
 const useStyles = makeStyles(styles)
@@ -174,9 +174,7 @@ const Reset2FA = () => {
               )}
               {!isLoading && !wasSuccessful && (
                 <>
-                  <Label2 className={classes.inputLabel}>
-                    Link has expired
-                  </Label2>
+                  <Label3>Link has expired</Label3>
                 </>
               )}
             </div>

new-lamassu-admin/src/pages/Authentication/ResetPassword.js

@@ -9,10 +9,10 @@ import * as Yup from 'yup'
 
 import { Button } from 'src/components/buttons'
 import { SecretInput } from 'src/components/inputs/formik/'
-import { H2, Label2, P } from 'src/components/typography'
+import { H2, Label3, P } from 'src/components/typography'
 import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 
 const QueryParams = () => new URLSearchParams(useLocation().search)
 const useStyles = makeStyles(styles)
@@ -157,9 +157,7 @@ const ResetPassword = () => {
               )}
               {!isLoading && !wasSuccessful && (
                 <>
-                  <Label2 className={classes.inputLabel}>
-                    Link has expired
-                  </Label2>
+                  <Label3>Link has expired</Label3>
                 </>
               )}
             </div>

new-lamassu-admin/src/pages/Authentication/Setup2FAState.js

@@ -8,10 +8,10 @@ import { useHistory } from 'react-router-dom'
 import AppContext from 'src/AppContext'
 import { ActionButton, Button } from 'src/components/buttons'
 import { CodeInput } from 'src/components/inputs/base'
-import { Label2, P } from 'src/components/typography'
+import { Label3, P } from 'src/components/typography'
 import { primaryColor } from 'src/styling/variables'
 
-import styles from './Login.styles'
+import styles from './shared.styles'
 
 const SETUP_2FA = gql`
   mutation setup2FA(
@@ -103,25 +103,25 @@ const Setup2FAState = ({ state, dispatch }) => {
     otpauth && (
       <>
         <div className={classes.infoWrapper}>
-          <Label2 className={classes.info2}>
+          <Label3 className={classes.info2}>
             We detected that this account does not have its two-factor
             authentication enabled. In order to protect the resources in the
             system, a two-factor authentication is enforced.
-          </Label2>
-          <Label2 className={classes.info2}>
+          </Label3>
+          <Label3 className={classes.info2}>
             To finish this process, please scan the following QR code or insert
             the secret further below on an authentication app of your choice,
             such as Google Authenticator or Authy.
-          </Label2>
+          </Label3>
         </div>
         <div className={classes.qrCodeWrapper}>
           <QRCode size={240} fgColor={primaryColor} value={otpauth} />
         </div>
         <div className={classes.secretWrapper}>
-          <Label2 className={classes.secretLabel}>Your secret:</Label2>
-          <Label2 className={isShowing ? classes.secret : classes.hiddenSecret}>
+          <Label3 className={classes.secretLabel}>Your secret:</Label3>
+          <Label3 className={isShowing ? classes.secret : classes.hiddenSecret}>
             {secret}
-          </Label2>
+          </Label3>
           <ActionButton
             disabled={!secret && !otpauth}
             color="primary"

new-lamassu-admin/src/pages/Authentication/shared.styles.js

@@ -1,23 +1,9 @@
-import {
-  fontPrimary,
-  fontSecondary,
-  primaryColor,
-  backgroundColor,
-  errorColor
-} from 'src/styling/variables'
+import { backgroundColor, errorColor } from 'src/styling/variables'
 
 const styles = {
   title: {
-    color: primaryColor,
-    fontFamily: fontPrimary,
-    fontSize: '18px',
-    fontWeight: 'normal',
     paddingTop: 8
   },
-  inputLabel: {
-    fontSize: '16px',
-    fontWeight: 550
-  },
   input: {
     marginBottom: 25,
     marginTop: -15
@@ -44,7 +30,7 @@ const styles = {
     marginRight: 25
   },
   checkbox: {
-    transform: 'scale(2)',
+    transform: 'scale(1.5)',
     marginRight: 5,
     marginLeft: -5
   },
@@ -72,19 +58,15 @@ const styles = {
     minHeight: '100vh'
   },
   info: {
-    fontFamily: fontSecondary,
     marginBottom: '5vh'
   },
   info2: {
-    fontFamily: fontSecondary,
-    fontSize: '14px',
     textAlign: 'justify'
   },
   infoWrapper: {
     marginBottom: '3vh'
   },
   errorMessage: {
-    fontFamily: fontSecondary,
     color: errorColor
   },
   qrCodeWrapper: {
@@ -98,18 +80,12 @@ const styles = {
     alignItems: 'center'
   },
   secretLabel: {
-    fontSize: '16px',
-    fontWeight: 550,
     marginRight: 15
   },
   secret: {
-    fontSize: '16px',
-    fontWeight: 550,
     marginRight: 35
   },
   hiddenSecret: {
-    fontSize: '16px',
-    fontWeight: 550,
     marginRight: 35,
     filter: 'blur(8px)'
   },

new-lamassu-admin/src/styling/variables.js

@@ -68,7 +68,6 @@ let fontSize2 = 20
 let fontSize3 = 16
 let fontSize4 = 14
 let fontSize5 = 13
-const fontSize2FA = 35
 
 if (version === 8) {
   fontSize1 = 32
@@ -85,6 +84,7 @@ const inputFontSizeLg = fontSize1
 const inputFontWeight = 500
 const inputFontWeightBold = 700
 const inputFontFamily = fontSecondary
+const codeInputFontSize = 35
 
 // Breakpoints
 const sm = 576
@@ -159,7 +159,6 @@ export {
   fontPrimary,
   fontSecondary,
   fontMonospaced,
-  fontSize2FA,
   // named font sizes
   smallestFontSize,
   inputFontSize,
@@ -168,6 +167,7 @@ export {
   inputFontFamily,
   inputFontWeight,
   inputFontWeightBold,
+  codeInputFontSize,
   // screen sizes
   sm,
   md,