From d1baf7212bf1616b627c5906c931c3b29ce3f90d Mon Sep 17 00:00:00 2001
From: Xinmin Zeng <135568692+fancyboi999@users.noreply.github.com>
Date: Wed, 8 Apr 2026 09:07:39 +0800
Subject: [PATCH] fix(frontend): UI polish - fix CSS typo, dark mode border,
 and hardcoded colors (#1942)

- Fix `font-norma` typo to `font-normal` in message-list subtask count
- Fix dark mode `--border` using reddish hue (22.216) instead of neutral
- Replace hardcoded `rgb(184,184,192)` in hero with `text-muted-foreground`
- Replace hardcoded `bg-[#a3a1a1]` in streaming indicator with `bg-muted-foreground`
- Add missing `font-sans` to welcome description `<pre>` for consistency
- Make case-study-section padding responsive (`px-4 md:px-20`)

Closes #1940
---
 frontend/src/components/landing/hero.tsx                    | 5 +----
 .../src/components/landing/sections/case-study-section.tsx  | 2 +-
 frontend/src/components/workspace/messages/message-list.tsx | 2 +-
 frontend/src/components/workspace/streaming-indicator.tsx   | 6 +++---
 frontend/src/components/workspace/welcome.tsx               | 4 +++-
 frontend/src/styles/globals.css                             | 2 +-
 6 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/landing/hero.tsx b/frontend/src/components/landing/hero.tsx
index 0e4a4f53f..503c5b88c 100644
--- a/frontend/src/components/landing/hero.tsx
+++ b/frontend/src/components/landing/hero.tsx
@@ -69,10 +69,7 @@ export function Hero({ className }: { className?: string }) {
             </div>
           </a>
         )}
-        <p
-          className="mt-8 scale-105 text-center text-2xl text-shadow-sm"
-          style={{ color: "rgb(184,184,192)" }}
-        >
+        <p className="text-muted-foreground mt-8 scale-105 text-center text-2xl text-shadow-sm">
           An open-source SuperAgent harness that researches, codes, and creates.
           With
           <br />
diff --git a/frontend/src/components/landing/sections/case-study-section.tsx b/frontend/src/components/landing/sections/case-study-section.tsx
index 6a7cc4956..aeb9163e8 100644
--- a/frontend/src/components/landing/sections/case-study-section.tsx
+++ b/frontend/src/components/landing/sections/case-study-section.tsx
@@ -51,7 +51,7 @@ export function CaseStudySection({ className }: { className?: string }) {
       title="Case Studies"
       subtitle="See how DeerFlow is used in the wild"
     >
-      <div className="container-md mt-8 grid grid-cols-1 gap-4 px-20 md:grid-cols-2 lg:grid-cols-3">
+      <div className="container-md mt-8 grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-20 lg:grid-cols-3">
         {caseStudies.map((caseStudy) => (
           <Link
             key={caseStudy.title}
diff --git a/frontend/src/components/workspace/messages/message-list.tsx b/frontend/src/components/workspace/messages/message-list.tsx
index 354a27f04..6a7dd2c59 100644
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/frontend/src/components/workspace/messages/message-list.tsx
@@ -166,7 +166,7 @@ export function MessageList({
               results.push(
                 <div
                   key="subtask-count"
-                  className="text-muted-foreground font-norma pt-2 text-sm"
+                  className="text-muted-foreground pt-2 text-sm font-normal"
                 >
                   {t.subtasks.executing(tasks.size)}
                 </div>,
diff --git a/frontend/src/components/workspace/streaming-indicator.tsx b/frontend/src/components/workspace/streaming-indicator.tsx
index 2edf25337..a2b25fae4 100644
--- a/frontend/src/components/workspace/streaming-indicator.tsx
+++ b/frontend/src/components/workspace/streaming-indicator.tsx
@@ -14,19 +14,19 @@ export function StreamingIndicator({
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.2s]",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100 [animation-delay:0.2s]",
         )}
       />
       <div
         className={cn(
           dotSize,
-          "animate-bouncing rounded-full bg-[#a3a1a1] opacity-100 [animation-delay:0.4s]",
+          "animate-bouncing bg-muted-foreground rounded-full opacity-100 [animation-delay:0.4s]",
         )}
       />
     </div>
diff --git a/frontend/src/components/workspace/welcome.tsx b/frontend/src/components/workspace/welcome.tsx
index 4fa9ec740..f737ae00c 100644
--- a/frontend/src/components/workspace/welcome.tsx
+++ b/frontend/src/components/workspace/welcome.tsx
@@ -61,7 +61,9 @@ export function Welcome({
       ) : (
         <div className="text-muted-foreground text-sm">
           {t.welcome.description.includes("\n") ? (
-            <pre className="whitespace-pre">{t.welcome.description}</pre>
+            <pre className="font-sans whitespace-pre">
+              {t.welcome.description}
+            </pre>
           ) : (
             <p>{t.welcome.description}</p>
           )}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index b394ca889..c85a5c27c 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -273,7 +273,7 @@
   --accent: oklch(0.32 0.0036 106.64);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0.191 22.216 / 10%);
+  --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: transparent;
   --chart-1: oklch(0.488 0.243 264.376);