engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.3k

fix: improve design contrast by using white backgrounds for cards

Browse source 
- 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>
This commit is contained in:
Ajax Davis 2026-01-08 16:55:16 +10:00
parent 337d70f663
commit 00b79c1f1a
9 changed files with 24 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/web/src/app/collections/[id]/page.tsx
View file

@ -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>

2
apps/web/src/app/dashboard/agents/page.tsx
View file

@ -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>

8
apps/web/src/app/dashboard/collections/[id]/page.tsx
View file

@ -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,

4
apps/web/src/app/dashboard/collections/page.tsx
View file

@ -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>

7
apps/web/src/app/dashboard/likes/agents/page.tsx
View file

@ -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

7
apps/web/src/app/dashboard/likes/collections/page.tsx
View file

@ -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

2
apps/web/src/app/dashboard/likes/page.tsx
View file

@ -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" />

7
apps/web/src/app/dashboard/likes/tools/page.tsx
View file

@ -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

10
apps/web/src/app/dashboard/page.tsx
View file

@ -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>