Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Blueprint list dark theme — target badges and sidebar categories

Browse Source 
- PROJECT badge: dark:bg-purple-900/40 dark:text-purple-300
- RESOURCE badge: dark:bg-blue-900/40 dark:text-blue-300
- Global badge: dark:bg-amber-900/40 dark:text-amber-300
- Table rows: dark:hover:bg-gray-800/50, dark:border-gray-700/50
- Blueprint name: dark:text-gray-100
- Field/preset counts: dark:text-gray-400
- Sidebar category buttons in .map(): added missing dark: variants
  (root cause of persistent white hover backgrounds)

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Hartmut Nörenberg
2026-03-22 20:54:07 +01:00
parent 4bd4b23657
commit a9a8a13424
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
+5 -5
View File
@@ -440,15 +440,15 @@ export function BlueprintFieldCatalog({
{/* Search + category sidebar layout */}
<div className="flex flex-1 overflow-hidden">
{/* Category sidebar */}
<div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-slate-800/80 overflow-y-auto hidden md:block">
<div className="w-48 shrink-0 border-r border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-900 overflow-y-auto hidden md:block">
<nav className="py-2">
<button
type="button"
onClick={() => setActiveCategory(null)}
className={`w-full text-left px-4 py-2 text-sm transition-colors ${
activeCategory === null
? "bg-brand-100 dark:bg-brand-900/60 text-brand-700 dark:text-brand-200 font-medium"
: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700/60"
? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
}`}
>
All Fields
@@ -472,8 +472,8 @@ export function BlueprintFieldCatalog({
onClick={() => setActiveCategory(name)}
className={`w-full text-left px-4 py-2 text-sm transition-colors ${
activeCategory === name
? "bg-brand-50 text-brand-700 font-medium"
: "text-gray-600 hover:bg-gray-100"
? "bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-400 font-medium border-l-2 border-brand-500"
: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800/50 border-l-2 border-transparent"
}`}
>
<span className="truncate block">{name}</span>
apps/web/src/components/blueprints/BlueprintsClient.tsx
+6 -6
View File
@@ -369,7 +369,7 @@ export function BlueprintsClient() {
const isProject = bp.target === "PROJECT";
return (
<tr key={bp.id} className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors">
<tr key={bp.id} className="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<td className="px-3 py-3">
<input
type="checkbox"
@@ -380,20 +380,20 @@ export function BlueprintsClient() {
</td>
<td className="px-3 py-3">
<div className="min-w-0">
<div className="font-medium text-gray-900">{bp.name}</div>
<div className="font-medium text-gray-900 dark:text-gray-100">{bp.name}</div>
{bp.description && <div className="text-xs text-gray-500 mt-0.5 truncate">{bp.description}</div>}
</div>
</td>
<td className="px-3 py-3">
<span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
<span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" : "bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"}`}>
{bp.target}
</span>
</td>
<td className="px-3 py-3 text-center text-gray-600">{fieldCount}</td>
<td className="px-3 py-3 text-center text-gray-600">{isProject ? presetCount : "—"}</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{fieldCount}</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{isProject ? presetCount : "—"}</td>
<td className="px-3 py-3 text-center">
{bp.isGlobal ? (
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 font-medium">
Global
</span>
) : (