fix: Blueprint catalog dark theme — use solid backgrounds, stronger contrast

- Field cards inactive: dark:bg-gray-800 (solid, no opacity)
- Field cards active: dark:bg-brand-950/60 with dark:border-brand-600/50
- Sidebar: dark:bg-slate-800/80 (darker than modal background)
- Sidebar active item: dark:bg-brand-900/60 (visible brand tint)
- Sidebar hover: dark:hover:bg-gray-700/60
- Custom field form: dark:bg-gray-800 (solid)
- Dispo import subtitle text update

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-03-22 20:34:12 +01:00
parent fd400122a4
commit 60c52eba24
2 changed files with 6 additions and 6 deletions
@@ -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-gray-800/50 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-slate-800/80 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-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
? "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"
}`}
>
All Fields
@@ -618,7 +618,7 @@ export function BlueprintFieldCatalog({
{/* Add custom field */}
{showCustomForm ? (
<div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800/50">
<div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 space-y-3 bg-gray-50/50 dark:bg-gray-800">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="flex flex-col gap-1">
<label className="text-xs font-medium text-gray-600">
@@ -83,8 +83,8 @@ export function FieldCard({ field, overrides, onChange }: FieldCardProps) {
<div
className={`border rounded-lg transition-all ${
isActive
? "border-brand-300 bg-brand-50/40 shadow-sm dark:border-brand-700 dark:bg-brand-950/30"
: "border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800/50"
? "border-brand-400/60 bg-brand-50/40 shadow-sm dark:border-brand-600/50 dark:bg-brand-950/60"
: "border-gray-200 bg-white dark:border-gray-700/50 dark:bg-gray-800"
}`}
>
{/* Header row */}