From 1d3673cdf78a0d89ca60d8aba07fef18c3b572b4 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Wed, 16 Apr 2025 12:57:13 +0200
Subject: [PATCH] Updated the 'Popup' component to be more friendly closed.

---
 src/lib/components/popup.svelte | 49 +++++++++++++++++++++++++++++----
 src/lib/css/base.css            |  2 ++
 src/lib/css/hover-card.css      |  9 ++----
 src/lib/css/navbar.css          |  2 +-
 src/lib/css/popup.css           | 33 +++++++++++++++++++++-
 5 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/popup.svelte b/src/lib/components/popup.svelte
index f06f3f6..aa7b687 100644
--- a/src/lib/components/popup.svelte
+++ b/src/lib/components/popup.svelte
@@ -1,6 +1,9 @@
 <script>
     import "$lib/css/popup.css";
     import { popupComponent } from "$lib/ts/popup.ts";
+    import { get } from "svelte/store";
+    import SvgIcon from "@jamescoyle/svelte-icon";
+    import { mdiClose } from "@mdi/js";
 
     let component = null;
 
@@ -11,16 +14,52 @@
     function close() {
         popupComponent.set(null);
     }
+
+    function onKeyDown(e) {
+        if (get(popupComponent) != null && e.key === "Escape") {
+            close();
+        }
+    }
 </script>
 
+<svelte:window on:keydown|preventDefault={onKeyDown} />
 {#if component}
+    <div
+        class="on-popup"
+        role="alertdialog"
+        tabindex="0"
+        on:keydown={(e) => {
+            if (e.key === "Escape") {
+                close();
+            }
+        }}
+    >
+        <div class="flex align-center">
+            <div
+                class="flex-end popup-close"
+                role="button"
+                tabindex="0"
+                on:click={close}
+                on:keydown={(e) => {
+                    if (e.key === "Escape") {
+                        close();
+                    }
+                }}
+            >
+                <SvgIcon type="mdi" path={mdiClose} size="35" />
+            </div>
+        </div>
+        <svelte:component this={component.component} {...component.props} />
+    </div>
     <div
         class="popup"
         role="button"
-        tabindex="0"
+        tabindex="-1"
         on:click={close}
-        on:keydown={(e) => e.key === "Escape" && close()}
-    >
-        <svelte:component this={component.component} {...component.props} />
-    </div>
+        on:keydown={(e) => {
+            if (e.key === "Escape") {
+                close();
+            }
+        }}
+    ></div>
 {/if}
diff --git a/src/lib/css/base.css b/src/lib/css/base.css
index af9dd98..4875770 100644
--- a/src/lib/css/base.css
+++ b/src/lib/css/base.css
@@ -42,6 +42,7 @@ h2 {
 
     --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(15, 11, 17, 0.1) 100%);
     --background-dark: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(224, 217, 217, 1) 100%);
+    --background-purple: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%);
     --shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
     --shadow-hover: rgba(43, 33, 48, 0.5) 0px 22px 70px 4px;
     --shadow-active: #2c1235a0 0px 20px 30px -10px;
@@ -50,6 +51,7 @@ h2 {
     --z-index-front: 1;
     --z-index-navbar: 2;
     --z-index-popup: 3;
+    --z-index-on-popup: 4;
 
     --border-min: 0.5rem;
     --border-max: 2rem;
diff --git a/src/lib/css/hover-card.css b/src/lib/css/hover-card.css
index d06c0c8..59bcf54 100644
--- a/src/lib/css/hover-card.css
+++ b/src/lib/css/hover-card.css
@@ -116,11 +116,6 @@
 /* Pop-up Hover Card */
 
 .hover-card-popup-container {
-    width: calc(100% - 12rem);
-    height: calc(100% - 12rem);
-    margin: 5rem;
-    padding: 1rem;
-    background-image: var(--background-dark);
-    border-radius: 1rem;
-    box-shadow: var(--shadow);
+    width: 100%;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/lib/css/navbar.css b/src/lib/css/navbar.css
index f8f0f78..b9e7a75 100644
--- a/src/lib/css/navbar.css
+++ b/src/lib/css/navbar.css
@@ -145,7 +145,7 @@ a {
 /* Floating */
 
 .floating {
-    background-image: linear-gradient(to right, #241d25c4 0%, #3d2b47c4 100%);
+    background-image: var(--background-purple);
     box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
     border-bottom-left-radius: 2rem;
     border-bottom-right-radius: 2rem;
diff --git a/src/lib/css/popup.css b/src/lib/css/popup.css
index 65d2d6a..e19f3a8 100644
--- a/src/lib/css/popup.css
+++ b/src/lib/css/popup.css
@@ -12,4 +12,35 @@
     z-index: var(--z-index-popup);
     -webkit-backdrop-filter: var(--popup-blur);
     backdrop-filter: var(--popup-blur);
-}
\ No newline at end of file
+}
+
+.on-popup {
+    width: 80dvw;
+    height: 80dvh;
+    position: fixed;
+    left: 10dvw;
+    top: 10dvh;
+    z-index: var(--z-index-on-popup);
+    padding: 1.2rem;
+    background-image: var(--background-dark);
+    border-radius: 1rem;
+    box-shadow: var(--shadow);
+}
+
+.popup-close {
+    cursor: pointer;
+    border-radius: 100%;
+}
+
+.popup-close svg {
+    border-radius: 100%;
+    padding: 0.3rem;
+    transition: var(--transition);
+    color: var(--color-text);
+}
+
+.popup-close svg:hover {
+    background-color: var(--color-text);
+    color: var(--color-background);
+    box-shadow: var(--shadow-hover);
+}