From 14b2ba2ae3b993a0214acfd05d40ba2cffb42169 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 19 Aug 2024 13:58:14 -0400
Subject: [PATCH] Change close button design

---
 .../lib/components/ImageDisplayModal.svelte   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ImageDisplayModal.svelte b/frontend/src/lib/components/ImageDisplayModal.svelte
index 1a03cbe..f4c8661 100644
--- a/frontend/src/lib/components/ImageDisplayModal.svelte
+++ b/frontend/src/lib/components/ImageDisplayModal.svelte
@@ -3,7 +3,6 @@
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
 	let modal: HTMLDialogElement;
-	import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
 	import type { Adventure } from '$lib/types';
 
 	export let image: string;
@@ -36,16 +35,41 @@
 	}
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <dialog id="my_modal_1" class="modal" on:click={handleClickOutside}>
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<div class="modal-box w-11/12 max-w-5xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<div class="modal-header flex justify-between items-center mb-4">
 			<h3 class="font-bold text-2xl">{adventure.name}</h3>
-			<button class="close-btn" on:click={close} aria-label="Close" style="font-size: 3rem">&times;</button>
+			<button class="btn btn-circle btn-neutral" on:click={close}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
 		</div>
-		<div class="flex justify-center items-center" style="display: flex; justify-content: center; align-items: center;">
-			<img src={image} alt={adventure.name} style="max-width: 100%; max-height: 75vh; object-fit: contain;" />
+		<div
+			class="flex justify-center items-center"
+			style="display: flex; justify-content: center; align-items: center;"
+		>
+			<img
+				src={image}
+				alt={adventure.name}
+				style="max-width: 100%; max-height: 75vh; object-fit: contain;"
+			/>
 		</div>
 	</div>
 </dialog>