From 1eadac90f1c69a2271b73b20757a5278aa68c1ff Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 30 Sep 2024 18:16:08 -0400
Subject: [PATCH] Refactor input and button layout in ActivityComplete
 component

---
 .../lib/components/ActivityComplete.svelte    | 27 ++++++++++---------
 .../src/lib/components/AdventureModal.svelte  | 14 ++++++----
 .../src/routes/adventures/[id]/+page.svelte   | 12 ++++-----
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/ActivityComplete.svelte b/frontend/src/lib/components/ActivityComplete.svelte
index 9415fc4..73f76e6 100644
--- a/frontend/src/lib/components/ActivityComplete.svelte
+++ b/frontend/src/lib/components/ActivityComplete.svelte
@@ -49,18 +49,21 @@
 </script>
 
 <div class="relative">
-	<input
-		type="text"
-		class="input input-bordered w-full"
-		placeholder="Add an activity"
-		bind:value={inputVal}
-		on:keydown={(e) => {
-			if (e.key === 'Enter') {
-				e.preventDefault();
-				addActivity();
-			}
-		}}
-	/>
+	<div class="flex gap-2">
+		<input
+			type="text"
+			class="input input-bordered w-full"
+			placeholder="Add an activity"
+			bind:value={inputVal}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					addActivity();
+				}
+			}}
+		/>
+		<button type="button" class="btn btn-neutral" on:click={addActivity}>Add</button>
+	</div>
 	{#if inputVal && filteredItems.length > 0}
 		<ul class="absolute z-10 w-full bg-base-100 shadow-lg max-h-60 overflow-auto">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte
index fa44947..c9d8054 100644
--- a/frontend/src/lib/components/AdventureModal.svelte
+++ b/frontend/src/lib/components/AdventureModal.svelte
@@ -533,9 +533,14 @@
 									class="textarea textarea-bordered w-full h-32"
 								></textarea>
 								<div class="mt-2">
-									<button type="button" class="btn btn-neutral" on:click={generateDesc}
-										>Generate Description</button
+									<div
+										class="tooltip tooltip-right"
+										data-tip="Pulls excerpt from Wikipedia article matching the name of the adventure."
 									>
+										<button type="button" class="btn btn-neutral" on:click={generateDesc}
+											>Generate Description</button
+										>
+									</div>
 									<p class="text-red-500">{wikiError}</p>
 								</div>
 							</div>
@@ -558,13 +563,12 @@
 						</div>
 					</div>
 
-					<div class="collapse collapse-plus bg-base-200 mb-4">
+					<div class="collapse collapse-plus bg-base-200 mb-4 overflow-visible">
 						<input type="checkbox" />
 						<div class="collapse-title text-xl font-medium">
 							Activity Types ({adventure.activity_types?.length || 0})
 						</div>
 						<div class="collapse-content">
-							<label for="activity_types">Activity Types</label><br />
 							<input
 								type="text"
 								id="activity_types"
@@ -583,7 +587,7 @@
 							Visits ({adventure.visits.length})
 						</div>
 						<div class="collapse-content">
-							<p>hello</p>
+							<p>Coming soon!</p>
 						</div>
 					</div>
 
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index a5ffd1b..085809f 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -185,7 +185,7 @@
 									>{adventure.is_public ? 'Public' : 'Private'}</span
 								>
 							</div>
-							{#if adventure.date}
+							<!-- {#if adventure.date}
 								<div class="flex items-center gap-2">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -215,7 +215,7 @@
 											: ''}</span
 									>
 								</div>
-							{/if}
+							{/if} -->
 							{#if adventure.location}
 								<div class="flex items-center gap-2">
 									<svg
@@ -304,11 +304,11 @@
 				></div>
 				<div class="grid gap-8">
 					<div>
-						<h2 class="text-2xl font-bold mt-4">Trip Details</h2>
+						<h2 class="text-2xl font-bold mt-4">Adventure Details</h2>
 						<div class="grid gap-4 mt-4">
 							<div class="grid md:grid-cols-2 gap-4">
 								<div>
-									<p class="text-sm text-muted-foreground">Trip Type</p>
+									<p class="text-sm text-muted-foreground">Adventure Type</p>
 									<p class="text-base font-medium">
 										{adventure.type[0].toLocaleUpperCase() + adventure.type.slice(1)}
 									</p>
@@ -353,11 +353,11 @@
 												{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
 											</p>
 											<p>
-												{adventure.date
+												<!-- {adventure.date
 													? new Date(adventure.date).toLocaleDateString(undefined, {
 															timeZone: 'UTC'
 														})
-													: ''}
+													: ''} -->
 											</p>
 										</Popup>
 									</DefaultMarker>