redesign

frontend/src/components/react/admin/Login.tsx

@@ -29,8 +29,8 @@ export default function Login() {
   }
 
   return (
-    <div className="max-w-md mx-auto mt-16">
-      <div className="glass p-10">
+    <div className="max-w-md mx-auto mt-10 md:mt-20 px-1">
+      <div className="glass p-7 sm:p-10">
         <div className="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-3 text-center">
           Artist's entrance
         </div>
@@ -43,7 +43,7 @@ export default function Login() {
         <p className="text-[var(--subtext1)] mb-8 text-center font-display italic">
           Present your token to enter the back room.
         </p>
-        <form onSubmit={handleSubmit} className="space-y-6">
+        <form onSubmit={handleSubmit} className="space-y-6" noValidate>
           <div>
             <label htmlFor="token" className="field-label">Admin token</label>
             <input
@@ -53,24 +53,39 @@ export default function Login() {
               value={value}
               onChange={e => setValue(e.target.value)}
               autoComplete="current-password"
+              aria-invalid={error ? true : undefined}
+              aria-describedby={error ? 'login-error' : undefined}
               className="field-input font-mono tracking-widest"
               placeholder="••••••••••••"
             />
           </div>
           {error && (
-            <p className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic">
+            <p
+              id="login-error"
+              role="alert"
+              className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic"
+            >
               {error}
             </p>
           )}
           <button
             type="submit"
             disabled={busy}
-            className="btn btn--primary btn--block"
+            className="btn btn--primary btn--block btn--lg"
           >
             {busy ? 'Unlocking…' : 'Enter'}
           </button>
         </form>
       </div>
+      <div className="text-center mt-6">
+        <a
+          href="/"
+          className="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors group"
+        >
+          <span className="transition-transform group-hover:-translate-x-0.5">←</span>
+          Back to the catalogue
+        </a>
+      </div>
     </div>
   );
 }