Merge pull request #23 from lumijiez/front-v2

Front v2

src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json

@@ -16,6 +16,7 @@
 				"js-cookie": "^3.0.5",
 				"svelte-cookie": "^1.0.1",
 				"svelte-fa": "^3.0.4",
+				"svelte-simple-modal": "^1.6.1",
 				"svelte-spa-router": "^3.3.0"
 			},
 			"devDependencies": {
@@ -45,7 +46,6 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
 			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.0",
 				"@jridgewell/trace-mapping": "^0.3.9"
@@ -547,7 +547,6 @@
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.0.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -561,7 +560,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
 			"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -570,7 +568,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -578,14 +575,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-			"dev": true
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.19",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
 			"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -735,14 +730,12 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
-			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA=="
-			"dev": true
 		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
 			"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -809,7 +802,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -833,7 +825,6 @@
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
 			"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -894,7 +885,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -965,7 +955,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1030,7 +1019,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1298,7 +1286,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -1607,7 +1594,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -1705,8 +1691,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-			"dev": true
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -1745,7 +1730,6 @@
 			"version": "0.30.4",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
 			"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@@ -1756,8 +1740,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-			"dev": true
 		},
 		"node_modules/mime": {
 			"version": "3.0.0",
@@ -1949,7 +1932,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -2295,7 +2277,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2340,7 +2321,6 @@
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz",
 			"integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -2409,6 +2389,14 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-simple-modal": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.6.1.tgz",
+			"integrity": "sha512-D4/Z7LQ6ThawYb7FlAeS/qGbcwVlqzRHn1zZgWPlEK0cp4l2UMcscqel58mp+gTuk4UX9gl516GYXcHFvuyslA==",
+			"peerDependencies": {
+				"svelte": "^3.30.0 || ^4.0.0"
+			}
+		},
 		"node_modules/svelte-spa-router": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",

src/main/java/com/faf223/expensetrackerfaf/web/package.json

@@ -32,6 +32,7 @@
 		"js-cookie": "^3.0.5",
 		"svelte-cookie": "^1.0.1",
 		"svelte-fa": "^3.0.4",
+		"svelte-simple-modal": "^1.6.1",
 		"svelte-spa-router": "^3.3.0"
 	}
 }

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

@@ -1,7 +1,7 @@
 <script>
-	import DashHeader from "./DashHeader.svelte";
+	import DashHeader from "./other/DashHeader.svelte";
-	import DataMenu from "./DataMenu.svelte";
+	import DataMenu from "./other/DataMenu.svelte";
-	import QuickInfobar from "./QuickInfobar.svelte";
+	import QuickInfobar from "./other/QuickInfobar.svelte";
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
 
@@ -9,6 +9,7 @@
             if (getCookie('access_token') === null ) {
                     window.location.href = '/auth/login';
             }
+            console.log(getCookie('access_token'));
     })
 </script>
 

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

@@ -2,9 +2,11 @@
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
+    import ContentExpense from "./contents/ContentExpense.svelte";
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -26,12 +28,14 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <h2 id="text">Expenses</h2>
+    <ContentExpense />
-    <div id="expenseList">
+
+    <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -44,32 +48,21 @@
     </div>
 </div>
 
+
 <style>
-    #text {
-        padding: 0 0 10px;
-        margin: 0;
-    }
-
     #expenseInfo {
-        flex: 1;
+        display: flex;
-        border-radius: 10px;
+        flex-direction: column;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-
-    h2 {
-        position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
     }
 
     #expenseList {
         margin-top: 10px;
         scrollbar-width: none;
+        flex: 1;
+        border-radius: 10px;
+        margin: 10px;
+        overflow-y: auto;
+        max-height: 100%;
     }
 
     #expenseList::-webkit-scrollbar {

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

@@ -1,10 +1,13 @@
 <script>
+
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import {getCookie} from "svelte-cookie";
+    import ContentIncome from "./contents/ContentIncome.svelte";
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -26,12 +29,14 @@
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#incomeInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <h2 id="text">Incomes</h2>
+    <ContentIncome />
-    <div id="incomeList">
+
+    <div id="incomeList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -45,12 +50,14 @@
 </div>
 
 <style>
-    #text {
+    #incomeInfo {
-        padding: 0 0 10px;
+        display: flex;
-        margin: 0;
+        flex-direction: column;
     }
 
-    #incomeInfo {
+    #incomeList {
+        margin-top: 10px;
+        scrollbar-width: none;
         flex: 1;
         border-radius: 10px;
         margin: 10px;
@@ -58,19 +65,6 @@
         max-height: 100%;
     }
 
-    h2 {
-        position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
-    }
-
-    #incomeList {
-        margin-top: 10px;
-    }
-
     ul {
         list-style: none;
         padding: 0;
@@ -89,4 +83,7 @@
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
 
+    #incomeList::-webkit-scrollbar {
+        display: none;
+    }
 </style>

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

@@ -0,0 +1,64 @@
+<script>
+    import Modal from '../modals/Modal.svelte'
+    let showModal;
+</script>
+
+<div id="exp">
+    <h2>Expenses</h2>
+    <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        +
+    </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 {
+        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;
+        background-color: #f2f2f2;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        margin: 0;
+    }
+</style>

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

@@ -0,0 +1,115 @@
+<script>
+    import Modal from '../modals/Modal.svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import axios from 'axios';
+    import { getCookie } from "svelte-cookie";
+
+    let showModal;
+    let amount;
+
+    const selectedIncomeId = writable('');
+
+    onMount(async () => {
+        try {
+            const token = getCookie('access_token');
+
+            const config = {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            };
+
+            const response = await axios.get('http://localhost:8081/incomes/categories', config);
+            incomeOptions.set(response.data);
+            console.log(response.data);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    });
+
+    const incomeOptions = writable([]);
+
+    const createIncome = async () => {
+        const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
+        const data = {
+            incomeCategory: selectedIncome.id,
+            amount: $amount,
+        };
+
+        try {
+            const token = getCookie('access_token');
+            console.log(token);
+            const response = await axios.post('http://localhost:8081/incomes', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            console.log(response.data);
+
+            if (response.status === 200) {
+                console.log("cool");
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+</script>
+
+<div id="inc">
+    <h2>Incomes</h2>
+    <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        +
+    </div>
+    <Modal bind:showModal>
+        <div>
+            <label for="amount">Amount:</label>
+            <input type="text" id="amount" bind:value={amount} />
+
+            <label for="income">Select Income:</label>
+            <select id="income" bind:value={$selectedIncomeId}>
+                {#each $incomeOptions as income (income.id)}
+                    {#if income.id !== undefined}
+                        <option value={income.id}>{income.name}</option>
+                    {/if}
+                {/each}
+            </select>
+
+            <button on:click={createIncome}>Submit</button>
+        </div>
+    </Modal>
+</div>
+
+<style>
+    #inc {
+        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;
+        background-color: #f2f2f2;
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
+        margin: 0;
+    }
+</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/other/DataMenu.svelte

@@ -1,9 +1,9 @@
 <script>
-    import Graph1 from './graphs/Graph1.svelte';
+    import Graph1 from '../graphs/Graph1.svelte';
-    import Graph2 from './graphs/Graph2.svelte';
+    import Graph2 from '../graphs/Graph2.svelte';
-    import Graph3 from './graphs/Graph3.svelte';
+    import Graph3 from '../graphs/Graph3.svelte';
-    import Expenses from "./Expenses.svelte";
+    import Expenses from "../infolists/Expenses.svelte";
-    import Incomes from "./Incomes.svelte";
+    import Incomes from "../infolists/Incomes.svelte";
 </script>
 
 <div id="dataMenu">