From d4d1b2e7f924c60d999719846b807aa38408ee27 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 11 Mar 2026 12:02:27 -0500
Subject: [PATCH] Style tweaks for onboarding wizard step 1

- Set animation panel (right half) background to #1d1d1d
- Add more margin above Company name form label
- Make form labels white when input is focused or has value
  using Tailwind group/focus-within pattern

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/OnboardingWizard.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/OnboardingWizard.tsx b/ui/src/components/OnboardingWizard.tsx
index a043655f..31373344 100644
--- a/ui/src/components/OnboardingWizard.tsx
+++ b/ui/src/components/OnboardingWizard.tsx
@@ -593,8 +593,8 @@ export function OnboardingWizard() {
                       </p>
                     </div>
                   </div>
-                  <div>
-                    <label className="text-xs text-muted-foreground mb-1 block">
+                  <div className="mt-3 group">
+                    <label className={cn("text-xs mb-1 block transition-colors", companyName.trim() ? "text-foreground" : "text-muted-foreground group-focus-within:text-foreground")}>
                       Company name
                     </label>
                     <input
@@ -605,8 +605,8 @@ export function OnboardingWizard() {
                       autoFocus
                     />
                   </div>
-                  <div>
-                    <label className="text-xs text-muted-foreground mb-1 block">
+                  <div className="group">
+                    <label className={cn("text-xs mb-1 block transition-colors", companyGoal.trim() ? "text-foreground" : "text-muted-foreground group-focus-within:text-foreground")}>
                       Mission / goal (optional)
                     </label>
                     <textarea
@@ -1185,7 +1185,7 @@ export function OnboardingWizard() {
           </div>
 
           {/* Right half — ASCII art (hidden on mobile) */}
-          <div className="hidden md:block w-1/2 overflow-hidden">
+          <div className="hidden md:block w-1/2 overflow-hidden bg-[#1d1d1d]">
             <AsciiArtAnimation />
           </div>
         </div>