From c1126cc24ae18f71869bc87cabbb7cda35a4aa81 Mon Sep 17 00:00:00 2001 From: leon-i Date: Fri, 31 Jul 2020 15:32:12 -0400 Subject: [PATCH 1/5] Removed useStyles, replaced with scss --- frontend/client/src/components/NavBar.js | 35 ++++--------------- frontend/client/src/screens/Settings.js | 32 +---------------- frontend/client/src/util/sample.js | 32 +++-------------- frontend/client/styles/components/navbar.scss | 16 +++++++++ frontend/client/styles/index.scss | 3 +- frontend/client/styles/screens/settings.scss | 17 +++++++++ frontend/client/styles/util/sample.scss | 22 ++++++++++++ 7 files changed, 69 insertions(+), 88 deletions(-) create mode 100644 frontend/client/styles/util/sample.scss diff --git a/frontend/client/src/components/NavBar.js b/frontend/client/src/components/NavBar.js index f82bdd99..3175611c 100644 --- 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,29 +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) @@ -72,7 +49,7 @@ const NavBarBase = observer((props) => {
- + Menu { open={open} onClose={handleClose} > - onClickMenuItem(0)}> + onClickMenuItem(0)}> Diagnosis Verification Codes {props.store.data.user.isAdmin && ( - onClickMenuItem(1)}> + onClickMenuItem(1)}> Manage Members )} {props.store.data.user.isAdmin && ( - onClickMenuItem(2)}> + onClickMenuItem(2)}> Mobile App Settings )} - onClickMenuItem(3)}> + onClickMenuItem(3)}> My Settings - onClickMenuItem(4)}> + onClickMenuItem(4)}> Logout diff --git a/frontend/client/src/screens/Settings.js b/frontend/client/src/screens/Settings.js index 4ba7d3e4..487cb855 100644 --- 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) @@ -174,7 +150,7 @@ const SettingsBase = observer((props) => { const settingsForm = () => (
- + @@ -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} > @@ -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} > @@ -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} > @@ -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} > @@ -272,7 +244,6 @@ const SettingsBase = observer((props) => { required aria-required="true" onChange={onChange} - className={input.root} defaultValue={props.store.data.user.lastName} > @@ -284,7 +255,6 @@ const SettingsBase = observer((props) => { disabled={true} required aria-required="true" - className={input.root} defaultValue=" • • • • • • • •" > ({ - 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 ( - + -
- +
+ Sign in - + } label="Remember me" /> - diff --git a/frontend/client/styles/components/navbar.scss b/frontend/client/styles/components/navbar.scss index 928856ce..99df5dc1 100644 --- a/frontend/client/styles/components/navbar.scss +++ b/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 { diff --git a/frontend/client/styles/index.scss b/frontend/client/styles/index.scss index 639847af..2d0e4ffa 100644 --- a/frontend/client/styles/index.scss +++ b/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'; diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss index ca8e0860..a101d68c 100644 --- a/frontend/client/styles/screens/settings.scss +++ b/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; + } +} \ No newline at end of file diff --git a/frontend/client/styles/util/sample.scss b/frontend/client/styles/util/sample.scss new file mode 100644 index 00000000..268c93fe --- /dev/null +++ b/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; + } +} \ No newline at end of file From 4ae131e7487a4440aeffb46ac0e3f2679ee0a8ec Mon Sep 17 00:00:00 2001 From: leon-i Date: Fri, 31 Jul 2020 15:33:43 -0400 Subject: [PATCH 2/5] Formatting --- frontend/client/src/components/NavBar.js | 13 ++++++------- frontend/client/src/screens/Settings.js | 2 +- frontend/client/src/util/sample.js | 11 +++++------ 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/frontend/client/src/components/NavBar.js b/frontend/client/src/components/NavBar.js index 3175611c..99eb780a 100644 --- a/frontend/client/src/components/NavBar.js +++ b/frontend/client/src/components/NavBar.js @@ -11,7 +11,6 @@ import { observer } from 'mobx-react' import menu from '../../assets/menu.svg' const NavBarBase = observer((props) => { - const [redirect, setRedirect] = useState(-1) const [anchorEl, setAnchorEl] = useState(null) const open = Boolean(anchorEl) @@ -49,7 +48,7 @@ const NavBarBase = observer((props) => {
- + Menu { open={open} onClose={handleClose} > - onClickMenuItem(0)}> + onClickMenuItem(0)}> Diagnosis Verification Codes {props.store.data.user.isAdmin && ( - onClickMenuItem(1)}> + onClickMenuItem(1)}> Manage Members )} {props.store.data.user.isAdmin && ( - onClickMenuItem(2)}> + onClickMenuItem(2)}> Mobile App Settings )} - onClickMenuItem(3)}> + onClickMenuItem(3)}> My Settings - onClickMenuItem(4)}> + onClickMenuItem(4)}> Logout diff --git a/frontend/client/src/screens/Settings.js b/frontend/client/src/screens/Settings.js index 487cb855..97e42896 100644 --- a/frontend/client/src/screens/Settings.js +++ b/frontend/client/src/screens/Settings.js @@ -150,7 +150,7 @@ const SettingsBase = observer((props) => { const settingsForm = () => ( - + diff --git a/frontend/client/src/util/sample.js b/frontend/client/src/util/sample.js index af96c902..70ade8cc 100644 --- a/frontend/client/src/util/sample.js +++ b/frontend/client/src/util/sample.js @@ -26,18 +26,17 @@ function Copyright() { } export default function SignIn() { - return ( - + -
- +
+ Sign in - + } label="Remember me" /> - From 1c3e3412ed700e5b7870fbd11a9810c56bceedd3 Mon Sep 17 00:00:00 2001 From: Colby Morrison Date: Fri, 31 Jul 2020 22:05:19 -0700 Subject: [PATCH 3/5] remove sample.js --- frontend/client/src/util/sample.js | 85 -------------------- frontend/client/styles/index.scss | 1 - frontend/client/styles/screens/settings.scss | 31 ------- 3 files changed, 117 deletions(-) delete mode 100644 frontend/client/src/util/sample.js delete mode 100644 frontend/client/styles/screens/settings.scss diff --git a/frontend/client/src/util/sample.js b/frontend/client/src/util/sample.js deleted file mode 100644 index 70ade8cc..00000000 --- a/frontend/client/src/util/sample.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' -import Avatar from '@material-ui/core/Avatar' -import Button from '@material-ui/core/Button' -import CssBaseline from '@material-ui/core/CssBaseline' -import TextField from '@material-ui/core/TextField' -import FormControlLabel from '@material-ui/core/FormControlLabel' -import Checkbox from '@material-ui/core/Checkbox' -import Link from '@material-ui/core/Link' -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 Container from '@material-ui/core/Container' - -function Copyright() { - return ( - - {'Copyright © '} - - Your Website - {' '} - {new Date().getFullYear()} - {'.'} - - ) -} - -export default function SignIn() { - return ( - - -
- - - - - Sign in - - - - - } label="Remember me" /> - - - - - Forgot password? - - - - - {"Don't have an account? Sign Up"} - - - - -
- - - - - ) -} diff --git a/frontend/client/styles/index.scss b/frontend/client/styles/index.scss index 2d0e4ffa..141650a2 100644 --- a/frontend/client/styles/index.scss +++ b/frontend/client/styles/index.scss @@ -20,4 +20,3 @@ @import './components/modal_input.scss'; @import './components/profile_photo.scss'; @import './components/cancel_confirm_buttons.scss'; -@import './util/sample.scss'; diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss deleted file mode 100644 index a101d68c..00000000 --- a/frontend/client/styles/screens/settings.scss +++ /dev/null @@ -1,31 +0,0 @@ -.changeImageModalContainer { - height: 280px; - - 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; - } -} \ No newline at end of file From 0622dea89035e253f14c44dfd972da1ddb20c93f Mon Sep 17 00:00:00 2001 From: Colby Morrison Date: Fri, 31 Jul 2020 22:32:41 -0700 Subject: [PATCH 4/5] whoops deleted wrong file --- frontend/client/styles/screens/settings.scss | 31 ++++++++++++++++++++ frontend/client/styles/util/sample.scss | 22 -------------- 2 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 frontend/client/styles/screens/settings.scss delete mode 100644 frontend/client/styles/util/sample.scss diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss new file mode 100644 index 00000000..a101d68c --- /dev/null +++ b/frontend/client/styles/screens/settings.scss @@ -0,0 +1,31 @@ +.changeImageModalContainer { + height: 280px; + + 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; + } +} \ No newline at end of file diff --git a/frontend/client/styles/util/sample.scss b/frontend/client/styles/util/sample.scss deleted file mode 100644 index 268c93fe..00000000 --- a/frontend/client/styles/util/sample.scss +++ /dev/null @@ -1,22 +0,0 @@ -#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; - } -} \ No newline at end of file From 2cbdf9a43f42885d2ffd2513ce405f7067664c64 Mon Sep 17 00:00:00 2001 From: Isaiah Becker-Mayer Date: Wed, 5 Aug 2020 11:07:04 -0600 Subject: [PATCH 5/5] formatting settings.scss, adding inline custom styling to Settings.js --- frontend/client/src/screens/Settings.js | 7 ++++++- frontend/client/styles/screens/settings.scss | 22 ++++++++++---------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/frontend/client/src/screens/Settings.js b/frontend/client/src/screens/Settings.js index 97e42896..4f2fa8c8 100644 --- a/frontend/client/src/screens/Settings.js +++ b/frontend/client/src/screens/Settings.js @@ -139,7 +139,12 @@ const SettingsBase = observer((props) => { containerClass="changeImageModalContainer" >
- + Upload diff --git a/frontend/client/styles/screens/settings.scss b/frontend/client/styles/screens/settings.scss index a101d68c..d17bf9a8 100644 --- a/frontend/client/styles/screens/settings.scss +++ b/frontend/client/styles/screens/settings.scss @@ -1,16 +1,16 @@ .changeImageModalContainer { height: 280px; - input { - margin-top: 25px; - margin-bottom: 15px; - border-width: 0px; - } + input { + margin-top: 25px; + margin-bottom: 15px; + border-width: 0px; + } - .save-image{ - margin-left: 155px; - margin-top: 60px; - } + .save-image { + margin-left: 155px; + margin-top: 60px; + } } #settings-grid { @@ -21,11 +21,11 @@ input { line-height: 16px; border-radius: 4px; - border: 2px solid #BDBDBD; + border: 2px solid #bdbdbd; box-sizing: border-box; width: 75%; height: 40px; margin-top: 10px; margin-bottom: 40px; } -} \ No newline at end of file +}