feat(client): add modal components (#33)

client/src/components/ui/Modal.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import Button from './Button.svelte';
+    import Close from '../icons/Close.svelte';
+
+    export let showModal = false;
+
+    let dialog: HTMLDialogElement | null;
+
+    $: showModal ? dialog?.show() : dialog?.close();
+</script>
+
+<dialog bind:this={dialog} on:close>  
+    <div class="column">
+        <div>
+            <div id="headerIcon">
+                <div>
+                    <slot name="header" />
+                </div>
+                <div>
+                    <Close on:click={() => showModal = false} />
+                </div>
+        </div>
+        <div class="column">
+            <hr />
+            <slot />
+            <hr />
+            <div id="buttons">
+                <slot name="buttons">
+                    <Button on:click={() => showModal = false}>Close Modal</Button>
+                </slot>
+            </div>
+        </div>
+    </div>
+</dialog>
+
+<style>
+    /* https://svelte.dev/examples/modal */
+    @import url('../../pages/global.css');
+
+    dialog {
+        border-radius: var(--border-radius);
+        border: none;
+        padding: 0;
+    }
+
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    
+    dialog > div {
+        padding: var(--spacing-large);
+    }
+
+    dialog[open] {
+        animation: zoom var(--animation-length) cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    dialog[open]::backdrop {
+		animation: fade var(--animation-length) ease-out;
+	}
+
+    .column {
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    #headerIcon {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    #buttons {
+        display: flex;
+        justify-content: space-evenly;
+    }
+</style>

client/src/pages/global.css

@@ -47,3 +47,21 @@ p {
     background-color: var(--danger-color);
 }
 
+@keyframes zoom {
+    from {
+        transform: scale(0.95)
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
+
+@keyframes fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}