From 43e9293d0c4e2e67f9cccd4987432b80f01c131c Mon Sep 17 00:00:00 2001
From: Mike Fortman <michael.fortman@datastax.com>
Date: Thu, 23 Oct 2025 21:27:18 -0500
Subject: [PATCH] Branding and styling

---
 frontend/components/logo/dog-icon.tsx         | 31 +++++++++----------
 frontend/components/logo/logo.tsx             | 16 ++--------
 frontend/src/app/auth/callback/page.tsx       |  4 +--
 frontend/src/app/layout.tsx                   |  2 +-
 frontend/src/app/login/page.tsx               | 21 +++----------
 .../components/progress-bar.tsx               |  2 +-
 .../onboarding/components/onboarding-card.tsx |  1 -
 7 files changed, 25 insertions(+), 52 deletions(-)

diff --git a/frontend/components/logo/dog-icon.tsx b/frontend/components/logo/dog-icon.tsx
index ce0b4104..03158f17 100644
--- a/frontend/components/logo/dog-icon.tsx
+++ b/frontend/components/logo/dog-icon.tsx
@@ -3,25 +3,22 @@ interface DogIconProps extends React.SVGProps<SVGSVGElement> {
 }
 
 const DogIcon = ({ disabled = false, stroke, ...props }: DogIconProps) => {
-  const strokeColor = disabled ? "#71717A" : (stroke || "#0F62FE");
+  const fillColor = disabled ? "#71717A" : (stroke || "#22A7AF");
 
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M19.9049 23H17.907C17.907 23 15.4096 20.5 16.908 16C17.3753 14.2544 17.3813 12.4181 17.2439 11C17.161 10.1434 17.0256 9.43934 16.908 9C16.7416 8.33333 16.8081 7 18.4065 7C19.5457 7 20.9571 6.92944 21.4034 6.5C22.3268 5.61145 21.9029 4 21.9029 4C21.9029 4 20.9039 3 18.906 3C18.7395 2.33333 17.7072 1 14.9101 1C12.113 1 11.5835 2.16589 10.9143 4C10.4155 5.36686 10.423 6.99637 11.1692 7.71747M14.4106 4C14.2441 5.33333 14.4106 8 11.9132 8C11.5968 8 11.3534 7.89548 11.1692 7.71747M14.9101 23H12.4127M7.91738 23H12.4127M10.4148 15.5C11.5715 16.1667 13.5905 18.6 12.4127 23M3.42204 15C1.02177 18.5 1.64205 23 5.41997 23C5.41997 22 5.71966 19.2 6.91841 16C8.41686 12 11.1692 11.4349 11.1692 7.71747M16.908 4V4.5"
-        stroke={strokeColor}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
+    disabled ? (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 18" fill={fillColor}>
+        <path d="M8 18H2V16H8V18Z"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M20 2H22V6H24V10H20V14H24V16H14V14H2V16H0V8H2V6H8V10H10V12H16V6H14V10H12V8H10V2H12V0H20V2ZM18 6H20V4H18V6Z"/>
+      </svg>
+    ) : (
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" fill={fillColor}>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.0769 10.9091H16.6154V5.45455H14.7692V9.09091H12.9231V7.27273H11.0769V1.81818H12.9231V0H20.3077V1.81818H22.1538V5.45455H24V9.09091H20.3077V14.5455H18.4615V20H14.7692V16.3636H12.9231V14.5455H7.38462V16.3636H5.53846V20H1.84615V10.9091H3.69231V9.09091H11.0769V10.9091ZM18.4615 5.45455H20.3077V3.63636H18.4615V5.45455Z"/>
+        <path d="M1.84615 10.9091H0V7.27273H1.84615V10.9091Z"/>
+        <path d="M3.69231 7.27273H1.84615V5.45455H3.69231V7.27273Z"/>
+        <path d="M5.53846 5.45455H3.69231V3.63636H5.53846V5.45455Z"/>
+      </svg>
+    )
   )
 }
 
diff --git a/frontend/components/logo/logo.tsx b/frontend/components/logo/logo.tsx
index 018665de..97b33198 100644
--- a/frontend/components/logo/logo.tsx
+++ b/frontend/components/logo/logo.tsx
@@ -1,19 +1,9 @@
 export default function Logo(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="22"
-      viewBox="0 0 24 22"
-      fill="currentColor"
-      className="h-6 w-6 text-primary"
-      aria-label="OpenRAG Logo"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="40" viewBox="0 0 50 40" fill="white" {...props}>
       <title>OpenRAG Logo</title>
-      <path d="M13.0486 0.462158H9.75399C9.44371 0.462158 9.14614 0.586082 8.92674 0.806667L4.03751 5.72232C3.81811 5.9429 3.52054 6.06682 3.21026 6.06682H1.16992C0.511975 6.06682 -0.0165756 6.61212 0.000397655 7.2734L0.0515933 9.26798C0.0679586 9.90556 0.586745 10.4139 1.22111 10.4139H3.59097C3.90124 10.4139 4.19881 10.2899 4.41821 10.0694L9.34823 5.11269C9.56763 4.89211 9.8652 4.76818 10.1755 4.76818H13.0486C13.6947 4.76818 14.2185 4.24157 14.2185 3.59195V1.63839C14.2185 0.988773 13.6947 0.462158 13.0486 0.462158Z"></path>
-      <path d="M19.5355 11.5862H22.8301C23.4762 11.5862 24 12.1128 24 12.7624V14.716C24 15.3656 23.4762 15.8922 22.8301 15.8922H19.957C19.6467 15.8922 19.3491 16.0161 19.1297 16.2367L14.1997 21.1934C13.9803 21.414 13.6827 21.5379 13.3725 21.5379H11.0026C10.3682 21.5379 9.84945 21.0296 9.83309 20.392L9.78189 18.3974C9.76492 17.7361 10.2935 17.1908 10.9514 17.1908H12.9918C13.302 17.1908 13.5996 17.0669 13.819 16.8463L18.7082 11.9307C18.9276 11.7101 19.2252 11.5862 19.5355 11.5862Z"></path>
-      <path d="M19.5355 2.9796L22.8301 2.9796C23.4762 2.9796 24 3.50622 24 4.15583V6.1094C24 6.75901 23.4762 7.28563 22.8301 7.28563H19.957C19.6467 7.28563 19.3491 7.40955 19.1297 7.63014L14.1997 12.5868C13.9803 12.8074 13.6827 12.9313 13.3725 12.9313H10.493C10.1913 12.9313 9.90126 13.0485 9.68346 13.2583L4.14867 18.5917C3.93087 18.8016 3.64085 18.9187 3.33917 18.9187H1.32174C0.675616 18.9187 0.151832 18.3921 0.151832 17.7425V15.7343C0.151832 15.0846 0.675616 14.558 1.32174 14.558H3.32468C3.63496 14.558 3.93253 14.4341 4.15193 14.2135L9.40827 8.92878C9.62767 8.70819 9.92524 8.58427 10.2355 8.58427H12.9918C13.302 8.58427 13.5996 8.46034 13.819 8.23976L18.7082 3.32411C18.9276 3.10353 19.2252 2.9796 19.5355 2.9796Z"></path>
+      <path d="M27.9909 33.9523H22.1153V31.4062H27.9909V33.9523Z"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M34.9164 0V2.22796H39.7422V4.66797H42.1551V7.2154H44.7791V9.65541H47.192V14.1113H49.5V20.2651H47.192V22.8111H44.7791V25.2525H42.889V29.7084H40.3713V27.4805H39.6374V8.8058H37.1196L37.1183 34.2704H38.5875V40H11.4139V34.2704H12.8818V8.8058H10.364V27.4805H9.63008V29.7084H7.11234V25.2525H5.22369V22.8111H2.80942V20.2651H0.5V14.1113H2.80942V9.65541H5.22369V7.2154H7.84628V4.66797H10.2592V2.22796H15.0863V0H34.9164ZM21.38 19.947V23.8728H23.7942V27.8181L22.7706 29.1643H19.5962V27.2684H17.4978V23.5547H15.3995V27.4805H17.4978V29.3903H19.4913V34.0444H20.5412V35.12H22.1153V36.2863H27.9909V35.12H29.565V34.0444H30.6135V29.3903H32.6056V27.2684H30.5073V29.1643H27.4074L26.312 27.7232V23.8728H28.7249V19.947H21.38ZM32.607 23.5547V27.4805H34.7054V23.5547H32.607ZM17.4978 12.0954V15.067H20.4363V12.0954H17.4978ZM29.6699 12.0954V15.067H32.607V12.0954H29.6699Z"/>
     </svg>
   );
 }
diff --git a/frontend/src/app/auth/callback/page.tsx b/frontend/src/app/auth/callback/page.tsx
index 780b45b6..8c1683cf 100644
--- a/frontend/src/app/auth/callback/page.tsx
+++ b/frontend/src/app/auth/callback/page.tsx
@@ -158,8 +158,8 @@ function AuthCallbackContent() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
-      <Card className="w-full max-w-md">
+    <div className="min-h-screen flex items-center justify-center bg-card rounded-lg m-4">
+      <Card className="w-full max-w-md bg-card rounded-lg m-4">
         <CardHeader className="text-center">
           <CardTitle className="flex items-center justify-center gap-2">
             {status === "processing" && (
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 10ed826b..16db9579 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden`}
+        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden bg-black`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index c9f55e22..f866ea4d 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -6,9 +6,7 @@ import { Suspense, useEffect } from "react";
 import GoogleLogo from "@/components/logo/google-logo";
 import Logo from "@/components/logo/logo";
 import { Button } from "@/components/ui/button";
-import { DotPattern } from "@/components/ui/dot-pattern";
 import { useAuth } from "@/contexts/auth-context";
-import { cn } from "@/lib/utils";
 
 function LoginPageContent() {
   const { isLoading, isAuthenticated, isNoAuthMode, login } = useAuth();
@@ -46,21 +44,10 @@ function LoginPageContent() {
   }
 
   return (
-    <div className="min-h-dvh relative flex gap-4 flex-col items-center justify-center bg-background p-4">
-      <DotPattern
-        width={24}
-        height={24}
-        cx={1}
-        cy={1}
-        cr={1}
-        className={cn(
-          "[mask-image:linear-gradient(to_bottom,white,transparent,transparent)]",
-          "text-input/70",
-        )}
-      />
-      <div className="flex flex-col items-center justify-center gap-4 z-10">
-        <Logo className="fill-primary" width={32} height={28} />
-        <div className="flex flex-col items-center justify-center gap-8">
+    <div className="min-h-dvh relative flex gap-4 flex-col items-center justify-center bg-card rounded-lg m-4">
+      <div className="flex flex-col items-center justify-center gap-4 z-10 ">
+        <Logo className="fill-primary" width={50} height={40} />
+        <div className="flex flex-col items-center justify-center gap-16">
         <h1 className="text-2xl font-medium font-chivo">Welcome to OpenRAG</h1>
         <Button onClick={login} className="w-80 gap-1.5" size="lg">
           <GoogleLogo className="h-4 w-4" />
diff --git a/frontend/src/app/new-onboarding/components/progress-bar.tsx b/frontend/src/app/new-onboarding/components/progress-bar.tsx
index adb0ffea..e54224c5 100644
--- a/frontend/src/app/new-onboarding/components/progress-bar.tsx
+++ b/frontend/src/app/new-onboarding/components/progress-bar.tsx
@@ -14,7 +14,7 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
             className="h-full transition-all duration-300 ease-in-out"
             style={{
               width: `${progressPercentage}%`,
-              background: 'linear-gradient(to right, #818CF8, #F472B6)'
+              background: 'linear-gradient(to right, #818CF8, #22A7AF)'
             }}
           />
         </div>
diff --git a/frontend/src/app/onboarding/components/onboarding-card.tsx b/frontend/src/app/onboarding/components/onboarding-card.tsx
index 745dd076..8dc60c91 100644
--- a/frontend/src/app/onboarding/components/onboarding-card.tsx
+++ b/frontend/src/app/onboarding/components/onboarding-card.tsx
@@ -46,7 +46,6 @@ const STEP_LIST = [
 const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
 
 const OnboardingCard = ({ onComplete }: OnboardingCardProps) => {
-	const updatedOnboarding = process.env.UPDATED_ONBOARDING === "true";
 	const { isHealthy: isDoclingHealthy } = useDoclingHealth();
 
 	const [modelProvider, setModelProvider] = useState<string>("openai");