fix: improve color contrast to meet WCAG AA standards (text-slate-500→text-slate-600 on bg-slate-50) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT]

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>

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>
             )}

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>
       )}

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 (

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>

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 && (

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

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>
 

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");
+  });
+});