From a0d001c459b5a70bbdb12b4709fc173b47e81ed7 Mon Sep 17 00:00:00 2001
From: waterWang <water@users.noreply.github.com>
Date: Tue, 28 Jul 2026 18:50:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20improve=20color=20contrast=20to=20meet?=
 =?UTF-8?q?=20WCAG=20AA=20standards=20(text-slate-500=E2=86=92text-slate-6?=
 =?UTF-8?q?00=20on=20bg-slate-50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/bounties/[id]/BountyDetailClient.tsx  |  6 ++--
 apps/frontend/app/bounties/new/page.tsx       |  2 +-
 .../app/components/BountyListClient.tsx       |  2 +-
 .../app/components/SavedBountiesList.tsx      |  6 ++--
 apps/frontend/app/dashboard/page.tsx          |  6 ++--
 apps/frontend/app/error.tsx                   |  2 +-
 apps/frontend/app/not-found.tsx               |  2 +-
 apps/frontend/app/page.tsx                    |  2 +-
 apps/frontend/components/StatusBadge.spec.tsx | 36 +++++++++++++++++++
 9 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 apps/frontend/components/StatusBadge.spec.tsx

diff --git a/apps/frontend/app/bounties/[id]/BountyDetailClient.tsx b/apps/frontend/app/bounties/[id]/BountyDetailClient.tsx
index 23642028..d1ddd8da 100644
--- a/apps/frontend/app/bounties/[id]/BountyDetailClient.tsx
+++ b/apps/frontend/app/bounties/[id]/BountyDetailClient.tsx
@@ -98,17 +98,17 @@ export default function BountyDetailClient({ bounty }: { bounty: Bounty }) {
 
           <dl className="mt-8 grid gap-4 sm:grid-cols-3">
             <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
-              <dt className="text-xs uppercase tracking-wide text-slate-500">Owner</dt>
+              <dt className="text-xs uppercase tracking-wide text-slate-600">Owner</dt>
               <dd className="mt-2 break-all font-mono text-sm text-slate-700 dark:text-slate-200">
                 {truncateAddress(bounty.ownerAddress)}
               </dd>
             </div>
             <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
-              <dt className="text-xs uppercase tracking-wide text-slate-500">Reward</dt>
+              <dt className="text-xs uppercase tracking-wide text-slate-600">Reward</dt>
               <dd className="mt-2 break-words text-sm font-semibold text-slate-700 dark:text-slate-200">{bounty.reward}</dd>
             </div>
             <div className="rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
-              <dt className="text-xs uppercase tracking-wide text-slate-500">Status</dt>
+              <dt className="text-xs uppercase tracking-wide text-slate-600">Status</dt>
               <dd className="mt-2 text-sm font-semibold capitalize text-slate-700 dark:text-slate-200">
                 {bounty.status}
               </dd>
diff --git a/apps/frontend/app/bounties/new/page.tsx b/apps/frontend/app/bounties/new/page.tsx
index 1f38a003..56821298 100644
--- a/apps/frontend/app/bounties/new/page.tsx
+++ b/apps/frontend/app/bounties/new/page.tsx
@@ -231,7 +231,7 @@ export default function CreateBountyPage() {
                 {description ? (
                   <MarkdownRenderer content={description} />
                 ) : (
-                  <p className="text-sm italic text-slate-500 dark:text-slate-500">Nothing to preview yet...</p>
+                  <p className="text-sm italic text-slate-600 dark:text-slate-400">Nothing to preview yet...</p>
                 )}
               </div>
             )}
diff --git a/apps/frontend/app/components/BountyListClient.tsx b/apps/frontend/app/components/BountyListClient.tsx
index cbd1c61e..91bb9469 100644
--- a/apps/frontend/app/components/BountyListClient.tsx
+++ b/apps/frontend/app/components/BountyListClient.tsx
@@ -105,7 +105,7 @@ export default function BountyListClient({
       )}
 
       {cursor === null && bounties.length > 0 && (
-        <p className="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">
+        <p className="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
           You&apos;ve reached the end — {bounties.length} of {initialTotal} bounties loaded.
         </p>
       )}
diff --git a/apps/frontend/app/components/SavedBountiesList.tsx b/apps/frontend/app/components/SavedBountiesList.tsx
index c5496f96..83acae9b 100644
--- a/apps/frontend/app/components/SavedBountiesList.tsx
+++ b/apps/frontend/app/components/SavedBountiesList.tsx
@@ -71,15 +71,15 @@ export default function SavedBountiesList() {
   );
 
   if (loading) {
-    return <p className="text-center text-slate-500">Loading saved bounties...</p>;
+    return <p className="text-center text-slate-600">Loading saved bounties...</p>;
   }
 
   if (!publicKey) {
-    return <p className="text-center text-slate-500">Connect your wallet to see saved bounties.</p>;
+    return <p className="text-center text-slate-600">Connect your wallet to see saved bounties.</p>;
   }
 
   if (saved.length === 0) {
-    return <p className="text-center text-slate-500">No saved bounties yet.</p>;
+    return <p className="text-center text-slate-600">No saved bounties yet.</p>;
   }
 
   return (
diff --git a/apps/frontend/app/dashboard/page.tsx b/apps/frontend/app/dashboard/page.tsx
index 872fcede..e224bff4 100644
--- a/apps/frontend/app/dashboard/page.tsx
+++ b/apps/frontend/app/dashboard/page.tsx
@@ -26,7 +26,7 @@ type Bounty = {
 
 function EmptyState({ message }: { message: string }) {
   return (
-    <div className="py-12 text-center text-sm text-slate-500 dark:text-slate-500">{message}</div>
+    <div className="py-12 text-center text-sm text-slate-600 dark:text-slate-400">{message}</div>
   );
 }
 
@@ -105,7 +105,7 @@ export default function DashboardPage() {
         ) : (
           <div className="overflow-x-auto">
             <table className="w-full text-left text-sm">
-              <thead className="border-b border-slate-300 text-xs uppercase text-slate-500 dark:border-slate-700 dark:text-slate-400">
+              <thead className="border-b border-slate-300 text-xs uppercase text-slate-600 dark:border-slate-700 dark:text-slate-400">
                 <tr>
                   <th className="py-3 pr-4">Bounty</th>
                   <th className="py-3 pr-4">Submitted</th>
@@ -133,7 +133,7 @@ export default function DashboardPage() {
       ) : (
         <div className="overflow-x-auto">
           <table className="w-full text-left text-sm">
-            <thead className="border-b border-slate-300 text-xs uppercase text-slate-500 dark:border-slate-700 dark:text-slate-400">
+            <thead className="border-b border-slate-300 text-xs uppercase text-slate-600 dark:border-slate-700 dark:text-slate-400">
               <tr>
                 <th className="py-3 pr-4">Title</th>
                 <th className="py-3 pr-4">Reward</th>
diff --git a/apps/frontend/app/error.tsx b/apps/frontend/app/error.tsx
index 6b5864b9..5e28ba6d 100644
--- a/apps/frontend/app/error.tsx
+++ b/apps/frontend/app/error.tsx
@@ -17,7 +17,7 @@ export default function ErrorPage({ error, reset }: ErrorPageProps) {
     <main className="flex min-h-[calc(100vh-73px)] flex-col items-center justify-center bg-slate-50 px-4 text-center text-slate-950 dark:bg-slate-950 dark:text-slate-100">
       <h1 className="text-7xl font-black tracking-tight text-red-500/50">500</h1>
       <p className="mt-4 text-lg text-slate-700 dark:text-slate-300">Something went wrong</p>
-      <p className="mt-2 max-w-md text-sm text-slate-500">
+      <p className="mt-2 max-w-md text-sm text-slate-600">
         {error.message || "An unexpected error occurred. Please try again."}
       </p>
       {error.digest && (
diff --git a/apps/frontend/app/not-found.tsx b/apps/frontend/app/not-found.tsx
index 8262690e..f0a667e4 100644
--- a/apps/frontend/app/not-found.tsx
+++ b/apps/frontend/app/not-found.tsx
@@ -5,7 +5,7 @@ export default function NotFound() {
     <main className="flex min-h-[calc(100vh-73px)] flex-col items-center justify-center bg-slate-50 px-4 text-center text-slate-950 dark:bg-slate-950 dark:text-slate-100">
       <h1 className="text-7xl font-black tracking-tight text-slate-400 dark:text-slate-600">404</h1>
       <p className="mt-4 text-lg text-slate-700 dark:text-slate-300">Page not found</p>
-      <p className="mt-2 text-sm text-slate-500">
+      <p className="mt-2 text-sm text-slate-600">
         The page you are looking for doesn&apos;t exist or has been moved.
       </p>
       <Link
diff --git a/apps/frontend/app/page.tsx b/apps/frontend/app/page.tsx
index ae58bfe4..2814b615 100644
--- a/apps/frontend/app/page.tsx
+++ b/apps/frontend/app/page.tsx
@@ -286,7 +286,7 @@ export default async function Home({ searchParams }: { searchParams?: SearchPara
               Showing <span className="font-semibold text-slate-900 dark:text-slate-200">{bounties.length}</span> of{" "}
               <span className="font-semibold text-slate-900 dark:text-slate-200">{total}</span> bounties
             </p>
-            <p className="text-slate-500 dark:text-slate-500">Scroll down to load more bounties automatically.</p>
+            <p className="text-slate-600 dark:text-slate-400">Scroll down to load more bounties automatically.</p>
           </div>
         </section>
 
diff --git a/apps/frontend/components/StatusBadge.spec.tsx b/apps/frontend/components/StatusBadge.spec.tsx
new file mode 100644
index 00000000..0d0c057e
--- /dev/null
+++ b/apps/frontend/components/StatusBadge.spec.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { StatusBadge } from "./StatusBadge";
+
+describe("StatusBadge", () => {
+  it("renders pending status", () => {
+    render(<StatusBadge status="pending" />);
+    expect(screen.getByText("pending")).toBeInTheDocument();
+  });
+
+  it("renders approved status", () => {
+    render(<StatusBadge status="approved" />);
+    expect(screen.getByText("approved")).toBeInTheDocument();
+  });
+
+  it("renders open status", () => {
+    render(<StatusBadge status="open" />);
+    expect(screen.getByText("open")).toBeInTheDocument();
+  });
+
+  it("renders cancelled status with theme-aware classes", () => {
+    const { container } = render(<StatusBadge status="cancelled" />);
+    const badge = container.firstChild;
+    expect(badge).toHaveClass("bg-slate-100");
+    expect(badge).toHaveClass("text-slate-700");
+  });
+
+  it("renders in_progress status with underscores replaced by spaces", () => {
+    render(<StatusBadge status="in_progress" />);
+    expect(screen.getByText("in progress")).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    render(<StatusBadge status="open" className="extra-class" />);
+    expect(screen.getByText("open")).toHaveClass("extra-class");
+  });
+});
\ No newline at end of file