From 00b79c1f1ac0c4c2ddfbce26a5334404fef2ef0d Mon Sep 17 00:00:00 2001
From: Ajax Davis <thomasalwyndavis@gmail.com>
Date: Thu, 8 Jan 2026 16:55:16 +1000
Subject: [PATCH] fix: improve design contrast by using white backgrounds for
 cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace bg-background with bg-white for cards and panels across dashboard
- Add hover:shadow-sm for better visual feedback on interactive elements
- Apply fixes to: collections, agents, likes pages, and dashboard overview
- Cards now properly stand out against the light gray page background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/collections/[id]/page.tsx            | 10 +++++-----
 apps/web/src/app/dashboard/agents/page.tsx            |  2 +-
 apps/web/src/app/dashboard/collections/[id]/page.tsx  |  8 ++++----
 apps/web/src/app/dashboard/collections/page.tsx       |  4 ++--
 apps/web/src/app/dashboard/likes/agents/page.tsx      |  7 ++-----
 apps/web/src/app/dashboard/likes/collections/page.tsx |  7 ++-----
 apps/web/src/app/dashboard/likes/page.tsx             |  2 +-
 apps/web/src/app/dashboard/likes/tools/page.tsx       |  7 ++-----
 apps/web/src/app/dashboard/page.tsx                   | 10 +++++-----
 9 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/app/collections/[id]/page.tsx b/apps/web/src/app/collections/[id]/page.tsx
index 9c24726..436a28d 100644
--- a/apps/web/src/app/collections/[id]/page.tsx
+++ b/apps/web/src/app/collections/[id]/page.tsx
@@ -89,7 +89,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
             <span className="text-xs text-foreground-tertiary">(recommended)</span>
           </div>
           <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-background border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
+            <div className="flex-1 px-3 py-2 bg-white border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
               {httpUrl}
             </div>
             <Button
@@ -113,7 +113,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
             <span className="text-xs text-foreground-tertiary">(streaming)</span>
           </div>
           <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-background border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
+            <div className="flex-1 px-3 py-2 bg-white border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
               {sseUrl}
             </div>
             <Button
@@ -142,7 +142,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
 
         {showConfig && (
           <div className="mt-3 relative">
-            <pre className="p-4 bg-background border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
+            <pre className="p-4 bg-white border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
               {configSnippet}
             </pre>
             <Button
@@ -308,7 +308,7 @@ export default function PublicCollectionDetailPage(): React.ReactElement {
           <h2 className="text-lg font-semibold text-foreground mb-4">Tools in this Collection</h2>
 
           {collection.tools.length === 0 ? (
-            <div className="text-center py-12 bg-surface/50 border border-border rounded-lg">
+            <div className="text-center py-12 bg-white border border-border rounded-lg">
               <Icon icon="puzzle" size="lg" className="mx-auto text-foreground-tertiary mb-2" />
               <p className="text-foreground-secondary">No tools in this collection yet</p>
             </div>
@@ -317,7 +317,7 @@ export default function PublicCollectionDetailPage(): React.ReactElement {
               {collection.tools.map((ct) => (
                 <div
                   key={ct.id}
-                  className="bg-background border border-border rounded-lg p-4 hover:border-foreground/20 transition-colors"
+                  className="bg-white border border-border rounded-lg p-4 hover:border-foreground/20 hover:shadow-sm transition-all"
                 >
                   <div className="flex items-start justify-between mb-2">
                     <div>
diff --git a/apps/web/src/app/dashboard/agents/page.tsx b/apps/web/src/app/dashboard/agents/page.tsx
index e5564ad..f5bd01b 100644
--- a/apps/web/src/app/dashboard/agents/page.tsx
+++ b/apps/web/src/app/dashboard/agents/page.tsx
@@ -154,7 +154,7 @@ export default function AgentsPage(): React.ReactElement {
         </Link>
       }
     >
-      <div className="bg-background border border-border rounded-lg overflow-hidden">
+      <div className="bg-white border border-border rounded-lg overflow-hidden">
         <Table>
           <TableHeader>
             <TableRow>
diff --git a/apps/web/src/app/dashboard/collections/[id]/page.tsx b/apps/web/src/app/dashboard/collections/[id]/page.tsx
index 325f806..ceae14f 100644
--- a/apps/web/src/app/dashboard/collections/[id]/page.tsx
+++ b/apps/web/src/app/dashboard/collections/[id]/page.tsx
@@ -59,7 +59,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
             <span className="text-xs text-foreground-tertiary">(recommended)</span>
           </div>
           <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-background border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
+            <div className="flex-1 px-3 py-2 bg-white border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
               {httpUrl}
             </div>
             <Button
@@ -83,7 +83,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
             <span className="text-xs text-foreground-tertiary">(streaming)</span>
           </div>
           <div className="flex items-center gap-2">
-            <div className="flex-1 px-3 py-2 bg-background border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
+            <div className="flex-1 px-3 py-2 bg-white border border-border rounded-lg font-mono text-sm text-foreground-secondary overflow-x-auto">
               {sseUrl}
             </div>
             <Button
@@ -112,7 +112,7 @@ function McpUrlSection({ collectionId }: { collectionId: string }) {
 
         {showConfig && (
           <div className="mt-3 relative">
-            <pre className="p-4 bg-background border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
+            <pre className="p-4 bg-white border border-border rounded-lg text-xs font-mono text-foreground-secondary overflow-x-auto">
               {configSnippet}
             </pre>
             <Button
@@ -418,7 +418,7 @@ export default function CollectionDetailPage(): React.ReactElement {
     >
       {/* Edit Form */}
       {isEditing && (
-        <div className="bg-background border border-border rounded-lg p-6 mb-8">
+        <div className="bg-white border border-border rounded-lg p-6 mb-8">
           <CollectionForm
             initialData={{
               name: collection.name,
diff --git a/apps/web/src/app/dashboard/collections/page.tsx b/apps/web/src/app/dashboard/collections/page.tsx
index ca11ec5..de887dd 100644
--- a/apps/web/src/app/dashboard/collections/page.tsx
+++ b/apps/web/src/app/dashboard/collections/page.tsx
@@ -166,7 +166,7 @@ export default function CollectionsPage(): React.ReactElement {
     >
       {/* Create Form */}
       {showCreateForm && (
-        <div className="bg-background border border-border rounded-lg p-6 mb-6">
+        <div className="bg-white border border-border rounded-lg p-6 mb-6">
           <h2 className="text-lg font-medium text-foreground mb-4">Create New Collection</h2>
           <CollectionForm
             onSubmit={handleCreate}
@@ -178,7 +178,7 @@ export default function CollectionsPage(): React.ReactElement {
       )}
 
       {/* Collections Table */}
-      <div className="bg-background border border-border rounded-lg overflow-hidden">
+      <div className="bg-white border border-border rounded-lg overflow-hidden">
         <Table>
           <TableHeader>
             <TableRow>
diff --git a/apps/web/src/app/dashboard/likes/agents/page.tsx b/apps/web/src/app/dashboard/likes/agents/page.tsx
index 235003c..8c7613c 100644
--- a/apps/web/src/app/dashboard/likes/agents/page.tsx
+++ b/apps/web/src/app/dashboard/likes/agents/page.tsx
@@ -95,10 +95,7 @@ export default function LikedAgentsPage(): React.ReactElement {
       {isLoading ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div
-              key={i}
-              className="bg-background border border-border rounded-lg p-4 animate-pulse"
-            >
+            <div key={i} className="bg-white border border-border rounded-lg p-4 animate-pulse">
               <div className="h-5 bg-surface-secondary rounded w-3/4 mb-2" />
               <div className="h-4 bg-surface-secondary rounded w-full mb-1" />
               <div className="h-4 bg-surface-secondary rounded w-2/3" />
@@ -124,7 +121,7 @@ export default function LikedAgentsPage(): React.ReactElement {
             {agents.map((item) => (
               <div
                 key={item.id}
-                className="bg-background border border-border rounded-lg p-4 hover:border-foreground/20 transition-colors"
+                className="bg-white border border-border rounded-lg p-4 hover:border-foreground/20 hover:shadow-sm transition-all"
               >
                 <div className="flex items-start justify-between mb-2">
                   <Link
diff --git a/apps/web/src/app/dashboard/likes/collections/page.tsx b/apps/web/src/app/dashboard/likes/collections/page.tsx
index 7342701..73dd4f3 100644
--- a/apps/web/src/app/dashboard/likes/collections/page.tsx
+++ b/apps/web/src/app/dashboard/likes/collections/page.tsx
@@ -97,10 +97,7 @@ export default function LikedCollectionsPage(): React.ReactElement {
       {isLoading ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div
-              key={i}
-              className="bg-background border border-border rounded-lg p-4 animate-pulse"
-            >
+            <div key={i} className="bg-white border border-border rounded-lg p-4 animate-pulse">
               <div className="h-5 bg-surface-secondary rounded w-3/4 mb-2" />
               <div className="h-4 bg-surface-secondary rounded w-full mb-1" />
               <div className="h-4 bg-surface-secondary rounded w-2/3" />
@@ -126,7 +123,7 @@ export default function LikedCollectionsPage(): React.ReactElement {
             {collections.map((item) => (
               <div
                 key={item.id}
-                className="bg-background border border-border rounded-lg p-4 hover:border-foreground/20 transition-colors"
+                className="bg-white border border-border rounded-lg p-4 hover:border-foreground/20 hover:shadow-sm transition-all"
               >
                 <div className="flex items-start justify-between mb-2">
                   <Link
diff --git a/apps/web/src/app/dashboard/likes/page.tsx b/apps/web/src/app/dashboard/likes/page.tsx
index 99e0d61..692373b 100644
--- a/apps/web/src/app/dashboard/likes/page.tsx
+++ b/apps/web/src/app/dashboard/likes/page.tsx
@@ -95,7 +95,7 @@ export default function LikesOverviewPage(): React.ReactElement {
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {sections.map((section) => (
           <Link key={section.href} href={section.href} className="block">
-            <div className="bg-background border border-border rounded-lg p-6 hover:border-foreground/20 transition-colors group h-full">
+            <div className="bg-white border border-border rounded-lg p-6 hover:border-foreground/20 hover:shadow-sm transition-all group h-full">
               <div className="flex items-center gap-4">
                 <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                   <Icon icon={section.icon} size="md" className="text-primary" />
diff --git a/apps/web/src/app/dashboard/likes/tools/page.tsx b/apps/web/src/app/dashboard/likes/tools/page.tsx
index 82023ba..5e6f760 100644
--- a/apps/web/src/app/dashboard/likes/tools/page.tsx
+++ b/apps/web/src/app/dashboard/likes/tools/page.tsx
@@ -90,10 +90,7 @@ export default function LikedToolsPage(): React.ReactElement {
       {isLoading ? (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div
-              key={i}
-              className="bg-background border border-border rounded-lg p-4 animate-pulse"
-            >
+            <div key={i} className="bg-white border border-border rounded-lg p-4 animate-pulse">
               <div className="h-5 bg-surface-secondary rounded w-3/4 mb-2" />
               <div className="h-4 bg-surface-secondary rounded w-full mb-1" />
               <div className="h-4 bg-surface-secondary rounded w-2/3" />
@@ -119,7 +116,7 @@ export default function LikedToolsPage(): React.ReactElement {
             {tools.map((item) => (
               <div
                 key={item.id}
-                className="bg-background border border-border rounded-lg p-4 hover:border-foreground/20 transition-colors"
+                className="bg-white border border-border rounded-lg p-4 hover:border-foreground/20 hover:shadow-sm transition-all"
               >
                 <div className="flex items-start justify-between mb-2">
                   <Link
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index f3098ef..5c25d18 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -14,7 +14,7 @@ export default function DashboardPage(): React.ReactElement {
       {/* Quick Actions */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mb-8">
         <Link href="/dashboard/agents" className="block">
-          <div className="bg-background border border-border rounded-lg p-6 hover:border-foreground/20 transition-colors group">
+          <div className="bg-white border border-border rounded-lg p-6 hover:border-foreground/20 hover:shadow-sm transition-all group">
             <div className="flex items-center gap-4">
               <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                 <Icon icon="terminal" size="md" className="text-primary" />
@@ -30,7 +30,7 @@ export default function DashboardPage(): React.ReactElement {
         </Link>
 
         <Link href="/dashboard/collections" className="block">
-          <div className="bg-background border border-border rounded-lg p-6 hover:border-foreground/20 transition-colors group">
+          <div className="bg-white border border-border rounded-lg p-6 hover:border-foreground/20 hover:shadow-sm transition-all group">
             <div className="flex items-center gap-4">
               <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                 <Icon icon="folder" size="md" className="text-primary" />
@@ -46,7 +46,7 @@ export default function DashboardPage(): React.ReactElement {
         </Link>
 
         <Link href="/dashboard/settings/api-keys" className="block">
-          <div className="bg-background border border-border rounded-lg p-6 hover:border-foreground/20 transition-colors group">
+          <div className="bg-white border border-border rounded-lg p-6 hover:border-foreground/20 hover:shadow-sm transition-all group">
             <div className="flex items-center gap-4">
               <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                 <Icon icon="key" size="md" className="text-primary" />
@@ -63,7 +63,7 @@ export default function DashboardPage(): React.ReactElement {
       {/* Two-column layout for Profile and Activity */}
       <div className="grid gap-6 lg:grid-cols-2">
         {/* Profile Section */}
-        <div className="bg-background border border-border rounded-lg p-6">
+        <div className="bg-white border border-border rounded-lg p-6">
           <h2 className="text-lg font-medium text-foreground mb-4">Profile</h2>
 
           <div className="space-y-4">
@@ -91,7 +91,7 @@ export default function DashboardPage(): React.ReactElement {
         </div>
 
         {/* Activity Stream Section */}
-        <div className="bg-background border border-border rounded-lg p-6">
+        <div className="bg-white border border-border rounded-lg p-6">
           <h2 className="text-lg font-medium text-foreground mb-4">Recent Activity</h2>
           <DashboardActivityStream autoRefreshInterval={30000} />
         </div>