init elas atelier

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

@@ -20,22 +20,32 @@ export default function Login() {
       window.location.href = '/admin';
     } catch (e) {
       if (e instanceof ApiError && e.status === 401) {
-        setError('Invalid token.');
+        setError('That key does not open this door.');
       } else {
-        setError('Login failed. Try again.');
+        setError('Could not reach the door. Try again.');
       }
       setBusy(false);
     }
   }
 
   return (
-    <div className="max-w-md mx-auto mt-20">
-      <div className="glass p-12">
-        <h1 className="text-3xl font-bold mb-6 text-mauve">Admin Login</h1>
-        <p className="text-subtext0 mb-8">Enter your admin token to access the dashboard.</p>
+    <div className="max-w-md mx-auto mt-16">
+      <div className="glass p-10">
+        <div className="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-3 text-center">
+          Curator's entrance
+        </div>
+        <h1 className="font-display italic text-3xl md:text-4xl font-semibold text-[var(--text)] mb-2 text-center leading-tight">
+          Sign in
+        </h1>
+        <div className="section-rule max-w-[180px] mx-auto mb-6">
+          <span className="ornament">✦</span>
+        </div>
+        <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">
           <div>
-            <label htmlFor="token" className="block text-sm font-medium text-subtext1 mb-2">Admin Token</label>
+            <label htmlFor="token" className="field-label">Admin token</label>
             <input
               type="password"
               id="token"
@@ -43,21 +53,21 @@ export default function Login() {
               value={value}
               onChange={e => setValue(e.target.value)}
               autoComplete="current-password"
-              className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+              className="field-input font-mono tracking-widest"
               placeholder="••••••••••••"
             />
           </div>
           {error && (
-            <p className="text-sm text-red bg-red/10 border border-red/20 rounded-lg px-3 py-2">
+            <p 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="w-full bg-mauve text-crust font-bold py-3 rounded-lg hover:bg-pink transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+            className="btn-stamp w-full justify-center disabled:opacity-60 disabled:cursor-not-allowed"
           >
-            {busy ? 'Logging in...' : 'Login'}
+            {busy ? 'Unlocking…' : 'Enter'}
           </button>
         </form>
       </div>