From 37fd41dce582bcd97ff4735ab4fd76fbd4a2a644 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Sun, 19 Oct 2025 18:18:15 +0100
Subject: [PATCH] fix mobile toast, theming

---
 frontend/src/app.css                          |  8 +++----
 .../src/lib/components/layout/NavBar.svelte   |  2 +-
 .../alert-dialog/alert-dialog-content.svelte  |  8 +++----
 .../alert-dialog/alert-dialog-footer.svelte   |  6 ++---
 .../components/ui/calendar/calendar.svelte    |  2 +-
 frontend/src/routes/+layout.svelte            | 24 ++++++++++++++++++-
 frontend/src/routes/admin/+page.svelte        |  8 +++----
 frontend/src/routes/book/+page.svelte         |  8 +++----
 frontend/src/routes/prices/+page.svelte       | 24 +++++++++----------
 9 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index e9a1ea5..03b650e 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -12,15 +12,15 @@
   --card-foreground: oklch(0.129 0.042 264.695);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
+  --primary: oklch(0.28 0.04 260);
   --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
+  --secondary: oklch(0.97 0.01 248);
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
   --accent: oklch(0.968 0.007 247.896);
   --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive: oklch(0.64 0.21 25);
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
@@ -121,12 +121,10 @@
   }
 }
 
-/* Add this to your app.css or global styles */
 .calendar-container {
   z-index: 49 !important;
 }
 
-/* Or target the specific calendar component if needed */
 [data-calendar] {
   z-index: 49 !important;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/components/layout/NavBar.svelte b/frontend/src/lib/components/layout/NavBar.svelte
index 580633c..28399bc 100644
--- a/frontend/src/lib/components/layout/NavBar.svelte
+++ b/frontend/src/lib/components/layout/NavBar.svelte
@@ -46,7 +46,7 @@
 	class:frosty-nav={!mobileMenuOpen}
 	class:bg-background={mobileMenuOpen}
 >
-	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+	<div class="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
 		<div class="flex h-16 items-center justify-between">
 			<!-- Left: Social Icons -->
 			<div class="flex items-center space-x-4">
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 6c3c604..fd348e2 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
 
 	let {
 		ref = $bindable(null),
@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 mm:max-w-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index f78b97a..94bbfaa 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
-	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/calendar/calendar.svelte b/frontend/src/lib/components/ui/calendar/calendar.svelte
index c7362c6..af1a60a 100644
--- a/frontend/src/lib/components/ui/calendar/calendar.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar.svelte
@@ -52,7 +52,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	class={cn(
 		'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
 		// Add fuchsia theme styles for selected date
-		'[&_[data-selected]]:border-primary [&_[data-selected]]:text-primary [&_[data-selected]]:rounded-md [&_[data-selected]]:bg-fuchsia-200 [&_[data-selected]]:shadow-sm',
+		'[&_[data-selected]]:border-primary [&_[data-selected]]:text-primary [&_[data-selected]]:rounded-md [&_[data-selected]]:bg-fuchsia-100 [&_[data-selected]]:shadow-sm',
 		'[&_[data-selected]:hover]:bg-fuchsia-50',
 		// Ensure today indicator works with fuchsia theme
 		'[&_[data-today]:not([data-selected])]:bg-accent [&_[data-today]:not([data-selected])]:text-accent-foreground',
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 049e796..511a3d8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,9 +4,31 @@
 	import NavBar from '$lib/components/layout/NavBar.svelte';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
 
+	// Default to 'top-center' (mobile-first approach)
+	let toasterPosition = $state<'top-center' | 'bottom-center'>('top-center');
+
+	function updateToasterPosition() {
+		// Use 640px (Tailwind's 'sm' breakpoint) to differentiate desktop and mobile
+		if (typeof window !== 'undefined' && window.innerWidth >= 768) {
+			toasterPosition = 'bottom-center';
+		} else {
+			toasterPosition = 'top-center';
+		}
+		console.log('Toaster position:', toasterPosition);
+	}
+
+	onMount(() => {
+		updateToasterPosition();
+		window.addEventListener('resize', updateToasterPosition);
+		return () => {
+			window.removeEventListener('resize', updateToasterPosition);
+		};
+	});
+
 	// Verify email address
 	async function verify_email() {
 		alert('Verifying email address...');
@@ -27,7 +49,7 @@
 </svelte:head>
 
 <NavBar />
-<Toaster position="bottom-center" />
+<Toaster position={toasterPosition} />
 
 <main class="pt-16">
 	{#if authStore.currentUser?.role === 'unverified_email'}
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 1de784b..0c6c634 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -1028,7 +1028,7 @@
 								<div
 									class="rounded p-2 text-xs {result.error
 										? 'bg-red-100 text-red-800'
-										: 'bg-green-100 text-green-800'}"
+										: 'bg-emerald-100 text-emerald-800'}"
 								>
 									{result.name}: {result.error
 										? `Failed: ${result.error}`
@@ -1210,7 +1210,7 @@
 										<td class="py-2">
 											<span
 												class="text-sm font-medium {row.is_open
-													? 'text-green-600'
+													? 'text-emerald-600'
 													: 'text-red-600'}"
 											>
 												{row.is_open ? 'Open' : 'Closed'}
@@ -1317,7 +1317,7 @@
 										<td class="py-3 text-center">
 											<span
 												class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {service.is_active
-													? 'bg-green-100 text-green-800'
+													? 'bg-emerald-100 text-emerald-800'
 													: 'bg-red-100 text-red-800'}"
 											>
 												{service.is_active ? 'Active' : 'Inactive'}
@@ -1381,7 +1381,7 @@
 										<h3 class="font-medium">{service.name}</h3>
 										<span
 											class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {service.is_active
-												? 'bg-green-100 text-green-800'
+												? 'bg-emerald-100 text-emerald-800'
 												: 'bg-red-100 text-red-800'}"
 										>
 											{service.is_active ? 'Active' : 'Inactive'}
diff --git a/frontend/src/routes/book/+page.svelte b/frontend/src/routes/book/+page.svelte
index d8fbffe..39fe4e5 100644
--- a/frontend/src/routes/book/+page.svelte
+++ b/frontend/src/routes/book/+page.svelte
@@ -738,7 +738,7 @@
 								class="focus:ring-primary cursor-pointer rounded-lg p-4 text-left shadow-sm transition-colors hover:bg-fuchsia-50 {isServiceSelected(
 									service
 								)
-									? 'bg-fuchsia-200'
+									? 'bg-fuchsia-100'
 									: 'border-ring'}"
 								onclick={() => toggleService(service)}
 							>
@@ -849,7 +849,7 @@
 													selectedTime = slot.startTime;
 												}}
 												class={`w-full hover:bg-fuchsia-50 ${
-													slot.startTime === selectedTime ? 'bg-fuchsia-200' : ''
+													slot.startTime === selectedTime ? 'bg-fuchsia-100' : ''
 												}`}
 											>
 												{formatTime(slot.startTime)}
@@ -881,7 +881,7 @@
 			</Card.Content>
 
 			<!-- Mobile appointment summary - shown only on mobile -->
-			<div class="border-t px-6 py-4 text-center text-sm sm:hidden">
+			<div class="border-t px-6 py-4 text-center text-sm md:hidden">
 				{#if selectedDate && selectedTime}
 					Appointment for
 					<span class="font-medium">
@@ -901,7 +901,7 @@
 				<Button variant="outline" onclick={prevStep}>Back</Button>
 				<div class="flex items-center space-x-4">
 					<!-- Desktop appointment summary - hidden on mobile -->
-					<div class="hidden text-sm sm:block">
+					<div class="hidden text-sm md:block">
 						{#if selectedDate && selectedTime}
 							Appointment for
 							<span class="font-medium">
diff --git a/frontend/src/routes/prices/+page.svelte b/frontend/src/routes/prices/+page.svelte
index d061c3b..20fa132 100644
--- a/frontend/src/routes/prices/+page.svelte
+++ b/frontend/src/routes/prices/+page.svelte
@@ -74,9 +74,9 @@
 	});
 </script>
 
-<div class="mx-auto max-w-4xl p-4 sm:p-6">
-	<div class="mb-6 text-center sm:mb-8">
-		<h1 class="mb-2 text-2xl font-bold sm:text-3xl">Our Prices</h1>
+<div class="mx-auto max-w-4xl p-4 md:p-6">
+	<div class="mb-6 text-center md:mb-8">
+		<h1 class="mb-2 text-2xl font-bold md:text-3xl">Our Prices</h1>
 		<p class="text-gray-600">Professional beauty treatments with transparent pricing</p>
 	</div>
 
@@ -106,7 +106,7 @@
 							<h4 class="text-foreground font-semibold">{service.name}</h4>
 							<p class="text-muted-foreground mt-1 text-sm">{service.description}</p>
 							<!-- Duration shown on mobile -->
-							<p class="text-muted-foreground mt-2 text-sm sm:hidden">
+							<p class="text-muted-foreground mt-2 text-sm md:hidden">
 								<span class="inline-flex items-center">
 									<svg class="text-primary/70 mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
 										<path
@@ -133,7 +133,7 @@
 							<!-- Price always visible -->
 							<div class="text-primary text-lg font-semibold">{formatPrice(service.price)}</div>
 							<!-- Duration shown on desktop -->
-							<div class="text-muted-foreground hidden text-sm sm:block">
+							<div class="text-muted-foreground hidden text-sm md:block">
 								{formatDuration(service.duration_minutes)}
 							</div>
 						</div>
@@ -149,9 +149,9 @@
 
 		<!-- Important Information -->
 		<Card.Root
-			class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50 sm:mt-8"
+			class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50 md:mt-8"
 		>
-			<Card.Content class="pt-4 sm:pt-6">
+			<Card.Content class="pt-4 md:pt-6">
 				<div class="space-y-2 text-sm text-amber-900">
 					<h4 class="font-semibold text-amber-800">Important Information:</h4>
 					<ul class="space-y-1 pl-4">
@@ -169,15 +169,15 @@
 
 		<!-- Call to Action -->
 		<div
-			class="from-primary/5 to-secondary/30 mt-6 rounded-xl bg-gradient-to-br p-6 text-center sm:mt-8 sm:p-8"
+			class="from-primary/5 to-secondary/30 mt-6 rounded-xl bg-gradient-to-br p-6 text-center md:mt-8 md:p-8"
 		>
-			<h2 class="text-primary mb-4 text-lg font-semibold sm:text-xl">Ready to Book?</h2>
-			<div class="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4">
-				<Button href="/book" class="px-6 py-3 sm:px-8">Book Appointment</Button>
+			<h2 class="text-primary mb-4 text-lg font-semibold md:text-xl">Ready to Book?</h2>
+			<div class="flex flex-col gap-3 md:flex-row md:justify-center md:gap-4">
+				<Button href="/book" class="px-6 py-3 md:px-8">Book Appointment</Button>
 				<Button
 					href="/contact"
 					variant="outline"
-					class="border-primary/30 hover:bg-primary/10 px-6 py-3 sm:px-8"
+					class="border-primary/30 hover:bg-primary/10 px-6 py-3 md:px-8"
 				>
 					Get in Touch
 				</Button>