From e1d1e9fbe594a9e522f01cdc877141f59720cc69 Mon Sep 17 00:00:00 2001
From: Ushie <ushiekane@gmail.com>
Date: Sun, 15 Jan 2023 18:56:09 +0300
Subject: [PATCH] feat: "how does this work" modal

---
 src/lib/components/atoms/Dialogue.svelte | 140 +++++++++++++++++++++++
 src/routes/polling/+page.svelte          |  29 ++++-
 2 files changed, 166 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/atoms/Dialogue.svelte

diff --git a/src/lib/components/atoms/Dialogue.svelte b/src/lib/components/atoms/Dialogue.svelte
new file mode 100644
index 0000000..97d24fd
--- /dev/null
+++ b/src/lib/components/atoms/Dialogue.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { quadInOut } from 'svelte/easing';
+	export let modalOpen = false;
+	export let fullscreen = false;
+</script>
+
+{#if modalOpen}
+	<div
+		class="overlay"
+		on:click={() => (modalOpen = !modalOpen)}
+		on:keypress={() => (modalOpen = !modalOpen)}
+		transition:fade={{ easing: quadInOut, duration: 150 }}
+	/>
+
+	<div
+		class="modal"
+		role="dialog"
+		class:fullscreen
+		aria-modal="true"
+		transition:fade={{ easing: quadInOut, duration: 150 }}
+	>
+		<div class="top">
+			<div class="title">
+				{#if fullscreen}
+					<button on:click={() => (modalOpen = !modalOpen)}>
+						<img src="../icons/back.svg" id="back" alt="back" />
+					</button>
+				{/if}
+				{#if $$slots.icon}
+					<slot name="icon" />
+				{/if}
+				{#if $$slots.title}
+					<h1>
+						<slot name="title" />
+					</h1>
+				{/if}
+			</div>
+
+			{#if $$slots.description}
+				<p>
+					<slot name="description" />
+				</p>
+			{/if}
+		</div>
+
+		<div class="slot"><slot /></div>
+	</div>
+{/if}
+
+<style>
+	p {
+		color: var(--white);
+	}
+
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 999;
+	}
+
+	.top {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 20px;
+	}
+
+	.title {
+		position: sticky;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background-color: var(--grey-six);
+		margin-bottom: 8px;
+	}
+
+	.modal {
+		position: fixed;
+		width: min(85%, 425px);
+		max-height: 75%;
+		overflow-y: scroll;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		border-radius: 26px;
+		background-color: var(--grey-six);
+		display: flex;
+		user-select: none;
+		gap: 5%;
+		white-space: normal;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		z-index: 1001;
+		padding: 32px;
+		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+	}
+
+	button {
+		padding: 0;
+		margin: 0;
+		border: none;
+		background-color: transparent;
+		display: flex;
+		align-items: center;
+	}
+
+	#back {
+		height: 24px;
+	}
+
+	.fullscreen {
+		max-height: 100%;
+		width: 100%;
+		border-radius: 0;
+	}
+	.fullscreen .title {
+		justify-content: flex-start;
+	}
+
+	.slot {
+		display: flex;
+		flex-direction: column;
+		align-content: center;
+	}
+
+	.modal::-webkit-scrollbar {
+		display: none;
+	}
+</style>
diff --git a/src/routes/polling/+page.svelte b/src/routes/polling/+page.svelte
index f9f1382..b83421c 100644
--- a/src/routes/polling/+page.svelte
+++ b/src/routes/polling/+page.svelte
@@ -3,9 +3,11 @@
 	import { fly } from 'svelte/transition';
 	import { expoOut } from 'svelte/easing';
 
+	import Modal from '$lib/components/atoms/Dialogue.svelte';
 	import LogoOption from '$lib/components/atoms/LogoOption.svelte';
 	import Button from '$lib/components/atoms/Button.svelte';
 
+	let modalOpen = false;
 	let selected: Array<string> = [];
 	let logos: Array<any> = [];
 	let transitionDirection = 5;
@@ -146,9 +148,7 @@
 				{selected.length}/{logos.length} selected · Page {Number(currentPage) + 1}/{logoPages + 1}
 			</h2>
 			<div class="top-custom-button-container">
-				<a href="https://hhh.com" target="_blank" tabindex="-1" rel="noreferrer">
-					<button>How does this work?</button>
-				</a>
+				<button on:click={() => (modalOpen = !modalOpen)}>How does this work?</button>
 				<button on:click={clearLogos}>Clear All</button>
 			</div>
 		</div>
@@ -225,6 +225,24 @@
 	</div>
 </main>
 
+<Modal bind:modalOpen>
+	<svelte:fragment slot="title">How does this work?</svelte:fragment>
+	<svelte:fragment slot="description"
+		>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+		laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+		voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+		non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</svelte:fragment
+	>
+	<div class="buttons">
+		<Button
+			on:click={() => {
+				modalOpen = false;
+			}}>Understood</Button
+		>
+	</div>
+</Modal>
+
 <style>
 	.options-grid {
 		display: grid;
@@ -263,6 +281,11 @@
 		border-top: 1px solid var(--grey-three);
 	}
 
+	.buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+
 	@media screen and (orientation: landscape) and (min-width: 1500px) and (min-height: 950px) {
 		.buttons-container {
 			justify-content: center;