From 8f75e795f29729bb21a97cea56c521ec30864ea8 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 19 May 2025 00:31:31 -0700
Subject: [PATCH] improvement(ui): auth

---
 apps/sim/app/(auth)/layout.tsx                |  2 +-
 apps/sim/app/(auth)/login/login-form.tsx      | 35 +++++++++----------
 .../reset-password/reset-password-form.tsx    |  5 +++
 apps/sim/app/(auth)/signup/signup-form.tsx    | 35 +++++++++----------
 4 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/apps/sim/app/(auth)/layout.tsx b/apps/sim/app/(auth)/layout.tsx
index 2b672192c7..efa7b59058 100644
--- a/apps/sim/app/(auth)/layout.tsx
+++ b/apps/sim/app/(auth)/layout.tsx
@@ -19,7 +19,7 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
       />
 
       {/* Header */}
-      <div className="px-6 py-8 relative z-10">
+      <div className="px-6 pt-9 relative z-10">
         <div className="max-w-7xl mx-auto">
           <Link href="/" className="inline-flex">
             <Image src="/sim.svg" alt="Sim Logo" width={42} height={42} />
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 5d5f445532..c97903c701 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -265,6 +265,19 @@ export default function LoginPage({
 
       <div className="flex flex-col gap-6">
         <div className="bg-neutral-800/50 backdrop-blur-sm border border-neutral-700/40 rounded-xl p-6">
+          <SocialLoginButtons
+            googleAvailable={googleAvailable}
+            githubAvailable={githubAvailable}
+            isProduction={isProduction}
+            callbackURL={callbackUrl}
+          />
+
+          <div className="relative py-4 mt-2">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-neutral-700/50"></div>
+            </div>
+          </div>
+
           <form onSubmit={onSubmit} className="space-y-5">
             <div className="space-y-4">
               <div className="space-y-2">
@@ -280,7 +293,7 @@ export default function LoginPage({
                   autoCapitalize="none"
                   autoComplete="email"
                   autoCorrect="off"
-                  className="bg-neutral-900 border-neutral-700 text-white"
+                  className="bg-neutral-900 border-neutral-700 text-white placeholder:text-white/60"
                 />
               </div>
               <div className="space-y-2">
@@ -314,7 +327,7 @@ export default function LoginPage({
                         setPasswordErrors([])
                       }
                     }}
-                    className="bg-neutral-900 border-neutral-700 text-white pr-10"
+                    className="bg-neutral-900 border-neutral-700 text-white pr-10 placeholder:text-white/60"
                   />
                   <button
                     type="button"
@@ -343,22 +356,6 @@ export default function LoginPage({
               {isLoading ? 'Signing in...' : 'Sign In'}
             </Button>
           </form>
-
-          <div className="relative my-6">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-neutral-700/50"></div>
-            </div>
-            <div className="relative flex justify-center text-xs">
-              <span className="bg-neutral-800/50 px-2 text-neutral-400">or continue with</span>
-            </div>
-          </div>
-
-          <SocialLoginButtons
-            googleAvailable={googleAvailable}
-            githubAvailable={githubAvailable}
-            isProduction={isProduction}
-            callbackURL={callbackUrl}
-          />
         </div>
 
         <div className="text-center text-sm">
@@ -394,7 +391,7 @@ export default function LoginPage({
                 placeholder="Enter your email"
                 required
                 type="email"
-                className="bg-neutral-900 border-neutral-700/80 text-white focus:border-[#802FFF]/70 focus:ring-[#802FFF]/20"
+                className="bg-neutral-900 border-neutral-700/80 text-white focus:border-[#802FFF]/70 focus:ring-[#802FFF]/20 placeholder:text-white/60"
               />
             </div>
             {resetStatus.type && (
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
index 80e0d66f89..cabda4ac6f 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
@@ -44,6 +44,7 @@ export function RequestResetForm({
             type="email"
             disabled={isSubmitting}
             required
+            className="placeholder:text-white/60"
           />
           <p className="text-sm text-muted-foreground">
             We'll send a password reset link to this email address.
@@ -133,6 +134,8 @@ export function SetNewPasswordForm({
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
+            placeholder="Enter new password"
+            className="placeholder:text-white/60"
           />
         </div>
         <div className="grid gap-2">
@@ -147,6 +150,8 @@ export function SetNewPasswordForm({
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             required
+            placeholder="Confirm new password"
+            className="placeholder:text-white/60"
           />
         </div>
 
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index ef1f091589..c113b190a9 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -292,6 +292,19 @@ function SignupFormContent({
 
       <div className="flex flex-col gap-6">
         <div className="bg-neutral-800/50 backdrop-blur-sm border border-neutral-700/40 rounded-xl p-6">
+          <SocialLoginButtons
+            githubAvailable={githubAvailable}
+            googleAvailable={googleAvailable}
+            callbackURL={redirectUrl || '/w'}
+            isProduction={isProduction}
+          />
+
+          <div className="relative py-4 mt-2">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-neutral-700/50"></div>
+            </div>
+          </div>
+
           <form onSubmit={onSubmit} className="space-y-5">
             <div className="space-y-4">
               <div className="space-y-2">
@@ -306,7 +319,7 @@ function SignupFormContent({
                   type="text"
                   autoCapitalize="words"
                   autoComplete="name"
-                  className="bg-neutral-900 border-neutral-700 text-white"
+                  className="bg-neutral-900 border-neutral-700 text-white placeholder:text-white/60"
                 />
               </div>
               <div className="space-y-2">
@@ -325,7 +338,7 @@ function SignupFormContent({
                   value={email}
                   onChange={handleEmailChange}
                   className={cn(
-                    'bg-neutral-900 border-neutral-700 text-white',
+                    'bg-neutral-900 border-neutral-700 text-white placeholder:text-white/60',
                     emailError && 'border-red-500 focus-visible:ring-red-500'
                   )}
                 />
@@ -351,7 +364,7 @@ function SignupFormContent({
                     autoCorrect="off"
                     value={password}
                     onChange={handlePasswordChange}
-                    className="bg-neutral-900 border-neutral-700 text-white pr-10"
+                    className="bg-neutral-900 border-neutral-700 text-white pr-10 placeholder:text-white/60"
                   />
                   <button
                     type="button"
@@ -380,22 +393,6 @@ function SignupFormContent({
               {isLoading ? 'Creating account...' : 'Create Account'}
             </Button>
           </form>
-
-          <div className="relative my-6">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-neutral-700/50"></div>
-            </div>
-            <div className="relative flex justify-center text-xs">
-              <span className="bg-neutral-800/50 px-2 text-neutral-400">or continue with</span>
-            </div>
-          </div>
-
-          <SocialLoginButtons
-            githubAvailable={githubAvailable}
-            googleAvailable={googleAvailable}
-            callbackURL={redirectUrl || '/w'}
-            isProduction={isProduction}
-          />
         </div>
 
         <div className="text-center text-sm">