Merge pull request #1100 from trycompai/claudio/color-swap

[dev] [claudfuen] claudio/color-swap

Author: claudfuen

apps/app/src/app/(app)/onboarding/components/PostPaymentOnboarding.tsx

@@ -46,20 +46,20 @@ export function PostPaymentOnboarding({
         // Set to max scale when finalizing
         window.dispatchEvent(
           new CustomEvent('onboarding-step-change', {
-            detail: { stepIndex: 8, totalSteps: 9, progress: 1 },
+            detail: { stepIndex: totalSteps - 1, totalSteps, progress: 1 },
           }),
         );
       } else {
-        const progress = stepIndex / 8; // 8 because we have 9 steps (0-8)
+        const progress = stepIndex / (totalSteps - 1);
         // Dispatch custom event to notify the background wrapper
         window.dispatchEvent(
           new CustomEvent('onboarding-step-change', {
-            detail: { stepIndex, totalSteps: 9, progress },
+            detail: { stepIndex, totalSteps, progress },
           }),
         );
       }
     }
-  }, [stepIndex, isFinalizing]);
+  }, [stepIndex, isFinalizing, totalSteps]);
 
   return (
     <div className="scrollbar-hide flex min-h-[calc(100vh-50px)] flex-col items-center justify-center p-4">

apps/app/src/app/(app)/setup/components/AnimatedGradientBackground.tsx

@@ -159,12 +159,12 @@ void main() {
   float mouseDistance = length(mouseOffset);
   
   // Dynamic color palette that shifts based on deformation and mouse
-  vec3 color1 = mix(vec3(0.1, 0.9, 0.4), vec3(0.9, 0.1, 0.2), u_rage);    // Green to red
-  vec3 color2 = mix(vec3(0.0, 0.7, 0.5), vec3(0.7, 0.0, 0.1), u_rage);    // Teal to dark red
-  vec3 color3 = mix(vec3(0.3, 1.0, 0.3), vec3(1.0, 0.3, 0.0), u_rage);    // Electric green to orange-red
+  vec3 color1 = mix(vec3(0.024, 0.306, 0.231), vec3(0.9, 0.1, 0.2), u_rage);    // emerald-900 to red
+  vec3 color2 = mix(vec3(0.024, 0.18, 0.133), vec3(0.7, 0.0, 0.1), u_rage);    // emerald-950 to dark red
+  vec3 color3 = mix(vec3(0.024, 0.373, 0.275), vec3(1.0, 0.3, 0.0), u_rage);    // emerald-800 to orange-red
   
-  // Keyboard glow effect - more subtle cyan tint
-  vec3 glowColor = mix(vec3(0.3, 0.9, 0.8), vec3(1.0, 0.3, 0.3), u_rage);
+  // Keyboard glow effect - emerald tint
+  vec3 glowColor = mix(vec3(0.016, 0.471, 0.341), vec3(1.0, 0.3, 0.3), u_rage);  // emerald-700
   float glowIntensity = u_glow * 0.25 * (1.0 + u_rage * 0.5);
   
   // Pulse effect - very subtle white tint
@@ -176,8 +176,8 @@ void main() {
   vec3 baseColor = mix(color1, color2, sin(deformIntensity + u_time * 0.5) * 0.5 + 0.5);
   baseColor = mix(baseColor, color3, smoothstep(0.1, 0.3, abs(vNoise)));
   
-  // Boost base color saturation
-  baseColor = baseColor * 1.2;
+  // Subtle boost to maintain deep emerald richness
+  baseColor = baseColor * 1.08;
   
   // Mix in glow color based on keyboard activity - very subtle to preserve vibrancy
   baseColor = mix(baseColor, glowColor, glowIntensity * rimLight * 0.3);
@@ -187,38 +187,38 @@ void main() {
   
   // Extra glow where stretched towards mouse
   float stretchGlow = smoothstep(0.3, 0.7, dot(normalize(vPosition), normalize(vec3(mouseOffset, 0.0))));
-  baseColor += mix(vec3(0.1, 0.4, 0.2), vec3(0.4, 0.1, 0.0), u_rage) * stretchGlow * 0.4;
+  baseColor += mix(vec3(0.024, 0.373, 0.275), vec3(0.4, 0.1, 0.0), u_rage) * stretchGlow * 0.4;  // emerald-800
   
   // Holographic interference patterns enhanced by keyboard glow
   float interference = sin(vPosition.x * 15.0 + u_time) * sin(vPosition.y * 15.0 - u_time * 0.7);
   interference *= 0.1 * rimLight * (1.0 + u_glow * 1.5 + u_rage * 2.0);
-  baseColor += vec3(interference * 0.2, interference * 0.5, interference * 0.3);
+  baseColor += vec3(interference * 0.02, interference * 0.3, interference * 0.2);
   
   // Electric rim effect enhanced by mouse proximity and keyboard glow
   float electricRim = pow(rimLight, 0.5);
-  vec3 electricColor = mix(vec3(0.4, 1.0, 0.6), vec3(1.0, 0.4, 0.2), u_rage);
+  vec3 electricColor = mix(vec3(0.02, 0.588, 0.412), vec3(1.0, 0.4, 0.2), u_rage);  // emerald-600
   float electric = sin(atan(vPosition.y, vPosition.x) * 20.0 + u_time * 3.0) * electricRim;
   electric = smoothstep(0.6, 1.0, electric) * 0.3;
   electric *= 1.0 + (1.0 - mouseDistance) * 0.5 + u_glow * 0.5 + u_rage * 1.0;
   
   // Core energy with color variation
   float centerDistance = length(vPosition) / 2.2;
   float coreGlow = smoothstep(1.0, 0.0, centerDistance) * 0.5;
-  vec3 coreColor = mix(vec3(0.5, 1.0, 0.7), vec3(0.3, 0.8, 1.0), sin(u_time * 1.5) * 0.5 + 0.5);
+  vec3 coreColor = mix(vec3(0.016, 0.471, 0.341), vec3(0.024, 0.306, 0.231), sin(u_time * 1.5) * 0.5 + 0.5);  // emerald-700 to emerald-900
   coreColor = mix(coreColor, vec3(1.0, 0.5, 0.3), u_rage);
   coreColor = mix(coreColor, glowColor, u_glow * 0.3);
   
   // Combine all effects
   vec3 finalColor = baseColor;
   finalColor += electricColor * electric;
   finalColor += coreColor * coreGlow * (1.0 + u_pulse * 0.3);
-  finalColor += electricColor * electricRim * 0.6;
+  finalColor += electricColor * electricRim * 0.25;
   
   // Keyboard effect - flowing energy waves instead of dots
   float flowingEnergy = sin(vPosition.x * 10.0 - u_time * 5.0 + vPosition.y * 5.0) * 
                         cos(vPosition.y * 8.0 + u_time * 4.0 - vPosition.z * 3.0);
   flowingEnergy = smoothstep(0.7, 1.0, abs(flowingEnergy)) * u_glow;
-  vec3 energyColor = mix(vec3(0.2, 1.0, 0.8), vec3(0.5, 0.8, 1.0), sin(u_time * 2.0) * 0.5 + 0.5);
+  vec3 energyColor = mix(vec3(0.02, 0.588, 0.412), vec3(0.016, 0.471, 0.341), sin(u_time * 2.0) * 0.5 + 0.5);  // emerald-600 to emerald-700
   energyColor = mix(energyColor, vec3(1.0, 0.3, 0.2), u_rage);
   finalColor += energyColor * flowingEnergy * rimLight * 0.6;
   
@@ -474,7 +474,7 @@ interface AnimatedGradientBackgroundProps {
 
 export function AnimatedGradientBackground({ scale = 1 }: AnimatedGradientBackgroundProps) {
   return (
-    <div className="fixed inset-0 -z-10 opacity-40">
+    <div className="fixed inset-0 -z-10 opacity-50">
       <Canvas
         camera={{
           position: [0, 0, 7],

apps/app/src/app/(app)/upgrade/[orgId]/components/AnimatedPricingBanner.tsx

@@ -38,7 +38,7 @@ export function AnimatedPricingBanner() {
       <div className="absolute inset-0 bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 backdrop-blur-md" />
 
       {/* Clipped animated background */}
-      <div className="absolute inset-0 overflow-hidden opacity-60">
+      <div className="absolute inset-0 overflow-hidden opacity-70">
         <div className="absolute inset-0 scale-[3] translate-y-1/2">
           <AnimatedGradientBackground scale={2} />
         </div>

apps/app/src/app/(app)/upgrade/[orgId]/pricing-cards.tsx

@@ -96,15 +96,15 @@ const PricingCard = ({
     <Card
       className={`relative transition-all h-full flex flex-col border ${
         isPopular
-          ? 'ring-2 ring-green-500 shadow-lg bg-green-50/30 dark:bg-green-950/20 border-green-500/50 scale-105'
+          ? 'ring-2 ring-emerald-500 shadow-lg bg-emerald-50/30 dark:bg-emerald-950/20 border-emerald-500/50 scale-105'
           : isCurrentPlan
             ? 'opacity-75'
             : 'hover:border-gray-300 dark:hover:border-gray-600 bg-card border-border'
       }`}
     >
       {isPopular && (
         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
-          <Badge className="bg-green-600 text-white dark:bg-green-500 dark:text-white px-3 py-1">
+          <Badge className="bg-emerald-600 text-white dark:bg-emerald-500 dark:text-white px-3 py-1">
             MOST POPULAR
           </Badge>
         </div>
@@ -118,7 +118,7 @@ const PricingCard = ({
                 className={
                   badge === 'Current Plan'
                     ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 text-xs px-1.5 py-0'
-                    : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 text-xs px-1.5 py-0'
+                    : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300 text-xs px-1.5 py-0'
                 }
               >
                 {badge}
@@ -136,12 +136,12 @@ const PricingCard = ({
             or 12 payments of ${monthlyPrice.toLocaleString()}
           </p>
           {subtitle && (
-            <p className="text-sm text-green-600 dark:text-green-400 mt-1">{subtitle}</p>
+            <p className="text-sm text-emerald-600 dark:text-emerald-400 mt-1">{subtitle}</p>
           )}
         </div>
       </CardHeader>
 
-      <div className={`border-t ${isPopular ? 'border-green-500/30' : 'border-border'} mx-6`} />
+      <div className={`border-t ${isPopular ? 'border-emerald-500/30' : 'border-border'} mx-6`} />
 
       <CardContent className="px-6 flex flex-col h-full">
         <ul className="space-y-2 flex-1 py-3">
@@ -161,7 +161,7 @@ const PricingCard = ({
                 }
               >
                 {!isEverythingIn && !isAuditNote && (
-                  <CheckIcon className="h-3.5 w-3.5 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" />
+                  <CheckIcon className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400 mt-0.5 flex-shrink-0" />
                 )}
                 <span
                   className={`text-sm leading-relaxed ${
@@ -180,11 +180,11 @@ const PricingCard = ({
         </ul>
 
         {/* Money Back Guarantee Section */}
-        <div className="mt-4 p-3 bg-green-50 dark:bg-green-950/20 rounded-md border border-green-200 dark:border-green-800">
+        <div className="mt-4 p-3 bg-emerald-50 dark:bg-emerald-950/20 rounded-md border border-emerald-200 dark:border-emerald-800">
           <div className="flex items-center gap-2">
             <div className="flex-shrink-0">
               <svg
-                className="h-5 w-5 text-green-600 dark:text-green-400"
+                className="h-5 w-5 text-emerald-600 dark:text-emerald-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -198,10 +198,10 @@ const PricingCard = ({
               </svg>
             </div>
             <div className="flex-1">
-              <p className="text-sm font-medium text-green-900 dark:text-green-100">
+              <p className="text-sm font-medium text-emerald-900 dark:text-emerald-100">
                 14-Day Money Back Guarantee
               </p>
-              <p className="text-xs text-green-700 dark:text-green-300 mt-0.5">
+              <p className="text-xs text-emerald-700 dark:text-emerald-300 mt-0.5">
                 Try risk-free. Full refund if not satisfied.
               </p>
             </div>
@@ -228,7 +228,7 @@ const PricingCard = ({
               ) : (
                 <>
                   Pay in Full
-                  <span className="ml-1.5 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 rounded-full">
+                  <span className="ml-1.5 px-2 py-0.5 text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 rounded-full">
                     Save 20%
                   </span>
                   <ArrowRight className={`ml-1.5 ${isPopular ? 'h-5 w-5' : 'h-4 w-4'}`} />
@@ -496,7 +496,7 @@ export function PricingCards({
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between mb-2">
                 <CardTitle className="text-lg flex items-center gap-2">
-                  <Quote className="h-4 w-4 text-green-600 dark:text-green-500" />
+                  <Quote className="h-4 w-4 text-emerald-600 dark:text-emerald-500" />
                   Customer Review
                 </CardTitle>
                 <a

apps/app/src/components/ai/chat-empty.tsx

@@ -7,7 +7,7 @@ type Props = {
 export function ChatEmpty({ firstName }: Props) {
   return (
     <div className="todesktop:mt-24 mt-[200px] flex w-full flex-col items-center justify-center text-center md:mt-24">
-      <LogoSpinner raceColor="#00DC73" />
+      <LogoSpinner />
       <span className="mt-6 text-xl font-medium">
         Hi {firstName}, how can I help <br />
         you today?

apps/app/src/components/ai/message.tsx

@@ -71,7 +71,7 @@ export function ReasoningMessagePart({ part, isReasoning }: ReasoningMessagePart
           <div className="ml-4 flex-1 overflow-hidden pl-2 text-xs">
             <div className="font-medium">Reasoning</div>
             <div className="mt-2 animate-spin">
-              <LogoSpinner raceColor="#00DC73" size={16} />
+              <LogoSpinner size={16} />
             </div>
           </div>
         </div>

apps/app/src/components/logo-spinner.tsx

@@ -15,7 +15,7 @@ export interface LogoSpinnerProps extends React.SVGProps<SVGSVGElement> {
 export const LogoSpinner = ({
   size = 40,
   className,
-  raceColor = '#00DC73',
+  raceColor = '#10b981', // emerald-500
   isDisabled = false,
   ...props
 }: LogoSpinnerProps) => {

packages/ui/src/globals.css

@@ -9,7 +9,7 @@
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
-    --primary: 155 100% 43%;
+    --primary: 168 84% 24%; /* emerald-700 */
     --primary-foreground: 0 0% 100%;
     --secondary: 0 0% 96%;
     --secondary-foreground: 240 5.9% 10%;
@@ -23,7 +23,7 @@
     --warning-foreground: 240 5.9% 10%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
+    --ring: 168 84% 24%; /* emerald-700 */
     --radius: 0.5rem;
 
     --chart-positive: 142 76% 45%; /* Green: use for published, or reviewed = the items are in a good state */
@@ -46,8 +46,8 @@
     --card-foreground: 0 0% 98%;
     --popover: 228 10% 10%;
     --popover-foreground: 0 0% 98%;
-    --primary: 155 100% 43%;
-    --primary-foreground: 240 3% 10%;
+    --primary: 160 84% 40%; /* emerald-500 */
+    --primary-foreground: 0 0% 98%;
     --secondary: 225 10% 20%;
     --secondary-foreground: 0 0% 98%;
     --muted: 225 10% 20%;
@@ -60,7 +60,7 @@
     --warning-foreground: 240 5.9% 10%;
     --border: 225 10% 20%;
     --input: 225 10% 20%;
-    --ring: 151 100% 43%;
+    --ring: 158 64% 52%; /* emerald-400 */
 
     --chart-positive: 142 76% 45%; /* Green: use for published, or reviewed = the items are in a good state */
     --chart-neutral: 45 89% 53%; /* Yellow: use for draft(s) and actions that need reviewing soon */