Removed Instances of useStyles, Replaced With SCSS (#440)

* Removed useStyles, replaced with scss * Formatting * remove sample.js * whoops deleted wrong file * formatting settings.scss, adding inline custom styling to Settings.js Co-authored-by: Colby Morrison <colbyamorrison@gmail.com> Co-authored-by: Isaiah Becker-Mayer <ibeckermayer@gmail.com>
covidwatchorg · Aug 5, 2020 · 3af8dbe · 3af8dbe
1 parent c0bc7ff
commit 3af8dbe
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 181 deletions.
diff --git a/frontend/client/src/components/NavBar.js b/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)
@@ -83,7 +59,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
@@ -101,23 +77,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>

diff --git a/frontend/client/src/screens/Settings.js b/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)
@@ -163,7 +139,12 @@ const SettingsBase = observer((props) => {
       containerClass="changeImageModalContainer"
     >
       <div>
-        <input type="file" ref={imgUploader} accepts="image/jpeg, image/png" />
+        <input
+          type="file"
+          ref={imgUploader}
+          accepts="image/jpeg, image/png"
+          style={{ border: 'none', marginTop: '25px', marginBottom: '15px' }}
+        />
         <PendingOperationButton operation={saveImage} className="save-button">
           Upload
         </PendingOperationButton>
@@ -174,7 +155,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 +199,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 +209,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 +220,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 +237,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 +249,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 +260,6 @@ const SettingsBase = observer((props) => {
                 disabled={true}
                 required
                 aria-required="true"
-                className={input.root}
                 defaultValue=" • • • • • • • •"
               ></input>
               <a

diff --git a/frontend/client/src/util/sample.js b/frontend/client/src/util/sample.js
diff --git a/frontend/client/styles/components/navbar.scss b/frontend/client/styles/components/navbar.scss
@@ -15,6 +15,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 {

diff --git a/frontend/client/styles/index.scss b/frontend/client/styles/index.scss
@@ -19,4 +19,4 @@
 @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';
diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss
@@ -1,14 +1,31 @@
 .changeImageModalContainer {
   height: 280px;
 
-    input {
-      margin-top: 25px;
-      margin-bottom: 15px;
-      border-width: 0px;
-    }
-
-    .save-image{
-        margin-left: 155px;
-        margin-top: 60px;
-    }
+  input {
+    margin-top: 25px;
+    margin-bottom: 15px;
+    border-width: 0px;
+  }
+
+  .save-image {
+    margin-left: 155px;
+    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;
+  }
 }