From f4a7b53393e5d225af87adfcd8bec2a0669acda8 Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Mon, 16 Mar 2026 13:39:44 +0100
Subject: [PATCH] Restyle dark theme with blue-tinted palette, card glow, and
 rounded surfaces

Shift the dark theme from neutral gray to a richer blue-tinted palette
inspired by CharBuilder-style TTRPG apps. Deeper navy background, steel-blue
card surfaces, and visible blue borders create more depth and visual layering.

- Update design tokens: background, card, border, input, muted colors
- Add card-glow utility (radial gradient + blue box-shadow) for card surfaces
- Add panel-glow utility (top-down gradient) for tall panels like stat blocks
- Apply glow and rounded-lg to all card surfaces, dropdowns, dialogs, toasts
- Give outline buttons a subtle fill instead of transparent background
- Active combatant row now uses full border with glow instead of left accent

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../__tests__/combatant-row.test.tsx          |  2 +-
 apps/web/src/components/action-bar.tsx        |  6 ++--
 apps/web/src/components/combatant-row.tsx     |  4 +--
 apps/web/src/components/condition-picker.tsx  |  2 +-
 .../src/components/create-player-modal.tsx    |  2 +-
 apps/web/src/components/hp-adjust-popover.tsx |  2 +-
 apps/web/src/components/player-management.tsx |  2 +-
 apps/web/src/components/stat-block-panel.tsx  |  4 +--
 apps/web/src/components/toast.tsx             |  2 +-
 apps/web/src/components/turn-navigation.tsx   |  2 +-
 apps/web/src/components/ui/button.tsx         |  2 +-
 apps/web/src/components/ui/overflow-menu.tsx  |  2 +-
 apps/web/src/index.css                        | 32 ++++++++++++++++---
 13 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/components/__tests__/combatant-row.test.tsx b/apps/web/src/components/__tests__/combatant-row.test.tsx
index ce55baa..b169bce 100644
--- a/apps/web/src/components/__tests__/combatant-row.test.tsx
+++ b/apps/web/src/components/__tests__/combatant-row.test.tsx
@@ -75,7 +75,7 @@ describe("CombatantRow", () => {
 	it("active combatant gets active border styling", () => {
 		const { container } = renderRow({ isActive: true });
 		const row = container.firstElementChild;
-		expect(row?.className).toContain("border-l-accent");
+		expect(row?.className).toContain("border-accent/40");
 	});
 
 	it("unconscious combatant (currentHp === 0) gets dimmed styling", () => {
diff --git a/apps/web/src/components/action-bar.tsx b/apps/web/src/components/action-bar.tsx
index 6270674..16199c1 100644
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -77,7 +77,7 @@ function AddModeSuggestions({
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
 }>) {
 	return (
-		<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
+		<div className="card-glow absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-lg border border-border bg-card">
 			<button
 				type="button"
 				className="flex w-full items-center gap-1.5 border-border border-b px-3 py-2 text-left text-accent text-sm hover:bg-accent/20"
@@ -457,7 +457,7 @@ export function ActionBar({
 	});
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<form
 				onSubmit={handleAdd}
 				className="relative flex flex-1 items-center gap-2"
@@ -498,7 +498,7 @@ export function ActionBar({
 							</button>
 						)}
 						{browseMode && deferredSuggestions.length > 0 && (
-							<div className="absolute bottom-full z-50 mb-1 w-full rounded-md border border-border bg-card shadow-lg">
+							<div className="card-glow absolute bottom-full z-50 mb-1 w-full rounded-lg border border-border bg-card">
 								<ul className="max-h-48 overflow-y-auto py-1">
 									{deferredSuggestions.map((result, i) => (
 										<li key={creatureKey(result)}>
diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx
index 82a9900..6f79f0c 100644
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -365,7 +365,7 @@ function rowBorderClass(
 	isActive: boolean,
 	isConcentrating: boolean | undefined,
 ): string {
-	if (isActive) return "border-l-2 border-l-accent bg-accent/10";
+	if (isActive) return "border border-accent/40 bg-accent/10 card-glow";
 	if (isConcentrating) return "border-l-2 border-l-purple-400";
 	return "border-l-2 border-l-transparent";
 }
@@ -434,7 +434,7 @@ export function CombatantRow({
 		<div
 			ref={ref}
 			className={cn(
-				"group rounded-md pr-3 transition-colors",
+				"group rounded-lg pr-3 transition-colors",
 				rowBorderClass(isActive, combatant.isConcentrating),
 				isPulsing && "animate-concentration-pulse",
 			)}
diff --git a/apps/web/src/components/condition-picker.tsx b/apps/web/src/components/condition-picker.tsx
index 750b52c..324170d 100644
--- a/apps/web/src/components/condition-picker.tsx
+++ b/apps/web/src/components/condition-picker.tsx
@@ -97,7 +97,7 @@ export function ConditionPicker({
 		<div
 			ref={ref}
 			className={cn(
-				"absolute left-0 z-10 w-fit overflow-y-auto rounded-md border border-border bg-background p-1 shadow-lg",
+				"card-glow absolute left-0 z-10 w-fit overflow-y-auto rounded-lg border border-border bg-background p-1",
 				flipped ? "bottom-full mb-1" : "top-full mt-1",
 			)}
 			style={maxHeight ? { maxHeight } : undefined}
diff --git a/apps/web/src/components/create-player-modal.tsx b/apps/web/src/components/create-player-modal.tsx
index 8edae9f..ccbc996 100644
--- a/apps/web/src/components/create-player-modal.tsx
+++ b/apps/web/src/components/create-player-modal.tsx
@@ -106,7 +106,7 @@ export function CreatePlayerModal({
 	return (
 		<dialog
 			ref={dialogRef}
-			className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
 		>
 			<div className="mb-4 flex items-center justify-between">
 				<h2 className="font-semibold text-foreground text-lg">
diff --git a/apps/web/src/components/hp-adjust-popover.tsx b/apps/web/src/components/hp-adjust-popover.tsx
index 9af79fe..3ac3cbc 100644
--- a/apps/web/src/components/hp-adjust-popover.tsx
+++ b/apps/web/src/components/hp-adjust-popover.tsx
@@ -87,7 +87,7 @@ export function HpAdjustPopover({ onAdjust, onClose }: HpAdjustPopoverProps) {
 	return (
 		<div
 			ref={ref}
-			className="fixed z-10 rounded-md border border-border bg-background p-2 shadow-lg"
+			className="card-glow fixed z-10 rounded-lg border border-border bg-background p-2"
 			style={
 				pos
 					? { top: pos.top, left: pos.left }
diff --git a/apps/web/src/components/player-management.tsx b/apps/web/src/components/player-management.tsx
index 9518b90..eb7fc00 100644
--- a/apps/web/src/components/player-management.tsx
+++ b/apps/web/src/components/player-management.tsx
@@ -55,7 +55,7 @@ export function PlayerManagement({
 	return (
 		<dialog
 			ref={dialogRef}
-			className="m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl backdrop:bg-black/50"
+			className="card-glow m-auto w-full max-w-md rounded-lg border border-border bg-card p-6 backdrop:bg-black/50"
 		>
 			<div className="mb-4 flex items-center justify-between">
 				<h2 className="font-semibold text-foreground text-lg">
diff --git a/apps/web/src/components/stat-block-panel.tsx b/apps/web/src/components/stat-block-panel.tsx
index a832c3b..87e27b0 100644
--- a/apps/web/src/components/stat-block-panel.tsx
+++ b/apps/web/src/components/stat-block-panel.tsx
@@ -155,7 +155,7 @@ function DesktopPanel({
 	return (
 		<div
 			className={cn(
-				"fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel",
+				"panel-glow fixed top-0 bottom-0 flex w-[400px] flex-col border-border bg-card transition-slide-panel",
 				sideClasses,
 				isCollapsed ? collapsedTranslate : "translate-x-0",
 			)}
@@ -201,7 +201,7 @@ function MobileDrawer({
 			/>
 			<div
 				className={cn(
-					"absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l bg-card shadow-xl",
+					"panel-glow absolute top-0 right-0 bottom-0 w-[85%] max-w-md border-border border-l bg-card",
 					!isSwiping && "animate-slide-in-right",
 				)}
 				style={
diff --git a/apps/web/src/components/toast.tsx b/apps/web/src/components/toast.tsx
index 5e622a1..198e4dc 100644
--- a/apps/web/src/components/toast.tsx
+++ b/apps/web/src/components/toast.tsx
@@ -24,7 +24,7 @@ export function Toast({
 
 	return createPortal(
 		<div className="fixed bottom-4 left-4 z-50">
-			<div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-lg">
+			<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 				<span className="text-foreground text-sm">{message}</span>
 				{progress !== undefined && (
 					<div className="h-2 w-24 overflow-hidden rounded-full bg-muted">
diff --git a/apps/web/src/components/turn-navigation.tsx b/apps/web/src/components/turn-navigation.tsx
index 5af9a81..d67493f 100644
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -21,7 +21,7 @@ export function TurnNavigation({
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 
 	return (
-		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+		<div className="card-glow flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">
 			<Button
 				variant="outline"
 				size="icon"
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 27670fa..0dff173 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				outline:
-					"border border-border bg-transparent text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
+					"border border-border bg-background/50 text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
 				ghost:
 					"text-foreground hover:bg-hover-neutral-bg hover:text-hover-neutral",
 			},
diff --git a/apps/web/src/components/ui/overflow-menu.tsx b/apps/web/src/components/ui/overflow-menu.tsx
index 32e9c7b..19199db 100644
--- a/apps/web/src/components/ui/overflow-menu.tsx
+++ b/apps/web/src/components/ui/overflow-menu.tsx
@@ -49,7 +49,7 @@ export function OverflowMenu({ items }: OverflowMenuProps) {
 				<EllipsisVertical className="h-5 w-5" />
 			</Button>
 			{!!open && (
-				<div className="absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-md border border-border bg-card py-1 shadow-lg">
+				<div className="card-glow absolute right-0 bottom-full z-50 mb-1 min-w-48 rounded-lg border border-border bg-card py-1">
 					{items.map((item) => (
 						<button
 							key={item.label}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 38aaaed..2d09ba4 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
 @theme {
-	--color-background: #0f172a;
+	--color-background: #0e1a2e;
 	--color-foreground: #e2e8f0;
-	--color-muted: #64748b;
+	--color-muted: #7a8ba4;
 	--color-muted-foreground: #94a3b8;
-	--color-card: #1e293b;
+	--color-card: #1a2e4a;
 	--color-card-foreground: #e2e8f0;
-	--color-border: #334155;
-	--color-input: #334155;
+	--color-border: #2a5088;
+	--color-input: #2a5088;
 	--color-primary: #3b82f6;
 	--color-primary-foreground: #ffffff;
 	--color-accent: #3b82f6;
@@ -169,6 +169,28 @@
 		concentration-glow 1200ms ease-out;
 }
 
+@utility card-glow {
+	background-image: radial-gradient(
+		ellipse at 50% 50%,
+		oklch(0.35 0.05 250 / 0.5) 0%,
+		transparent 70%
+	);
+	box-shadow:
+		0 0 15px -2px oklch(0.623 0.214 259 / 0.2),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+}
+
+@utility panel-glow {
+	background-image: linear-gradient(
+		to bottom,
+		oklch(0.35 0.05 250 / 0.4) 0%,
+		transparent 40%
+	);
+	box-shadow:
+		0 0 20px -2px oklch(0.623 0.214 259 / 0.15),
+		inset 0 1px 0 0 oklch(0.7 0.15 259 / 0.1);
+}
+
 * {
 	scrollbar-color: var(--color-border) transparent;
 	scrollbar-width: thin;