From 5aad7c50ddab0a67bb364d71bd7d234dfc3f918a Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Thu, 13 Nov 2025 16:21:25 -0600
Subject: [PATCH] Design sweep - improved light mode onboarding (#401)

* tweaking colors

* minimal diff for layout wrapper

* scrolling fix
---
 .../src/app/chat/components/chat-input.tsx    |  2 +-
 frontend/src/app/layout.tsx                   |  2 +-
 .../onboarding/components/onboarding-card.tsx |  8 ++---
 .../onboarding/components/progress-bar.tsx    |  2 +-
 .../components/watsonx-settings-dialog.tsx    |  2 +-
 frontend/src/app/settings/page.tsx            | 34 +++++++++----------
 frontend/src/components/chat-renderer.tsx     |  7 ++--
 frontend/src/components/layout-wrapper.tsx    |  4 +--
 frontend/tailwind.config.ts                   |  3 ++
 9 files changed, 32 insertions(+), 32 deletions(-)
diff --git a/frontend/src/app/chat/components/chat-input.tsx b/frontend/src/app/chat/components/chat-input.tsx
index 4a87b4f3..bf01c7af 100644
--- a/frontend/src/app/chat/components/chat-input.tsx
+++ b/frontend/src/app/chat/components/chat-input.tsx
@@ -94,7 +94,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
 			<div className="w-full">
 				<form onSubmit={onSubmit} className="relative">
 					{/* Outer container - flex-col to stack file preview above input */}
-					<div className="flex flex-col w-full gap-2 rounded-xl border border-input focus-within:ring-1 focus-within:ring-ring p-2">
+					<div className="flex flex-col w-full gap-2 rounded-xl border border-input hover:[&:not(:focus-within)]:border-muted-foreground focus-within:border-foreground p-2 transition-colors">
 						{/* File Preview Section - Always above */}
 						{uploadedFile && (
 							<FilePreview
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 16db9579..e9e33c0d 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 bg-black`}
+        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased overflow-hidden bg-white dark:bg-black`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/frontend/src/app/onboarding/components/onboarding-card.tsx b/frontend/src/app/onboarding/components/onboarding-card.tsx
index a712b57f..bcf4c839 100644
--- a/frontend/src/app/onboarding/components/onboarding-card.tsx
+++ b/frontend/src/app/onboarding/components/onboarding-card.tsx
@@ -308,7 +308,7 @@ const OnboardingCard = ({
 											>
 												<div
 													className={cn(
-														"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+														"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
 														modelProvider === "anthropic"
 															? "bg-[#D97757]"
 															: "bg-muted",
@@ -341,7 +341,7 @@ const OnboardingCard = ({
 										>
 											<div
 												className={cn(
-													"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
 													modelProvider === "openai" ? "bg-white" : "bg-muted",
 												)}
 											>
@@ -371,7 +371,7 @@ const OnboardingCard = ({
 										>
 											<div
 												className={cn(
-													"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
 													modelProvider === "watsonx"
 														? "bg-[#1063FE]"
 														: "bg-muted",
@@ -403,7 +403,7 @@ const OnboardingCard = ({
 										>
 											<div
 												className={cn(
-													"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
+													"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
 													modelProvider === "ollama" ? "bg-white" : "bg-muted",
 												)}
 											>
diff --git a/frontend/src/app/onboarding/components/progress-bar.tsx b/frontend/src/app/onboarding/components/progress-bar.tsx
index 67fac32c..bcf4f6cf 100644
--- a/frontend/src/app/onboarding/components/progress-bar.tsx
+++ b/frontend/src/app/onboarding/components/progress-bar.tsx
@@ -14,7 +14,7 @@ export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProp
     <div className="w-full flex items-center px-6 gap-4">
       <div className="flex-1" />
       <div className="flex items-center gap-3">
-        <div className="w-48 h-1 bg-background rounded-full overflow-hidden">
+        <div className="w-48 h-1 bg-background dark:bg-muted rounded-full overflow-hidden">
           <div
             className="h-full transition-all duration-300 ease-in-out"
             style={{
diff --git a/frontend/src/app/settings/components/watsonx-settings-dialog.tsx b/frontend/src/app/settings/components/watsonx-settings-dialog.tsx
index 332377f1..a64c1849 100644
--- a/frontend/src/app/settings/components/watsonx-settings-dialog.tsx
+++ b/frontend/src/app/settings/components/watsonx-settings-dialog.tsx
@@ -137,7 +137,7 @@ const WatsonxSettingsDialog = ({
                 </motion.div>
               )}
             </AnimatePresence>
-            <DialogFooter>
+            <DialogFooter className="mt-4">
               <Button
                 variant="outline"
                 type="button"
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index 560d95f0..d0a9830f 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -1009,22 +1009,20 @@ function KnowledgeSourcesPage() {
                   rows={6}
                   className={`resize-none ${
                     systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-                      ? "border-red-500 focus:border-red-500"
+                      ? "!border-destructive focus:border-destructive"
                       : ""
                   }`}
                 />
-                <div className="flex justify-start">
-                  <span
-                    className={`text-xs ${
-                      systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
-                        ? "text-red-500"
-                        : "text-muted-foreground"
-                    }`}
-                  >
-                    {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
-                  </span>
-                </div>
               </LabelWrapper>
+              <span
+                className={`text-xs ${
+                  systemPrompt.length > MAX_SYSTEM_PROMPT_CHARS
+                    ? "text-destructive"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {systemPrompt.length}/{MAX_SYSTEM_PROMPT_CHARS} characters
+              </span>
             </div>
             <div className="flex justify-end pt-2">
               <Button
@@ -1147,7 +1145,7 @@ function KnowledgeSourcesPage() {
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <LabelWrapper id="chunk-size" label="Chunk size">
-                  <div className="relative">
+                  <div className="relative [&:has(input:hover):not(:has(input:focus))_button]:border-muted-foreground [&:has(input:focus)_button]:border-foreground">
                     <Input
                       id="chunk-size"
                       type="number"
@@ -1163,7 +1161,7 @@ function KnowledgeSourcesPage() {
                       <div className="flex flex-col">
                         <Button
                           aria-label="Increase value"
-                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative transition-colors"
                           variant="outline"
                           size="iconSm"
                           onClick={() =>
@@ -1174,7 +1172,7 @@ function KnowledgeSourcesPage() {
                         </Button>
                         <Button
                           aria-label="Decrease value"
-                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative transition-colors"
                           variant="outline"
                           size="iconSm"
                           onClick={() =>
@@ -1190,7 +1188,7 @@ function KnowledgeSourcesPage() {
               </div>
               <div className="space-y-2">
                 <LabelWrapper id="chunk-overlap" label="Chunk overlap">
-                  <div className="relative">
+                  <div className="relative [&:has(input:hover):not(:has(input:focus))_button]:border-muted-foreground [&:has(input:focus)_button]:border-foreground">
                     <Input
                       id="chunk-overlap"
                       type="number"
@@ -1206,7 +1204,7 @@ function KnowledgeSourcesPage() {
                       <div className="flex flex-col">
                         <Button
                           aria-label="Increase value"
-                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative"
+                          className="h-5 rounded-l-none rounded-br-none border-input border-b-[0.5px] focus-visible:relative transition-colors"
                           variant="outline"
                           size="iconSm"
                           onClick={() =>
@@ -1219,7 +1217,7 @@ function KnowledgeSourcesPage() {
                         </Button>
                         <Button
                           aria-label="Decrease value"
-                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative"
+                          className="h-5 rounded-l-none rounded-tr-none border-input border-t-[0.5px] focus-visible:relative transition-colors"
                           variant="outline"
                           size="iconSm"
                           onClick={() =>
diff --git a/frontend/src/components/chat-renderer.tsx b/frontend/src/components/chat-renderer.tsx
index c07471f5..8264c805 100644
--- a/frontend/src/components/chat-renderer.tsx
+++ b/frontend/src/components/chat-renderer.tsx
@@ -143,7 +143,7 @@ export function ChatRenderer({
 					animate={{
 						width: showLayout ? "100%" : "850px",
 						borderRadius: showLayout ? "0" : "16px",
-						border: showLayout ? "0" : "1px solid #27272A",
+						border: showLayout ? "0" : "1px solid hsl(var(--border))",
 						height: showLayout ? "100%" : "800px",
 						x: x,
 						y: y,
@@ -156,7 +156,7 @@ export function ChatRenderer({
 					}}
 					className={cn(
 						"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-y-auto",
-						!showLayout && "absolute max-h-[calc(100vh-190px)]",
+						!showLayout && "absolute max-h-[calc(100vh-190px)] shadow-[0px_2px_4px_-2px_#0000001A,0px_4px_6px_-1px_#0000001A]",
 						showLayout && !isOnChatPage && "bg-background",
 					)}
 				>
@@ -165,8 +165,7 @@ export function ChatRenderer({
 							"h-full bg-background w-full",
 							showLayout && !isOnChatPage && "p-6 container",
 							showLayout && isSmallWidthPath && "max-w-[850px] ml-0",
-							!showLayout &&
-								"w-full bg-card rounded-lg shadow-2xl p-0 py-2",
+							!showLayout && "p-0 py-2",
 						)}
 					>
 						<motion.div
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index 6a0456f1..2fe1f27a 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -66,10 +66,10 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // For all other pages, render with Langflow-styled navigation and task menu
   return (
-    <div className="h-screen w-screen flex items-center justify-center">
+    <div className="h-screen w-screen flex items-center justify-center bg-muted dark:bg-black">
       <div
         className={cn(
-          "app-grid-arrangement bg-black relative",
+          "app-grid-arrangement relative",
           isPanelOpen && isOnKnowledgePage && !isMenuOpen && "filters-open",
           isMenuOpen && "notifications-open"
         )}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 6567616b..7016d2e6 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -224,6 +224,9 @@ const config = {
           fontSize: "0.875rem",
           textAlign: "left",
           textOverflow: "ellipsis",
+          transitionProperty: "color, background-color, border-color, text-decoration-color, fill, stroke",
+          transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+          transitionDuration: "150ms",
           "&::placeholder": {
             color: "hsl(var(--muted-foreground))",
           },
