From 6dd5389f58a11649565204964914fe8b07263548 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 9 Feb 2025 23:05:28 +0100
Subject: [PATCH] fix modal positioning, swaps arrow with close icon

---
 src/lib/components/Modal.svelte              |  8 +++++---
 src/lib/components/modals/ModalHeader.svelte |  4 ++--
 src/lib/icons/ArrowLeft.svelte               | 17 -----------------
 src/lib/icons/Close.svelte                   | 18 ++++++++++++++++++
 4 files changed, 25 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/icons/Close.svelte

diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index 6b901a3..f477731 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -56,9 +56,8 @@
 		top: 0;
 		left: 100vw;
 		background-color: var(--background);
-		height: 100vh;
-		height: -webkit-fill-available;
-		width: calc(100vw - 2rem);
+		height: 0;
+		width: 0px;
 		transition: left 400ms ease;
 		padding: 0 1rem;
 		overflow-y: scroll;
@@ -66,6 +65,9 @@
 		&.open {
 			position: fixed;
 			left: 0;
+			height: 100vh;
+			height: -webkit-fill-available;
+			width: calc(100vw - 2rem);
 		}
 	}
 </style>
diff --git a/src/lib/components/modals/ModalHeader.svelte b/src/lib/components/modals/ModalHeader.svelte
index 13c6191..25e5317 100644
--- a/src/lib/components/modals/ModalHeader.svelte
+++ b/src/lib/components/modals/ModalHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { resetModal } from '$lib/store';
-	import ArrowLeft from '$lib/icons/ArrowLeft.svelte';
+	import Close from '$lib/icons/Close.svelte';
 
 	export let title: string;
 	export let subtitle: string;
@@ -40,7 +40,7 @@
 
 <div class="top">
 	<button class="back" on:click={resetModal} aria-label="Close">
-		<ArrowLeft fill="var(--color)" />
+		<Close />
 	</button>
 	<span id="header-title" bind:this={headerTitleEl}>{title}</span>
 </div>
diff --git a/src/lib/icons/ArrowLeft.svelte b/src/lib/icons/ArrowLeft.svelte
index 6305402..bc61cb5 100644
--- a/src/lib/icons/ArrowLeft.svelte
+++ b/src/lib/icons/ArrowLeft.svelte
@@ -2,23 +2,6 @@
 	export let fill = 'var(--color)';
 </script>
 
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 768 768">
-<path fill="var(--color)" d="M768 352h-658.7l177.4-177.4-45.3-45.3-232 232c-12.5 12.5-12.5 32.8 0 45.3l232 232 45.3-45.3-177.4-177.3h658.7v-64z"></path>
-</svg> -->
-
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21.0547 17.9199">
- <g>
-  <path d="M0 8.95508C0 9.27734 0.126953 9.64844 0.498047 10L8.20312 17.2754C8.67188 17.7148 9.0625 17.9102 9.54102 17.9102C10.2051 17.9102 10.6836 17.4219 10.6836 16.7676L10.6836 13.0371L18.6133 13.0371C20.1562 13.0371 21.0547 12.1582 21.0547 10.6445L21.0547 7.27539C21.0547 5.76172 20.1562 4.88281 18.6133 4.88281L10.6836 4.88281L10.6836 1.19141C10.6836 0.537109 10.2051 0 9.52148 0C9.04297 0 8.7207 0.205078 8.20312 0.693359L0.498047 7.90039C0.117188 8.26172 0 8.62305 0 8.95508ZM1.74805 8.95508C1.74805 8.89648 1.77734 8.83789 1.85547 8.76953L8.80859 2.09961C8.85742 2.06055 8.91602 2.02148 8.97461 2.02148C9.0625 2.02148 9.11133 2.08008 9.11133 2.1582L9.11133 6.03516C9.11133 6.25977 9.21875 6.35742 9.44336 6.35742L18.5938 6.35742C19.2188 6.35742 19.5801 6.71875 19.5801 7.35352L19.5801 10.5664C19.5801 11.2012 19.2188 11.5625 18.5938 11.5625L9.44336 11.5625C9.21875 11.5625 9.11133 11.6602 9.11133 11.8848L9.11133 15.6641C9.11133 15.752 9.0625 15.8105 8.98438 15.8105C8.92578 15.8105 8.86719 15.7812 8.81836 15.7227L1.85547 9.14062C1.77734 9.0625 1.74805 9.01367 1.74805 8.95508Z"/>
- </g>
-</svg> -->
-
-<!-- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 21.0547 17.9199">
-
- <g>
-  <path d="M0 8.95508C0 9.27734 0.126953 9.64844 0.498047 10L8.20312 17.2754C8.67188 17.7148 9.0625 17.9102 9.54102 17.9102C10.2051 17.9102 10.6836 17.4219 10.6836 16.7676L10.6836 12.8125L18.8086 12.8125C20.2246 12.8125 21.0547 12.0117 21.0547 10.6152L21.0547 7.30469C21.0547 5.9082 20.2246 5.10742 18.8086 5.10742L10.6836 5.10742L10.6836 1.19141C10.6836 0.537109 10.2051 0 9.52148 0C9.04297 0 8.7207 0.205078 8.20312 0.693359L0.498047 7.90039C0.117188 8.26172 0 8.62305 0 8.95508Z"fill-opacity="0.85"/>
- </g>
-</svg>
- -->
 <svg
 	version="1.1"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/lib/icons/Close.svelte b/src/lib/icons/Close.svelte
new file mode 100644
index 0000000..618f677
--- /dev/null
+++ b/src/lib/icons/Close.svelte
@@ -0,0 +1,18 @@
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 0 768 768"
+>
+	<g id="icomoon-ignore" />
+	<path
+		d="M670.6 142.6l-45.2-45.2-241.4 241.3-241.4-241.3-45.2 45.2 241.3 241.4-241.3 241.4 45.2 45.2 241.4-241.3 241.4 241.3 45.2-45.2-241.3-241.4z"
+	/>
+</svg>
+
+<style>
+	svg {
+		fill: var(--color);
+	}
+</style>