feat(ui): use bold font in login, signup page

src/components/Typography/H1.tsx

@@ -0,0 +1,24 @@
+import { Box, useTheme } from '@material-ui/core';
+import React from 'react';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const H1 = (props: Props) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      component='h1'
+      color='text.primary'
+      fontSize='2.4rem'
+      fontWeight={theme.typography.fontWeightBold}
+      style={{ marginBottom: theme.spacing(2) }}
+    >
+      {props.children}
+    </Box>
+  );
+};
+
+export default H1;

src/components/Typography/Paragraph.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@material-ui/core';
+import React from 'react';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+const Paragraph = (props: Props) => {
+  return (
+    <Box component='p' color='text.primary'>
+      {props.children}
+    </Box>
+  );
+};
+
+export default Paragraph;

src/views/Login/index.tsx

@@ -4,7 +4,6 @@ import {
   makeStyles,
   TextField,
   Typography,
-  useTheme,
 } from '@material-ui/core';
 import React from 'react';
 import { Formik } from 'formik';
@@ -22,9 +21,10 @@ import decryptAndSaveUserFromBase64 from '../../services/local/decryptAndSaveUse
 import saveFileCollectionFromBase64 from '../../services/local/saveFileCollectionFromBase64';
 import moment from 'moment';
 import downloadNotesFromCloudSync from '../../services/cloudSync/downloadNotes';
+import H1 from '../../components/Typography/H1';
+import Paragraph from '../../components/Typography/Paragraph';
 
 const Login = () => {
-  const theme = useTheme();
   const classes = useStyles();
 
   const localDB = useStoreState((s) => s.localDB);
@@ -48,12 +48,8 @@ const Login = () => {
   return (
     <LoginPage background={0}>
       <div>
-        <Typography variant='h4' color='textPrimary' style={{ marginBottom: theme.spacing(2) }}>
-          Log In
-        </Typography>
-        <Typography variant='body1' color='textSecondary'>
-          Enter your username and password to access your notes.
-        </Typography>
+        <H1>Log In</H1>
+        <Paragraph>Enter your username and password to access your notes.</Paragraph>
       </div>
 
       <div className={classes.formContainer}>

src/views/Signup/index.tsx

@@ -6,7 +6,6 @@ import {
   makeStyles,
   TextField,
   Typography,
-  useTheme,
   withStyles,
 } from '@material-ui/core';
 import React from 'react';
@@ -19,9 +18,10 @@ import createNewUser from '../../services/local/createNewUser';
 import LoginPage from '../../components/LoginPage';
 import { ChevronDown } from 'react-feather';
 import { generateSalt, getKeyFromDerivedPassword } from '@slater-notes/core';
+import H1 from '../../components/Typography/H1';
+import Paragraph from '../../components/Typography/Paragraph';
 
 const Signup = () => {
-  const theme = useTheme();
   const classes = useStyles();
 
   const [testingIterations, setTestingIterations] = React.useState(false);
@@ -43,12 +43,8 @@ const Signup = () => {
   return (
     <LoginPage background={1}>
       <div>
-        <Typography variant='h4' color='textPrimary' style={{ marginBottom: theme.spacing(2) }}>
-          New Account
-        </Typography>
-        <Typography variant='body1' color='textSecondary'>
-          Enter a username and password to create a new account.
-        </Typography>
+        <H1>New Account</H1>
+        <Paragraph>Enter a username and password to create a new account.</Paragraph>
       </div>
 
       <div className={classes.formContainer}>