From 7f5b969dbf657c126f2b3c5db199ad4ab9ff0a3c Mon Sep 17 00:00:00 2001
From: Sean Morley <mail@seanmorley.com>
Date: Wed, 30 Jul 2025 08:06:04 -0400
Subject: [PATCH] feat: update button styles and add back and close
 functionality in location components

---
 .../lib/components/NewLocationModal.svelte    |  1 +
 .../locations/LocationDetails.svelte          |  2 +-
 .../components/locations/LocationMedia.svelte |  4 ++--
 .../locations/LocationQuickStart.svelte       |  2 +-
 .../locations/LocationVisits.svelte           | 23 +++++++++++++++++++
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/NewLocationModal.svelte b/frontend/src/lib/components/NewLocationModal.svelte
index 1608d0f..0c98d8c 100644
--- a/frontend/src/lib/components/NewLocationModal.svelte
+++ b/frontend/src/lib/components/NewLocationModal.svelte
@@ -283,6 +283,7 @@
 					steps[3].selected = false;
 					steps[2].selected = true;
 				}}
+				on:close={() => close()}
 			/>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/locations/LocationDetails.svelte b/frontend/src/lib/components/locations/LocationDetails.svelte
index 08aa3fa..dac80a0 100644
--- a/frontend/src/lib/components/locations/LocationDetails.svelte
+++ b/frontend/src/lib/components/locations/LocationDetails.svelte
@@ -777,7 +777,7 @@
 
 		<!-- Action Buttons -->
 		<div class="flex gap-3 justify-end pt-4">
-			<button class="btn btn-ghost gap-2" on:click={handleBack}>
+			<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
 				<ArrowLeftIcon class="w-5 h-5" />
 				Back
 			</button>
diff --git a/frontend/src/lib/components/locations/LocationMedia.svelte b/frontend/src/lib/components/locations/LocationMedia.svelte
index a32df67..f6f896b 100644
--- a/frontend/src/lib/components/locations/LocationMedia.svelte
+++ b/frontend/src/lib/components/locations/LocationMedia.svelte
@@ -746,8 +746,8 @@
 		</div>
 
 		<!-- Action Buttons -->
-		<div class="flex gap-3 justify-between pt-4">
-			<button class="btn btn-ghost gap-2" on:click={handleBack}>
+		<div class="flex gap-3 justify-end pt-4">
+			<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
 				<ArrowLeftIcon class="w-5 h-5" />
 				Back
 			</button>
diff --git a/frontend/src/lib/components/locations/LocationQuickStart.svelte b/frontend/src/lib/components/locations/LocationQuickStart.svelte
index 8167096..c2bc8b0 100644
--- a/frontend/src/lib/components/locations/LocationQuickStart.svelte
+++ b/frontend/src/lib/components/locations/LocationQuickStart.svelte
@@ -447,7 +447,7 @@
 
 	<!-- Action Buttons -->
 	<div class="flex gap-3 pt-4">
-		<button class="btn btn-ghost flex-1" on:click={() => dispatch('cancel')}>
+		<button class="btn btn-neutral-200 flex-1" on:click={() => dispatch('cancel')}>
 			{$t('common.cancel') || 'Cancel'}
 		</button>
 		<button class="btn btn-primary flex-1" on:click={continueWithLocation}>
diff --git a/frontend/src/lib/components/locations/LocationVisits.svelte b/frontend/src/lib/components/locations/LocationVisits.svelte
index 0482a56..f82da7c 100644
--- a/frontend/src/lib/components/locations/LocationVisits.svelte
+++ b/frontend/src/lib/components/locations/LocationVisits.svelte
@@ -5,6 +5,7 @@
 	import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
 	import { onMount } from 'svelte';
 	import { isAllDay } from '$lib';
+	import { createEventDispatcher } from 'svelte';
 
 	// Icons
 	import CalendarIcon from '~icons/mdi/calendar';
@@ -16,6 +17,7 @@
 	import AlertIcon from '~icons/mdi/alert';
 	import CheckIcon from '~icons/mdi/check';
 	import SettingsIcon from '~icons/mdi/cog';
+	import ArrowLeftIcon from '~icons/mdi/arrow-left';
 
 	// Props
 	export let collection: Collection | null = null;
@@ -28,6 +30,8 @@
 	export let visits: (Visit | TransportationVisit)[] | null = null;
 	export let objectId: string;
 
+	const dispatch = createEventDispatcher();
+
 	// Types
 	type Visit = {
 		id: string;
@@ -316,6 +320,14 @@
 		}
 	}
 
+	function handleBack() {
+		dispatch('back');
+	}
+
+	function handleClose() {
+		dispatch('close');
+	}
+
 	// Lifecycle
 	onMount(async () => {
 		if ((type === 'transportation' || type === 'lodging') && utcStartDate) {
@@ -598,5 +610,16 @@
 				</div>
 			{/if}
 		{/if}
+		<div class="flex gap-3 justify-end pt-4">
+			<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
+				<ArrowLeftIcon class="w-5 h-5" />
+				Back
+			</button>
+
+			<button class="btn btn-primary gap-2" on:click={handleClose}>
+				<CheckIcon class="w-5 h-5" />
+				Done
+			</button>
+		</div>
 	</div>
 </div>