From 7f9c246818c222897bc00a9a80b6f1e1c2797c07 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 19 Jun 2026 11:34:47 +0100
Subject: [PATCH] refactor(frontend): remove gradient backgrounds for flat
 colors

Replace bg-gradient-to-* with flat bg-* on BookingFlow warning, demo card, prices CTA, and schedule divider for consistent flat design.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/lib/components/booking/BookingFlow.svelte | 2 +-
 frontend/src/routes/demo/+page.svelte                  | 2 +-
 frontend/src/routes/prices/+page.svelte                | 2 +-
 frontend/src/routes/schedule/+page.svelte              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/booking/BookingFlow.svelte b/frontend/src/lib/components/booking/BookingFlow.svelte
index 65ba1f4..8e58895 100644
--- a/frontend/src/lib/components/booking/BookingFlow.svelte
+++ b/frontend/src/lib/components/booking/BookingFlow.svelte
@@ -1568,7 +1568,7 @@
 				<!-- Warning: Active booking limit for deposit-owing users -->
 				{#if authStore.isAuthenticated && userDepositsRequired > 0 && hasActiveBooking}
 					<div
-						class="rounded-lg border border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50 p-4"
+						class="rounded-lg border border-amber-200/60 bg-amber-50 p-4"
 					>
 						<div class="flex gap-3">
 							<div class="flex-shrink-0">
diff --git a/frontend/src/routes/demo/+page.svelte b/frontend/src/routes/demo/+page.svelte
index 67cbfa0..7137824 100644
--- a/frontend/src/routes/demo/+page.svelte
+++ b/frontend/src/routes/demo/+page.svelte
@@ -148,7 +148,7 @@
 	</div>
 
 	<!-- Current/Next Appointment Card -->
-	<Card.Root class="border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-purple-50">
+	<Card.Root class="border-2 border-blue-200 bg-blue-50">
 		<Card.Header>
 			<div class="flex items-start justify-between">
 				<div>
diff --git a/frontend/src/routes/prices/+page.svelte b/frontend/src/routes/prices/+page.svelte
index 56f3770..0a046b8 100644
--- a/frontend/src/routes/prices/+page.svelte
+++ b/frontend/src/routes/prices/+page.svelte
@@ -209,7 +209,7 @@
 			</Card.Content>
 		</Card.Root>
 
-		<Card.Root class="bg-gradient-to-br from-primary/5 to-secondary/30 shadow-sm">
+		<Card.Root class="bg-primary/5 shadow-sm">
 			<Card.Content class="p-6 text-center md:p-8">
 				<h2 class="mb-4 text-lg font-semibold text-primary md:text-xl">Ready to Book?</h2>
 				<div class="flex flex-col gap-3 md:flex-row md:justify-center md:gap-4">
diff --git a/frontend/src/routes/schedule/+page.svelte b/frontend/src/routes/schedule/+page.svelte
index c98d239..4d6b1bf 100644
--- a/frontend/src/routes/schedule/+page.svelte
+++ b/frontend/src/routes/schedule/+page.svelte
@@ -262,7 +262,7 @@
 							<h2 class="text-base font-bold text-gray-700">
 								{group.label}
 							</h2>
-							<div class="h-px flex-1 bg-gradient-to-r from-gray-200 to-transparent"></div>
+							<div class="h-px flex-1 bg-gray-200"></div>
 						</div>
 
 						<div class="space-y-4">