Removed Instances of useStyles, Replaced With SCSS

frontend/client/src/components/NavBar.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Redirect, Link } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
 import IconButton from '@material-ui/core/IconButton'
 import MenuItem from '@material-ui/core/MenuItem'
 import Menu from '@material-ui/core/Menu'
@@ -11,30 +10,7 @@ import { withStore } from '../store'
 import { observer } from 'mobx-react'
 import menu from '../../assets/menu.svg'
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(11),
-  },
-  title: {
-    flexGrow: 1,
-  },
-  link: {
-    marginTop: 14,
-    paddingLeft: 30,
-    paddingRight: 30,
-    fontFamily: 'Montserrat',
-    fontSize: 18,
-    fontWeight: 500,
-    color: '#2c58b1',
-  },
-}))
-
 const NavBarBase = observer((props) => {
-  const classes = useStyles()
-
   const [redirect, setRedirect] = useState(-1)
   const [anchorEl, setAnchorEl] = useState(null)
   const open = Boolean(anchorEl)
@@ -72,7 +48,7 @@ const NavBarBase = observer((props) => {
       </div>
       <div className="avatar_group separator" />
 
-      <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu" onClick={handleMenu}>
+      <IconButton edge="start" className="menu-btn" color="inherit" aria-label="menu" onClick={handleMenu}>
         <img src={menu} alt="Menu" />
       </IconButton>
       <Menu
@@ -90,23 +66,23 @@ const NavBarBase = observer((props) => {
         open={open}
         onClose={handleClose}
       >
-        <MenuItem className={classes.link} style={{ marginTop: 22 }} onClick={() => onClickMenuItem(0)}>
+        <MenuItem className="menu-link" style={{ marginTop: 22 }} onClick={() => onClickMenuItem(0)}>
           Diagnosis Verification Codes
         </MenuItem>
         {props.store.data.user.isAdmin && (
-          <MenuItem className={classes.link} onClick={() => onClickMenuItem(1)}>
+          <MenuItem className="menu-link" onClick={() => onClickMenuItem(1)}>
             Manage Members
           </MenuItem>
         )}
         {props.store.data.user.isAdmin && (
-          <MenuItem className={classes.link} onClick={() => onClickMenuItem(2)}>
+          <MenuItem className="menu-link" onClick={() => onClickMenuItem(2)}>
             Mobile App Settings
           </MenuItem>
         )}
-        <MenuItem className={classes.link} onClick={() => onClickMenuItem(3)}>
+        <MenuItem className="menu-link" onClick={() => onClickMenuItem(3)}>
           My Settings
         </MenuItem>
-        <MenuItem className={classes.link} style={{ marginBottom: 22 }} onClick={() => onClickMenuItem(4)}>
+        <MenuItem className="menu-link" style={{ marginBottom: 22 }} onClick={() => onClickMenuItem(4)}>
           Logout
         </MenuItem>
       </Menu>

frontend/client/src/screens/Settings.js

@@ -1,7 +1,6 @@
 import React, { useRef, Fragment, useState } from 'react'
 import Grid from '@material-ui/core/Grid'
 import Modal from '../components/Modal'
-import { makeStyles } from '@material-ui/core/styles'
 import * as ROLES from '../constants/roles'
 import Toast from '../components/Toast'
 import { Redirect } from 'react-router-dom'
@@ -15,31 +14,8 @@ import PendingOperationButton from '../components/PendingOperationButton'
 import ResetPasswordModal from '../components/ResetPasswordModal'
 import CircularProgress from '@material-ui/core/CircularProgress'
 
-const useStyles = makeStyles({
-  root: {
-    marginTop: 10,
-    padding: 40,
-    paddingLeft: 8,
-  },
-})
-
-const inputStyles = makeStyles({
-  root: {
-    lineHeight: '16px',
-    borderRadius: 4,
-    border: '2px solid #BDBDBD',
-    boxSizing: 'border-box',
-    width: '75%',
-    height: 40,
-    marginTop: 10,
-    marginBottom: 40,
-  },
-})
-
 const MAXFILESIZE = 10 * 1024 * 1024
 const SettingsBase = observer((props) => {
-  const classes = useStyles()
-  const input = inputStyles()
   const imgUploader = useRef()
 
   const [open, setOpen] = useState(false)
@@ -174,7 +150,7 @@ const SettingsBase = observer((props) => {
   const settingsForm = () => (
     <Fragment>
       <form>
-        <Grid container className={classes.root} spacing={2} direction="row" justify="center">
+        <Grid container id="settings-grid" spacing={2} direction="row" justify="center">
           <Grid item xs={4} xl={2}>
             <Grid container spacing={2} direction="column">
               <label> Profile Photo </label>
@@ -218,7 +194,6 @@ const SettingsBase = observer((props) => {
                 type="text"
                 id="prefix"
                 name="prefix"
-                className={input.root}
                 onChange={onChange}
                 value={props.store.data.user.prefix}
               ></input>
@@ -229,7 +204,6 @@ const SettingsBase = observer((props) => {
                 name="firstName"
                 required
                 aria-required="true"
-                className={input.root}
                 onChange={onChange}
                 value={props.store.data.user.firstName}
               ></input>
@@ -241,7 +215,6 @@ const SettingsBase = observer((props) => {
                 required
                 disabled={true}
                 aria-required="true"
-                className={input.root}
                 style={{ backgroundColor: '#e0e0e0' }}
                 value={props.store.data.user.email}
               ></input>
@@ -259,7 +232,6 @@ const SettingsBase = observer((props) => {
                   disabled={true}
                   required
                   aria-required="true"
-                  className={input.root}
                   style={{ backgroundColor: '#e0e0e0' }}
                   value={props.store.data.user.isAdmin ? ROLES.ADMIN_LABEL : ROLES.NON_ADMIN_LABEL}
                 ></input>
@@ -272,7 +244,6 @@ const SettingsBase = observer((props) => {
                 required
                 aria-required="true"
                 onChange={onChange}
-                className={input.root}
                 defaultValue={props.store.data.user.lastName}
               ></input>
               <label htmlFor="password">Password</label>
@@ -284,7 +255,6 @@ const SettingsBase = observer((props) => {
                 disabled={true}
                 required
                 aria-required="true"
-                className={input.root}
                 defaultValue=" • • • • • • • •"
               ></input>
               <a

frontend/client/src/util/sample.js

@@ -10,7 +10,6 @@ import Grid from '@material-ui/core/Grid'
 import Box from '@material-ui/core/Box'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
 import Typography from '@material-ui/core/Typography'
-import { makeStyles } from '@material-ui/core/styles'
 import Container from '@material-ui/core/Container'
 
 function Copyright() {
@@ -26,40 +25,18 @@ function Copyright() {
   )
 }
 
-const useStyles = makeStyles((theme) => ({
-  paper: {
-    marginTop: theme.spacing(8),
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  avatar: {
-    margin: theme.spacing(1),
-    backgroundColor: theme.palette.secondary.main,
-  },
-  form: {
-    width: '100%', // Fix IE 11 issue.
-    marginTop: theme.spacing(1),
-  },
-  submit: {
-    margin: theme.spacing(3, 0, 2),
-  },
-}))
-
 export default function SignIn() {
-  const classes = useStyles()
-
   return (
-    <Container component="main" maxWidth="xs">
+    <Container component="main" maxWidth="xs" id="sample-main">
       <CssBaseline />
-      <div className={classes.paper}>
-        <Avatar className={classes.avatar}>
+      <div className="sample-paper">
+        <Avatar className="sample-avatar">
           <LockOutlinedIcon />
         </Avatar>
         <Typography component="h1" variant="h5">
           Sign in
         </Typography>
-        <form className={classes.form} noValidate>
+        <form className="form" noValidate>
           <TextField
             variant="outlined"
             margin="normal"
@@ -83,7 +60,7 @@ export default function SignIn() {
             autoComplete="current-password"
           />
           <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Remember me" />
-          <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}>
+          <Button type="submit" fullWidth variant="contained" color="primary" className="sample-submit-btn">
             Sign In
           </Button>
           <Grid container>

frontend/client/styles/components/navbar.scss

@@ -11,6 +11,22 @@
   #orgLogo {
     height: 40px;
   }
+
+  .menu-btn {
+    margin-right: 88px;
+  }
+}
+
+#menu-appbar {
+  .menu-link {
+    font-family: 'Montserrat';
+    font-size: 18px;
+    font-weight: 500;
+    margin-top: 14px;
+    padding-left: 30px;
+    padding-right: 30px;
+    color: #2c58b1;
+  }
 }
 
 #logged-in-icons-container {

frontend/client/styles/index.scss

@@ -19,4 +19,5 @@
 @import './components/modal.scss';
 @import './components/modal_input.scss';
 @import './components/profile_photo.scss';
-@import './components/cancel_confirm_buttons.scss'
+@import './components/cancel_confirm_buttons.scss';
+@import './util/sample.scss';

frontend/client/styles/screens/settings.scss

@@ -12,3 +12,20 @@
         margin-top: 60px;
     }
 }
+
+#settings-grid {
+  margin: 10px -8px -8px -8px;
+  padding: 40px;
+  padding-left: 8px;
+
+  input {
+    line-height: 16px;
+    border-radius: 4px;
+    border: 2px solid #BDBDBD;
+    box-sizing: border-box;
+    width: 75%;
+    height: 40px;
+    margin-top: 10px;
+    margin-bottom: 40px;
+  }
+}

frontend/client/styles/util/sample.scss

@@ -0,0 +1,22 @@
+#sample-main {
+    .sample-paper {
+        margin-top: 64px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .sample-avatar {
+        margin: 8px;
+        background-color: #f44336;
+    }
+
+    .sample-form {
+        width: 100%;
+        margin-top: 8px;
+    }
+
+    .sample-submit-btn {
+        margin: 24px 0 16px;
+    }
+}