feat: redesign aplikace pomocí claude code

client/src/Login.tsx

@@ -36,21 +36,35 @@ export default function Login() {
   }, [auth]);
 
   if (!auth?.login) {
-    return <div className='login'>
-      <h1>Luncher</h1>
-      <h4 style={{ marginBottom: "50px" }}>Aplikace pro profesionální management obědů</h4>
-      <div className='login-inner'>
-        <p style={{ fontSize: "12px", marginTop: "10px" }}>
-          Zobrazované jméno by mělo být vaše jméno nebo přezdívka, pod kterou vás kolegové dokáží snadno identifikovat. Jméno je možné kdykoli změnit.
-        </p>
-        Zobrazované jméno: <input style={{ marginTop: "10px" }} ref={loginRef} type='text' onKeyDown={event => {
-          if (event.key === 'Enter') {
-            doLogin()
-          }
-        }} />
-        <Button onClick={doLogin} style={{ marginTop: "20px" }}>Uložit</Button>
+    return (
+      <div className='login-page'>
+        <div className='login-card'>
+          <h1 className='login-logo'>Luncher</h1>
+          <p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
+          <div className='login-form'>
+            <div>
+              <label htmlFor="login-input">Zobrazované jméno</label>
+              <input
+                id="login-input"
+                ref={loginRef}
+                type='text'
+                placeholder="Např. Jan Novák"
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    doLogin()
+                  }
+                }}
+              />
+              <p className='hint'>
+                Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
+                Jméno je možné kdykoli změnit.
+              </p>
+            </div>
+            <Button onClick={doLogin}>Pokračovat</Button>
+          </div>
+        </div>
       </div>
-    </div>
+    );
   }
   return <div>Neplatný stav</div>
 }