Improve connect form

Author: ericdallo

src/pages/ConnectForm.css

@@ -13,49 +13,98 @@
   padding: 1.5rem;
 
   /* Deep dark base */
-  background: #090914;
+  background: #06060f;
 }
 
-/* Soft radial glow behind the card */
-.connect-page::before {
-  content: '';
+/* ---- Animated gradient orbs ---- */
+
+.connect-page-orb {
   position: absolute;
-  width: 800px;
-  height: 800px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(0, 165, 184, 0.06) 0%, transparent 70%);
   pointer-events: none;
+  will-change: transform;
+}
+
+.connect-page-orb--1 {
+  width: 550px;
+  height: 550px;
+  top: -15%;
+  left: -8%;
+  background: #00a5b8;
+  opacity: 0.22;
+  filter: blur(100px);
+  animation: orb-drift-1 14s ease-in-out infinite alternate;
+}
+
+.connect-page-orb--2 {
+  width: 500px;
+  height: 500px;
+  bottom: -15%;
+  right: -6%;
+  background: #7850dc;
+  opacity: 0.18;
+  filter: blur(100px);
+  animation: orb-drift-2 18s ease-in-out infinite alternate;
+}
+
+.connect-page-orb--3 {
+  width: 350px;
+  height: 350px;
+  top: 55%;
+  left: 58%;
+  background: #00c896;
+  opacity: 0.12;
+  filter: blur(80px);
+  animation: orb-drift-3 12s ease-in-out infinite alternate;
 }
 
-/* Subtle dot grid overlay */
+@keyframes orb-drift-1 {
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(80px, 50px) scale(1.15); }
+  100% { transform: translate(-40px, 90px) scale(0.95); }
+}
+
+@keyframes orb-drift-2 {
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(-70px, -40px) scale(1.1); }
+  100% { transform: translate(50px, -80px) scale(0.92); }
+}
+
+@keyframes orb-drift-3 {
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(-40px, -60px) scale(1.2); }
+  100% { transform: translate(30px, 40px) scale(0.88); }
+}
+
+/* Fine grid overlay */
 .connect-page::after {
   content: '';
   position: absolute;
   inset: 0;
   background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-  background-size: 24px 24px;
+  background-size: 28px 28px;
   pointer-events: none;
+  z-index: 0;
 }
 
 /* ---- Card ---- */
 
 .connect-card {
   position: relative;
   z-index: 1;
-  background: rgba(22, 22, 40, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 1.25rem;
+  background: rgba(14, 14, 28, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 1.5rem;
   padding: 3rem 2.5rem 2.5rem;
   width: 100%;
   max-width: 440px;
   text-align: center;
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(40px) saturate(1.3);
+  -webkit-backdrop-filter: blur(40px) saturate(1.3);
   box-shadow:
-    0 0 0 1px rgba(0, 165, 184, 0.04),
-    0 16px 48px rgba(0, 0, 0, 0.45),
+    0 0 0 1px rgba(0, 165, 184, 0.05),
+    0 0 80px -20px rgba(0, 165, 184, 0.08),
+    0 24px 64px rgba(0, 0, 0, 0.5),
     0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -432,18 +481,70 @@
   color: #00d4ea;
 }
 
-/* ---- Features row ---- */
-
 /* ---- Responsive ---- */
 
 @media (max-width: 480px) {
+  .connect-page {
+    padding: 0;
+    align-items: stretch;
+  }
+
   .connect-card {
-    padding: 2rem 1.5rem 1.75rem;
+    max-width: none;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    padding: 2rem 1.25rem 1.75rem;
+    box-shadow: none;
+    background: rgba(14, 14, 28, 0.5);
+  }
+
+  .connect-logo {
+    margin-bottom: 0.75rem;
+  }
+
+  .connect-logo img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .connect-card h1 {
+    font-size: 1.2rem;
+  }
+
+  .connect-subtitle {
+    font-size: 0.82rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .connect-form {
+    gap: 0.75rem;
+  }
+
+  .connect-field input,
+  .connect-host-input-group input,
+  .connect-protocol-prefix {
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
+  }
+
+  .connect-button {
+    margin-top: 0.4rem;
+    padding: 0.65rem;
   }
 
   .connect-discovery-row {
     flex-direction: column;
     align-items: flex-start;
     gap: 0.35rem;
   }
+
+  .connect-divider {
+    margin-top: 1rem;
+  }
+
+  .connect-hint {
+    margin-top: 0.75rem;
+    font-size: 0.75rem;
+  }
 }

src/pages/ConnectForm.tsx

@@ -60,6 +60,9 @@ export function ConnectForm({ onConnect, onDiscover, error, isConnecting, discov
 
   return (
     <div className="connect-page">
+      <div className="connect-page-orb connect-page-orb--1" aria-hidden="true" />
+      <div className="connect-page-orb connect-page-orb--2" aria-hidden="true" />
+      <div className="connect-page-orb connect-page-orb--3" aria-hidden="true" />
       <div className="connect-card">
         <div className="connect-logo">
           <img src="/logo.svg" alt="ECA" />