Revamp Login Page design and update styles.

Simplified the Login Page layout by removing the branding section and introducing a cleaner, more concise format. Adjusted styles for improved spacing, gradients, and overall visual hierarchy. Removed unused styles and animations for optimization.

frontend/src/pages/LoginPage.jsx

@@ -26,40 +26,31 @@ export function LoginPage() {
 
   return (
     <div className="login-wrap">
-      <div className="login-shell">
+      <form className="card login-card" onSubmit={submit}>
-        <section className="login-brand card">
+        <div className="login-eyebrow">NexaPG Monitor</div>
-          <h1>NexaPG Monitor</h1>
+        <h2>Willkommen zurück</h2>
-          <p>PostgreSQL Monitoring, Query Insights und Infrastruktur-Overview in einer Ansicht.</p>
+        <p className="login-subtitle">Melde dich an, um Monitoring und Query Insights zu öffnen.</p>
-          <div className="login-brand-points">
+        <div className="input-shell">
-            <span>Multi-Target Monitoring</span>
+          <input
-            <span>Live Database Overview</span>
+            type="email"
-            <span>RBAC + Audit Logging</span>
+            placeholder="E-Mail"
-          </div>
+            value={email}
-        </section>
+            onChange={(e) => setEmail(e.target.value)}
-        <form className="card login-card" onSubmit={submit}>
+            autoComplete="username"
-          <h2>Login</h2>
+          />
-          <div className="input-shell">
+        </div>
-            <input
+        <div className="input-shell">
-              type="email"
+          <input
-              placeholder="E-Mail"
+            type="password"
-              value={email}
+            placeholder="Password"
-              onChange={(e) => setEmail(e.target.value)}
+            value={password}
-              autoComplete="username"
+            onChange={(e) => setPassword(e.target.value)}
-            />
+            autoComplete="current-password"
-          </div>
+          />
-          <div className="input-shell">
+        </div>
-            <input
+        {error && <p className="error">{error}</p>}
-              type="password"
+        <button className="login-cta" disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
-              placeholder="Password"
+      </form>
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="current-password"
-            />
-          </div>
-          {error && <p className="error">{error}</p>}
-          <button className="login-cta" disabled={loading}>{loading ? "Bitte warten..." : "Einloggen"}</button>
-        </form>
-      </div>
     </div>
   );
 }

frontend/src/styles.css

@@ -213,71 +213,55 @@ td {
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 20px;
+  padding: 24px;
   background:
-    radial-gradient(1000px 500px at 10% 10%, #12366e55, transparent),
+    radial-gradient(900px 500px at 20% 15%, #15356a44, transparent),
-    radial-gradient(900px 450px at 90% 90%, #1e4f7e40, transparent);
+    radial-gradient(900px 500px at 80% 90%, #1c4a7a33, transparent);
 }
 
 .login-card {
-  width: min(460px, 92vw);
+  width: min(460px, 95vw);
   display: grid;
-  gap: 8px;
+  gap: 10px;
-  border-color: #3559a3;
+  border-color: #335aa4;
-  backdrop-filter: blur(8px);
+  padding: 26px;
+  background: linear-gradient(180deg, #182548f0, #141f3df0);
+  box-shadow: 0 20px 50px #050b1f66;
+  backdrop-filter: blur(6px);
   animation: loginEnter 0.5s ease;
 }
 
-.login-shell {
+.login-eyebrow {
-  width: min(1120px, 96vw);
+  font-size: 12px;
-  display: grid;
+  color: #a8badb;
-  grid-template-columns: 1fr 0.95fr;
+  letter-spacing: 0.08em;
-  gap: 18px;
+  text-transform: uppercase;
 }
 
-.login-brand {
+.login-card h2 {
-  min-height: 380px;
-  display: grid;
-  align-content: center;
-  gap: 14px;
-  border-color: #27498d;
-  background:
-    linear-gradient(155deg, #152957 0%, #102147 40%, #0f1b3d 100%);
-}
-
-.login-brand h1 {
   margin: 0;
-  font-size: 38px;
+  font-size: 34px;
+  line-height: 1.05;
 }
 
-.login-brand p {
+.login-subtitle {
-  margin: 0;
+  margin: 0 0 2px 0;
-  color: #b5c5e4;
+  color: #9db0d2;
-  max-width: 58ch;
-}
-
-.login-brand-points {
-  display: grid;
-  gap: 8px;
-}
-
-.login-brand-points span {
-  color: #d2e0f8;
   font-size: 14px;
 }
 
 .input-shell {
   border: 1px solid #2b3f74;
   border-radius: 12px;
-  padding: 1px;
+  padding: 0;
   background: #0e1731;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
 }
 
 .input-shell:focus-within {
   border-color: #38bdf8;
-  box-shadow: 0 0 0 3px #38bdf830, 0 0 20px #38bdf830;
+  box-shadow: 0 0 0 3px #38bdf820;
-  animation: focusPulse 1.6s ease-in-out infinite;
+  transform: translateY(-1px);
 }
 
 .input-shell input {
@@ -285,16 +269,16 @@ td {
   border: 0;
   outline: none;
   background: transparent;
-  padding: 9px 10px;
+  padding: 11px 12px;
   font-size: 15px;
 }
 
 .login-cta {
-  margin-top: 2px;
+  margin-top: 4px;
   font-weight: 700;
   border-color: #3f74d6;
-  background: linear-gradient(90deg, #1e74d6, #1b5ab6);
+  background: linear-gradient(90deg, #2e7cd4, #265fb4);
-  padding: 9px 12px;
+  padding: 11px 12px;
 }
 
 .login-cta:hover {
@@ -310,15 +294,6 @@ td {
   transition: background-color 9999s ease-out 0s;
 }
 
-@keyframes focusPulse {
-  0%, 100% {
-    box-shadow: 0 0 0 3px #38bdf820, 0 0 14px #38bdf820;
-  }
-  50% {
-    box-shadow: 0 0 0 3px #38bdf840, 0 0 24px #38bdf840;
-  }
-}
-
 @keyframes loginEnter {
   from {
     opacity: 0;
@@ -407,10 +382,4 @@ td {
     height: auto;
     overflow: visible;
   }
-  .login-shell {
-    grid-template-columns: 1fr;
-  }
-  .login-brand {
-    min-height: 240px;
-  }
 }