From fe77371620757fa82e05906a3bf268e099b00d26 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Thu, 4 Apr 2024 17:29:08 -0700
Subject: Clean up login screen

---
 modern/src/login/LoginPage.jsx | 81 ++++++++++++++++++++++--------------------
 modern/src/login/LogoImage.jsx |  3 +-
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/modern/src/login/LoginPage.jsx b/modern/src/login/LoginPage.jsx
index 2dac3846..f3829156 100644
--- a/modern/src/login/LoginPage.jsx
+++ b/modern/src/login/LoginPage.jsx
@@ -21,8 +21,11 @@ import { useCatch } from '../reactHelper';
 const useStyles = makeStyles((theme) => ({
   options: {
     position: 'fixed',
-    top: theme.spacing(1),
-    right: theme.spacing(1),
+    top: theme.spacing(2),
+    right: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
   },
   container: {
     display: 'flex',
@@ -31,15 +34,16 @@ const useStyles = makeStyles((theme) => ({
   },
   extraContainer: {
     display: 'flex',
-    gap: theme.spacing(2),
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: theme.spacing(4),
+    marginTop: theme.spacing(2),
   },
   registerButton: {
     minWidth: 'unset',
   },
-  resetPassword: {
+  link: {
     cursor: 'pointer',
-    textAlign: 'center',
-    marginTop: theme.spacing(2),
   },
 }));
 
@@ -152,6 +156,20 @@ const LoginPage = () => {
             </IconButton>
           </Tooltip>
         )}
+        {languageEnabled && (
+          <FormControl>
+            <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
+              {languageList.map((it) => (
+                <MenuItem key={it.code} value={it.code}>
+                  <Box component="span" sx={{ mr: 1 }}>
+                    <ReactCountryFlag countryCode={it.country} svg />
+                  </Box>
+                  {it.name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
       </div>
       <div className={classes.container}>
         {useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.primary.main} />}
@@ -207,40 +225,27 @@ const LoginPage = () => {
           </Button>
         )}
         <div className={classes.extraContainer}>
-          <Button
-            className={classes.registerButton}
-            onClick={() => navigate('/register')}
-            disabled={!registrationEnabled}
-            color="secondary"
-          >
-            {t('loginRegister')}
-          </Button>
-          {languageEnabled && (
-            <FormControl fullWidth>
-              <InputLabel>{t('loginLanguage')}</InputLabel>
-              <Select label={t('loginLanguage')} value={language} onChange={(e) => setLanguage(e.target.value)}>
-                {languageList.map((it) => (
-                  <MenuItem key={it.code} value={it.code}>
-                    <Box component="span" sx={{ mr: 1 }}>
-                      <ReactCountryFlag countryCode={it.country} svg />
-                    </Box>
-                    {it.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
+          {registrationEnabled && (
+            <Link
+              onClick={() => navigate('/register')}
+              className={classes.link}
+              underline="none"
+              variant="caption"
+            >
+              {t('loginRegister')}
+            </Link>
+          )}
+          {emailEnabled && (
+            <Link
+              onClick={() => navigate('/reset-password')}
+              className={classes.link}
+              underline="none"
+              variant="caption"
+            >
+              {t('loginReset')}
+            </Link>
           )}
         </div>
-        {emailEnabled && (
-          <Link
-            onClick={() => navigate('/reset-password')}
-            className={classes.resetPassword}
-            underline="none"
-            variant="caption"
-          >
-            {t('loginReset')}
-          </Link>
-        )}
       </div>
       <Snackbar
         open={!!announcement && !announcementShown}
diff --git a/modern/src/login/LogoImage.jsx b/modern/src/login/LogoImage.jsx
index 26ff81e6..e92403ef 100644
--- a/modern/src/login/LogoImage.jsx
+++ b/modern/src/login/LogoImage.jsx
@@ -4,13 +4,14 @@ import { useSelector } from 'react-redux';
 import { makeStyles } from '@mui/styles';
 import Logo from '../resources/images/logo.svg?react';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   image: {
     alignSelf: 'center',
     maxWidth: '240px',
     maxHeight: '120px',
     width: 'auto',
     height: 'auto',
+    margin: theme.spacing(2),
   },
 }));
 
-- 
cgit v1.2.3