Clean up login screens

1 files changed, 57 insertions, 71 deletions

diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 986bf894..08ff3e8f 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import {
-  Grid, Button, TextField, Typography, Link, Snackbar,
+  Button, TextField, Typography, Snackbar, IconButton,
 } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { useNavigate } from 'react-router-dom';
@@ -11,18 +11,21 @@ import { snackBarDurationShortMs } from '../common/util/duration';
 import { useCatch } from '../reactHelper';
 
 const useStyles = makeStyles((theme) => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+  },
   title: {
     fontSize: theme.spacing(3),
     fontWeight: 500,
-    marginLeft: theme.spacing(2),
+    marginLeft: theme.spacing(1),
     textTransform: 'uppercase',
   },
-  link: {
-    fontSize: theme.spacing(3),
-    fontWeight: 500,
-    marginTop: theme.spacing(0.5),
-    cursor: 'pointer',
-  },
 }));
 
 const RegisterPage = () => {
@@ -50,75 +53,58 @@ const RegisterPage = () => {
 
   return (
     <LoginLayout>
+      <div className={classes.container}>
+        <div className={classes.header}>
+          <IconButton color="primary" onClick={() => navigate('/login')}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Typography className={classes.title} color="primary">
+            {t('loginRegister')}
+          </Typography>
+        </div>
+        <TextField
+          required
+          label={t('sharedName')}
+          name="name"
+          value={name}
+          autoComplete="name"
+          autoFocus
+          onChange={(event) => setName(event.target.value)}
+        />
+        <TextField
+          required
+          type="email"
+          label={t('userEmail')}
+          name="email"
+          value={email}
+          autoComplete="email"
+          onChange={(event) => setEmail(event.target.value)}
+        />
+        <TextField
+          required
+          label={t('userPassword')}
+          name="password"
+          value={password}
+          type="password"
+          autoComplete="current-password"
+          onChange={(event) => setPassword(event.target.value)}
+        />
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={handleSubmit}
+          disabled={!name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password}
+          fullWidth
+        >
+          {t('loginRegister')}
+        </Button>
+      </div>
       <Snackbar
         open={snackbarOpen}
         onClose={() => navigate('/login')}
         autoHideDuration={snackBarDurationShortMs}
         message={t('loginCreated')}
       />
-      <Grid container direction="column" spacing={2}>
-        <Grid container item>
-          <Grid item>
-            <Typography className={classes.link} color="primary">
-              <Link onClick={() => navigate('/login')}>
-                <ArrowBackIcon />
-              </Link>
-            </Typography>
-          </Grid>
-          <Grid item xs>
-            <Typography className={classes.title} color="primary">
-              {t('loginRegister')}
-            </Typography>
-          </Grid>
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('sharedName')}
-            name="name"
-            value={name}
-            autoComplete="name"
-            autoFocus
-            onChange={(event) => setName(event.target.value)}
-          />
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            type="email"
-            label={t('userEmail')}
-            name="email"
-            value={email}
-            autoComplete="email"
-            onChange={(event) => setEmail(event.target.value)}
-          />
-        </Grid>
-        <Grid item>
-          <TextField
-            required
-            fullWidth
-            label={t('userPassword')}
-            name="password"
-            value={password}
-            type="password"
-            autoComplete="current-password"
-            onChange={(event) => setPassword(event.target.value)}
-          />
-        </Grid>
-        <Grid item>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={handleSubmit}
-            disabled={!name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password}
-            fullWidth
-          >
-            {t('loginRegister')}
-          </Button>
-        </Grid>
-      </Grid>
     </LoginLayout>
   );
 };