u

src/components/LoginPage.jsx

@@ -1,6 +1,8 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 import GoogleIcon from '@mui/icons-material/Google';
 import { enqueueSnackbar } from 'notistack';
 import { notifyErrorMessage } from '../utils/notify';
@@ -15,6 +17,8 @@ import {
   requestGoogleIdToken,
 } from '../auth/googleSignIn';
 
+import quixposLogo from '../assets/quixpos-logo.png';
+
 class LoginPage extends PureComponent {
   static contextType = StorageManagerContext;
 
@@ -93,17 +97,62 @@ class LoginPage extends PureComponent {
           justifyContent: 'center',
           minHeight: '100vh',
           bgcolor: 'background.default',
+          p: 2,
         }}
       >
-        <Button
-          variant="contained"
-          size="large"
-          startIcon={<GoogleIcon />}
-          disabled={busy || loading || !ready}
-          onClick={this.handleLogin}
+        <Paper
+          elevation={3}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 2.5,
+            px: 5,
+            py: 5,
+            maxWidth: 400,
+            width: '100%',
+            borderRadius: 3,
+            textAlign: 'center',
+          }}
         >
-          {busy ? 'Signing in…' : 'Sign in with Google'}
-        </Button>
+          <Box
+            component="img"
+            src={quixposLogo}
+            alt="QuixPOS Logo"
+            sx={{
+              width: 96,
+              height: 96,
+              borderRadius: 3,
+              display: 'block',
+            }}
+          />
+          <Box>
+            <Typography
+              variant="h5"
+              component="h1"
+              sx={{ fontWeight: 700, color: '#1a3533', letterSpacing: '-0.01em' }}
+            >
+              QuixPOS
+            </Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ color: 'text.secondary', fontWeight: 500, mt: 0.5 }}
+            >
+              Management Interface Login
+            </Typography>
+          </Box>
+          <Button
+            variant="contained"
+            size="large"
+            fullWidth
+            startIcon={<GoogleIcon />}
+            disabled={busy || loading || !ready}
+            onClick={this.handleLogin}
+            sx={{ mt: 1, py: 1.25, textTransform: 'none', fontWeight: 600 }}
+          >
+            {busy ? 'Anmeldung läuft…' : 'Mit Google anmelden'}
+          </Button>
+        </Paper>
       </Box>
     );
   }