Redesign beta Magent UI

frontend/app/login/page.tsx

@@ -108,10 +108,17 @@ export default function LoginPage() {
   })()
 
   return (
-    <main className="card auth-card">
-      <BrandingLogo className="brand-logo brand-logo--login" />
-      <h1>Sign in</h1>
-      <p className="lede">{loginHelpText}</p>
+    <main className="auth-screen">
+      <section className="auth-hero">
+        <div className="auth-mark">
+          <BrandingLogo className="brand-logo brand-logo--login" />
+        </div>
+        <div className="auth-title-block">
+          <span className="section-kicker">Secure access</span>
+          <h1>Magent operational gateway</h1>
+          <p>{loginHelpText}</p>
+        </div>
+      </section>
       <form
         onSubmit={(event) => {
           if (!primaryMode) {
@@ -121,23 +128,25 @@ export default function LoginPage() {
           }
           void submit(event, primaryMode)
         }}
-        className="auth-form"
+        className="auth-form auth-panel"
       >
         <label>
-          Username
+          <span>Username</span>
           <input
             value={username}
             onChange={(event) => setUsername(event.target.value)}
             autoComplete="username"
+            placeholder="Enter your username"
           />
         </label>
         <label>
-          Password
+          <span>Password</span>
           <input
             type="password"
             value={password}
             onChange={(event) => setPassword(event.target.value)}
             autoComplete="current-password"
+            placeholder="Enter your password"
           />
         </label>
         {error && <div className="error-banner">{error}</div>}
@@ -171,6 +180,10 @@ export default function LoginPage() {
         {!loginOptions.showJellyfinLogin && !loginOptions.showLocalLogin ? (
           <div className="error-banner">Login is currently disabled. Contact an administrator.</div>
         ) : null}
+        <div className="auth-footnote">
+          <span className="live-dot" aria-hidden="true" />
+          Beta environment
+        </div>
       </form>
     </main>
   )