✨ Finished new editor and deprecated old endpoints

frontend/src/lib/editor/uploader.svelte

@@ -6,6 +6,7 @@
 	import ImageEditor from '@uppy/image-editor';
 	import Dashboard from '@uppy/dashboard';
 	import Compressor from '@uppy/compressor';
+	import { fade } from 'svelte/transition';
 
 	// CSS imports
 	import '@uppy/core/dist/style.css';
@@ -43,30 +44,53 @@
 	uppy.on('complete', (res) => {
 		data.questions[
 			selected_question
-		].image = `https://${window.location.hostname}/api/v1/storage/download/${image_id}`;
+		].image = `${window.location.origin}/api/v1/storage/download/${image_id}`;
 		modalOpen = false;
 	});
 	console.log(edit_id);
 </script>
 
 {#if modalOpen}
-	<div class="w-full h-full absolute top-0 left-0 bg-opacity-60 z-20 flex justify-center">
+	<div
+		class="w-full h-full absolute top-0 left-0 bg-opacity-60 z-20 flex justify-center"
+		transition:fade
+	>
 		<div>
 			<button
 				type="button"
+				class="rounded-t-lg bg-black text-white px-1"
 				on:click={() => {
 					modalOpen = false;
-				}}>Close</button
-			>
+				}}
+				>Close
+			</button>
 			<div>
 				<SvelteDashboard {uppy} width="100%" {props} />
 			</div>
 		</div>
 	</div>
-{:else}
+{/if}
+<div class="flex justify-center w-full pt-10" transition:fade>
 	<button
+		class="rounded-lg p-4 flex justify-center bg-transparent border-gray-500 border-2 w-1/2 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
+		type="button"
 		on:click={() => {
 			modalOpen = true;
-		}}>Add Image</button
-	>
-{/if}
+		}}
+		><span class="italic">Add Image</span>
+		<svg
+			class="w-6 h-6 inline-block"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+			/>
+		</svg>
+	</button>
+</div>