From a1fef1d8bb6f458c60a21b642a400307adc820f1 Mon Sep 17 00:00:00 2001 From: JCBSComputer Date: Thu, 2 Jul 2026 16:45:11 +0200 Subject: [PATCH] Fixed Forest Theme --- Web_Backgrounds/bw-theme.css | 45 +++++++++++++++++++++- src/app/client-portal/settings/page.tsx | 1 + src/app/layout.tsx | 1 + src/components/settings/theme-settings.tsx | 1 + src/providers/website-theme-provider.tsx | 1 + 5 files changed, 48 insertions(+), 1 deletion(-) diff --git a/Web_Backgrounds/bw-theme.css b/Web_Backgrounds/bw-theme.css index 1cb10da..b81387b 100644 --- a/Web_Backgrounds/bw-theme.css +++ b/Web_Backgrounds/bw-theme.css @@ -719,4 +719,47 @@ .light.theme-bw .bg-amber-500\/10, .light.theme-bw .dark\:bg-amber-500\/10, .light.theme-bw .bg-purple-500\/10, .light.theme-bw .dark\:bg-purple-500\/10, .light.theme-bw .bg-emerald-500\/10, .light.theme-bw .dark\:bg-emerald-500\/10, -.light.theme-bw .bg-red-500\/10, .light.theme-bw .dark\:bg-red-500\/10 { background-color: hsla(0,0%,50%,0.1) !important; } \ No newline at end of file +.light.theme-bw .bg-red-500\/10, .light.theme-bw .dark\:bg-red-500\/10 { background-color: hsla(0,0%,50%,0.1) !important; } + +/* ============================================================================ + Pipeline (Kanban Board + Stat Cards) — white glow instead of stage colours + ============================================================================ */ + +/* ---- Kanban columns ---- */ +.dark.theme-bw .overflow-x-auto > .flex-col.rounded-lg.border { + box-shadow: 0 0 20px hsla(0,0%,100%,0.06), 0 0 50px hsla(0,0%,100%,0.02) !important; +} + +.dark.theme-bw .overflow-x-auto > .flex-col.rounded-lg.border .rounded-t-lg { + background: transparent !important; + border-bottom-color: hsla(0,0%,100%,0.1) !important; +} + +.dark.theme-bw .overflow-x-auto > .flex-col.rounded-lg.border .h-2.w-2.rounded-full { + background: hsl(0,0%,65%) !important; + box-shadow: 0 0 6px hsla(0,0%,100%,0.4) !important; +} + +.dark.theme-bw .overflow-x-auto .cursor-grab .rounded-full { + background: hsl(0,0%,50%) !important; + box-shadow: 0 0 6px hsla(0,0%,100%,0.2) !important; +} + +/* ---- Dashboard cards (Pipeline Overview stat cards, Analytics charts, Recent Leads table) ---- */ +.dark.theme-bw .z-\[1\].space-y-6 .rounded-lg.border.bg-card { + box-shadow: 0 0 16px hsla(0,0%,100%,0.05), 0 0 40px hsla(0,0%,100%,0.015) !important; +} + +.dark.theme-bw .z-\[1\].space-y-6 .rounded-lg.border.bg-card .rounded-xl { + background: transparent !important; + box-shadow: 0 0 12px hsla(0,0%,100%,0.15), inset 0 0 8px hsla(0,0%,100%,0.05) !important; +} + +.dark.theme-bw .z-\[1\].space-y-6 .rounded-lg.border.bg-card .rounded-xl svg { + color: hsl(0,0%,70%) !important; +} + +.dark.theme-bw .z-\[1\].space-y-6 .rounded-lg.border.bg-card .h-1\.5.bg-muted.rounded-full .rounded-full { + background: hsl(0,0%,50%) !important; + box-shadow: 0 0 8px hsla(0,0%,100%,0.3) !important; +} \ No newline at end of file diff --git a/src/app/client-portal/settings/page.tsx b/src/app/client-portal/settings/page.tsx index abd86be..2586d84 100644 --- a/src/app/client-portal/settings/page.tsx +++ b/src/app/client-portal/settings/page.tsx @@ -34,6 +34,7 @@ const bgOptions = [ { value: "cyber2", label: "Cyber 2.0", color: "bg-gradient-to-r from-cyan-400 to-fuchsia-500", ring: "ring-cyan-400", desc: "Neon grid with glow" }, { value: "pumpkin", label: "Pumpkin Spice", color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange" }, { value: "bw", label: "Black & White", color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome" }, + { value: "forest", label: "Forest", color: "bg-gradient-to-r from-green-700 to-green-400", ring: "ring-green-600", desc: "Earthy greens with tree silhouettes" }, ] function getStoredColorTheme(): string { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index bb7e5f3..ddab2b0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -12,6 +12,7 @@ import "../../Web_Backgrounds/cyber2-theme.css" import "../../Web_Backgrounds/pumpkin-theme.css" import "../../Web_Backgrounds/bw-theme.css" import "../../Web_Backgrounds/luminous-theme.css" +import "../../Web_Backgrounds/forest-theme.css" const inter = Inter({ variable: "--font-inter", diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx index 79aaf5f..5b68653 100644 --- a/src/components/settings/theme-settings.tsx +++ b/src/components/settings/theme-settings.tsx @@ -39,6 +39,7 @@ const backgroundOptions = [ { value: "pumpkin", label: "Pumpkin Spice", icon: Shield, color: "bg-gradient-to-r from-orange-600 to-amber-500", ring: "ring-orange-600", desc: "Warm autumn orange with spicy accents" }, { value: "bw", label: "Black & White", icon: Shield, color: "bg-gradient-to-r from-gray-900 to-gray-400", ring: "ring-gray-500", desc: "Clean monochrome with subtle texture" }, { value: "luminous", label: "Luminous", icon: Shield, color: "bg-gradient-to-r from-blue-500 to-teal-400", ring: "ring-blue-500", desc: "Deep Glass 2.0 — blue-teal-amber with specular highlights and 3D bevel borders" }, + { value: "forest", label: "Forest", icon: Shield, color: "bg-gradient-to-r from-green-700 to-green-400", ring: "ring-green-600", desc: "Earthy greens with tree silhouettes and wood textures" }, ] function getStoredColorTheme(): string { diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx index 954aec8..10ddce9 100644 --- a/src/providers/website-theme-provider.tsx +++ b/src/providers/website-theme-provider.tsx @@ -12,6 +12,7 @@ const themeClasses: Record = { pumpkin: "theme-pumpkin", bw: "theme-bw", luminous: "theme-luminous", + forest: "theme-forest", } interface WebsiteThemeContextValue {