From 72dada18ebb794eb055437b55b9e9abce980b2aa Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Mon, 31 Aug 2026 18:20:01 +0200
Subject: [PATCH] feat: modernize popup component

---
 web/src/components/PopupElement.vue | 57 +++++++++++++++++++----------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/web/src/components/PopupElement.vue b/web/src/components/PopupElement.vue
index 2724bdf..f3dd36c 100644
--- a/web/src/components/PopupElement.vue
+++ b/web/src/components/PopupElement.vue
@@ -1,10 +1,9 @@
 <template>
-    <div>
-        <div :class="'popup-backdrop' + ( isOpen ? '' : ' hidden' )">
-            <div class="popup-main">
-                <span v-if="props.showClose" class="material-symbols-outlined close-icon" @click="closePopup()">close</span>
-                <slot></slot>
-            </div>
+    <div :class="['popup', isOpen ? undefined : 'hidden' ]">
+        <div class="popup-backdrop"></div>
+        <div class="popup-main">
+            <i v-if="props.showClose" class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
+            <slot></slot>
         </div>
     </div>
 </template>
@@ -23,43 +22,63 @@
 
 
 <style scoped lang="scss">
-    .popup-backdrop {
+    .popup {
+        position: fixed;
         width: 100vw;
         height: 100vh;
-        position: fixed;
-        background-color: var( --overlay-color );
         top: 0;
         left: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        overflow: hidden;
-        transition: all 0.5s;
-        transform: scale(1);
-        z-index: 99;
+        z-index: 1000;
+        transition-delay: 0;
 
-        &.hidden {
-            transform: scale(0);
+        .popup-backdrop {
+            width: 100vw;
+            height: 100vh;
+            position: absolute;
+            background-color: var( --overlay-color );
+            top: 0;
+            left: 0;
+            overflow: hidden;
+            transition: all 0.5s;
         }
 
-        >.popup-main {
-            width: 40%;
-            height: 50%;
+        .popup-main {
+            width: fit-content;
+            height: fit-content;
             background-color: var( --secondary-color );
             padding: 2.5%;
             border-radius: 20px;
+            transform: scale(1);
             position: relative;
             overflow-y: scroll;
             display: block;
+            transition: transform 0.5s ease, opacity 0.5s ease;
 
             >.close-icon {
                 position: absolute;
                 top: 20px;
                 right: 20px;
-                font-size: 2rem;
+                font-size: 1.5rem;
                 cursor: pointer;
                 user-select: none;
             }
         }
+
+        &.hidden {
+            top: -100vh;
+            transition-delay: 0.5s;
+
+            .popup-main {
+                transform: scale(1.25);
+                opacity: 0;
+            }
+
+            .popup-backdrop {
+                opacity: 0;
+            }
+        }
     }
 </style>