SignUp Page small screen fix. (#144)

* Add autochanged tsconfig. * Make signup page responsive. * Drop minWidth on dropdowns to prevent overflow.
HKN-UCSD · Sep 20, 2020 · 0b2d466 · 0b2d466
1 parent 61af12d
commit 0b2d466
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 112 deletions.
diff --git a/src/components/dropdowns/MajorDropdownField/index.js b/src/components/dropdowns/MajorDropdownField/index.js
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 
 import GenericDropdownField from '../base';
 
-import styles from './styles';
-
 import ELIGIBLE_MAJORS from '@Constants/eligibleMajors';
 
 const createFullMajorTitle = (department, major) => {
@@ -37,7 +34,6 @@ const MajorDropdownField = props => {
 
   return (
     <GenericDropdownField
-      className={classes.root}
       name={name}
       label={label}
       defaultValue=''
@@ -57,4 +53,4 @@ MajorDropdownField.defaultProps = {
   includeOthers: false,
 };
 
-export default withStyles(styles)(MajorDropdownField);
+export default MajorDropdownField;
diff --git a/src/components/dropdowns/MajorDropdownField/styles.js b/src/components/dropdowns/MajorDropdownField/styles.js
diff --git a/src/components/dropdowns/YearDropdownField/index.js b/src/components/dropdowns/YearDropdownField/index.js
@@ -1,12 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getYear } from 'date-fns';
-import { withStyles } from '@material-ui/core/styles';
 
 import GenericDropdownField from '../base';
 
-import styles from './styles';
-
 const yearDropdownChoices = (minYear, maxYear) => {
   const yearChoices = [];
 
@@ -18,11 +15,10 @@ const yearDropdownChoices = (minYear, maxYear) => {
 };
 
 const YearDropdownField = props => {
-  const { classes, name, label, minYear, maxYear, ...otherProps } = props;
+  const { name, label, minYear, maxYear, ...otherProps } = props;
 
   return (
     <GenericDropdownField
-      className={classes.root}
       name={name}
       label={label}
       {...otherProps}
@@ -43,4 +39,4 @@ YearDropdownField.defaultProps = {
   maxYear: parseInt(getYear(new Date()), 10) + 5,
 };
 
-export default withStyles(styles)(YearDropdownField);
+export default YearDropdownField;
diff --git a/src/components/dropdowns/YearDropdownField/styles.js b/src/components/dropdowns/YearDropdownField/styles.js
diff --git a/src/pages/SignUpPage/components/SignUpForm/index.js b/src/pages/SignUpPage/components/SignUpForm/index.js
@@ -35,12 +35,13 @@ const SignUpForm = props => {
     >
       {({ submitForm, isSubmitting }) => (
         <Form>
-          <Grid container direction='column' justify='center' spacing={3}>
+          <Grid container direction='column' justify='center' spacing={2}>
             <Grid item>
-              <Grid container direction='row' spacing={3}>
+              <Grid container direction='row' spacing={2}>
                 <Grid item xs={6}>
                   <Field
                     component={TextField}
+                    fullWidth
                     name='firstName'
                     label='First Name'
                   />
@@ -49,6 +50,7 @@ const SignUpForm = props => {
                 <Grid item xs={6}>
                   <Field
                     component={TextField}
+                    fullWidth
                     name='lastName'
                     label='Last Name'
                   />
@@ -57,53 +59,53 @@ const SignUpForm = props => {
             </Grid>
 
             <Grid item>
-              <Grid container direction='column' spacing={3}>
-                <Grid item>
-                  <Field
-                    component={TextField}
-                    fullWidth
-                    name='email'
-                    label='Email Address'
-                  />
-                </Grid>
+              <Field
+                component={TextField}
+                fullWidth
+                name='email'
+                label='Email Address'
+              />
+            </Grid>
 
-                <Grid item>
-                  <Field
-                    component={TextField}
-                    fullWidth
-                    name='password'
-                    type='password'
-                    label='Password'
-                  />
-                </Grid>
+            <Grid item>
+              <Field
+                component={TextField}
+                fullWidth
+                name='password'
+                type='password'
+                label='Password'
+              />
+            </Grid>
 
-                <Grid item>
-                  <Field
-                    component={TextField}
-                    fullWidth
-                    name='confirmPW'
-                    type='password'
-                    label='Confirm Password'
-                  />
-                </Grid>
-              </Grid>
+            <Grid item>
+              <Field
+                component={TextField}
+                fullWidth
+                name='confirmPW'
+                type='password'
+                label='Confirm Password'
+              />
             </Grid>
 
             <Grid item>
-              <Grid container direction='row' spacing={3}>
+              <Grid container direction='row' spacing={2}>
                 <Grid item xs={8}>
-                  <MajorDropdownField name='major' label='Major' />
+                  <MajorDropdownField name='major' label='Major' fullWidth />
                 </Grid>
 
                 <Grid item xs={4}>
-                  <YearDropdownField name='gradYear' label='Grad Year' />
+                  <YearDropdownField
+                    name='gradYear'
+                    label='Grad Year'
+                    fullWidth
+                  />
                 </Grid>
               </Grid>
             </Grid>
 
             <Grid item>
               <Button
-                className={classes.signUpButton}
+                className={classes.signUp}
                 variant='contained'
                 color='primary'
                 fullWidth

diff --git a/src/pages/SignUpPage/components/SignUpForm/styles.js b/src/pages/SignUpPage/components/SignUpForm/styles.js
@@ -1,6 +1,6 @@
 const styles = () => ({
-  signUpButton: {
-    marginTop: '10px',
+  signUp: {
+    marginTop: 8,
   },
   signInRedirect: {
     color: '#5B5B5B',

diff --git a/src/pages/SignUpPage/index.js b/src/pages/SignUpPage/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, Card } from '@material-ui/core';
+import { Avatar, Card, Grid, CardContent } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 import SignUpForm from './components/SignUpForm';
@@ -31,12 +31,34 @@ class SignUpPage extends React.Component {
     const { classes } = this.props;
 
     return (
-      <div className={classes.root}>
-        <Card className={classes.signUpCard} elevation={3}>
-          <Avatar className={classes.logo} src={HKN_TRIDENT_LOGO} />
-          <SignUpForm handleSubmit={this.handleSubmit} />
-        </Card>
-      </div>
+      <Grid
+        className={classes.root}
+        container
+        direction='row'
+        justify='center'
+        alignItems='center'
+      >
+        <Grid item>
+          <Card elevation={3} className={classes.card}>
+            <CardContent>
+              <Grid
+                container
+                className={classes.cardContent}
+                alignItems='center'
+                direction='column'
+                spacing={2}
+              >
+                <Grid item>
+                  <Avatar className={classes.logo} src={HKN_TRIDENT_LOGO} />
+                </Grid>
+                <Grid item>
+                  <SignUpForm handleSubmit={this.handleSubmit} />
+                </Grid>
+              </Grid>
+            </CardContent>
+          </Card>
+        </Grid>
+      </Grid>
     );
   }
 }

diff --git a/src/pages/SignUpPage/styles.js b/src/pages/SignUpPage/styles.js
@@ -1,23 +1,21 @@
-const styles = () => ({
+const styles = theme => ({
   root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  signUpCard: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '536px',
-    marginTop: '37px',
-    marginBottom: '37px',
-    paddingBottom: '20px',
+    [theme.breakpoints.up('sm')]: {
+      marginTop: '8vh',
+    },
+    [theme.breakpoints.only('xs')]: {
+      marginTop: '3vh',
+    },
   },
   logo: {
-    width: '150px',
-    height: '107px',
-    marginTop: '28px',
-    marginBottom: '40px',
+    minWidth: '98px',
+    minHeight: '70px',
+    width: '14vh',
+    height: '10vh',
+  },
+  cardContent: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
   },
 });
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,27 +1,27 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react",
-    "baseUrl": "."
-  },
-  "include": [
-    "src"
-  ],
-  "extends": "./tsconfig.paths.json"
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": "."
+  },
+  "include": [
+    "src"
+  ],
+  "extends": "./tsconfig.paths.json"
+}