Replaced svelte-simple-modal with own implementation of modals

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte

@@ -1,10 +1,8 @@
 <script>
-    import Modal from 'svelte-simple-modal';
-    import Content from "./contents/ContentExpense.svelte";
-
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
+    import ContentExpense from "./contents/ContentExpense.svelte";
 
     let data = [];
     let parentHeight;
@@ -35,9 +33,7 @@
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <div id="modal">
+    <ContentExpense />
-        <Modal><Content /></Modal>
-    </div>
 
     <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte

@@ -1,10 +1,10 @@
 <script>
-    import Content from './contents/ContentIncome.svelte';
-    import Modal from 'svelte-simple-modal';
 
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import {getCookie} from "svelte-cookie";
+    import ContentExpense from "./contents/ContentExpense.svelte";
+    import ContentIncome from "./contents/ContentIncome.svelte";
 
     let data = [];
     let parentHeight;
@@ -35,9 +35,7 @@
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <div id="modal">
+    <ContentIncome />
-        <Modal><Content /></Modal>
-    </div>
 
     <div id="incomeList" style="max-height: {listParentHeight}px;">
         <ul>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte

@@ -1,33 +1,64 @@
 <script>
-    import { getContext } from 'svelte';
+    import Modal from '../modals/Modal.svelte'
-    import Popup from '../popups/IncomePopup.svelte';
+    let showModal;
-    const { open } = getContext('simple-modal');
-    const showSurprise = () => open(Popup, { message: "It's EXOENSE!" });
 </script>
 
 <div id="exp">
     <h2>Expenses</h2>
-    <div id="openModal" role="button"
+    <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
-         tabindex="0"
+        +
-         on:click={showSurprise}
-         on:keydown={() => console.log("keydown")}>
-        Log out
     </div>
+    <Modal bind:showModal>
+        <h2 slot="header">
+            modal
+            <small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+        </h2>
+
+        <ol class="definition-list">
+            <li>of or relating to modality in logic</li>
+            <li>
+                containing provisions as to the mode of procedure or the manner of taking effect —used of a
+                contract or legacy
+            </li>
+            <li>of or relating to a musical mode</li>
+            <li>of or relating to structure as opposed to substance</li>
+            <li>
+                of, relating to, or constituting a grammatical form or category characteristically indicating
+                predication
+            </li>
+            <li>of or relating to a statistical mode</li>
+        </ol>
+
+        <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+    </Modal>
 </div>
 
 <style>
     #exp {
-        position: sticky;
+        padding-left: 20px;
+        padding-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .plus-button {
+        font-size: xx-large;
+        background: none;
+        cursor: pointer;
+        border-radius: 10px;
+        transition: background 0.3s ease;
+    }
+
+    .plus-button:hover {
+        background: rgba(128, 128, 128, 0.5);
     }
 
     #openModal {
         top: 0;
-        position: sticky;
         background-color: #f2f2f2;
-        padding: 10px;
         border-radius: 10px 10px 0 0;
         z-index: 1;
-        padding: 0 0 10px;
         margin: 0;
     }
-</style>
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte

@@ -1,33 +1,64 @@
 <script>
-    import { getContext } from 'svelte';
+    import Modal from '../modals/Modal.svelte'
-    import Popup from '../popups/IncomePopup.svelte';
+    let showModal;
-    const { open } = getContext('simple-modal');
-    const showSurprise = () => open(Popup, { message: "It's aINCOME!" });
 </script>
 
-<div id="inc">
+<div id="exp">
-    <h2>Incomes</h2>
+    <h2>Expenses</h2>
-    <div id="openModal" role="button"
+    <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
-         tabindex="0"
+        +
-         on:click={showSurprise}
-         on:keydown={() => console.log("keydown")}>
-        Log out
     </div>
+    <Modal bind:showModal>
+        <h2 slot="header">
+            modal
+            <small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+        </h2>
+
+        <ol class="definition-list">
+            <li>of or relating to modality in logic</li>
+            <li>
+                containing provisions as to the mode of procedure or the manner of taking effect —used of a
+                contract or legacy
+            </li>
+            <li>of or relating to a musical mode</li>
+            <li>of or relating to structure as opposed to substance</li>
+            <li>
+                of, relating to, or constituting a grammatical form or category characteristically indicating
+                predication
+            </li>
+            <li>of or relating to a statistical mode</li>
+        </ol>
+
+        <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+    </Modal>
 </div>
 
 <style>
-    #inc {
+    #exp {
-        position: sticky;
+        padding-left: 20px;
+        padding-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .plus-button {
+        font-size: xx-large;
+        background: none;
+        cursor: pointer;
+        border-radius: 10px;
+        transition: background 0.3s ease;
+    }
+
+    .plus-button:hover {
+        background: rgba(128, 128, 128, 0.5);
     }
 
     #openModal {
         top: 0;
-        position: sticky;
         background-color: #f2f2f2;
-        padding: 10px;
         border-radius: 10px 10px 0 0;
         z-index: 1;
-        padding: 0 0 10px;
         margin: 0;
     }
-</style>
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte

@@ -0,0 +1,64 @@
+<script>
+    export let showModal; // boolean
+
+    let dialog; // HTMLDialogElement
+
+    $: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+        bind:this={dialog}
+        on:close={() => (showModal = false)}
+        on:click|self={() => dialog.close()}
+>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+        <slot name="header" />
+        <hr />
+        <slot />
+        <hr />
+        <!-- svelte-ignore a11y-autofocus -->
+        <button autofocus on:click={() => dialog.close()}>close modal</button>
+    </div>
+</dialog>
+
+<style>
+    dialog {
+        max-width: 32em;
+        border-radius: 0.2em;
+        border: none;
+        padding: 0;
+    }
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    dialog > div {
+        padding: 1em;
+    }
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+    button {
+        display: block;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/ExpensePopup.svelte

@@ -1,5 +0,0 @@
-<script>
-    export let message = 'Hi';
-</script>
-
-<p>🎉 {message} 🍾</p>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/popups/IncomePopup.svelte

@@ -1,5 +0,0 @@
-<script>
-    export let message = 'Hi';
-</script>
-
-<p>🎉 {message} 🍾</p>