From 0a7747c497b227a1b0b432012167c2fbe1803ce8 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 27 Jul 2024 12:53:57 +0600
Subject: [PATCH] web/dialogs: move duplicated dialog css to parent

---
 web/src/components/dialog/DialogHolder.svelte | 23 ++++++++++++++++++
 web/src/components/dialog/PickerDialog.svelte | 22 -----------------
 web/src/components/dialog/SmallDialog.svelte  | 24 +++----------------
 3 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index 72941b1a..141491d0 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/web/src/components/dialog/DialogHolder.svelte
@@ -95,6 +95,25 @@
         -webkit-backdrop-filter: none !important;
     }
 
+    :global(.dialog-body) {
+        --dialog-padding: 18px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        background: var(--popup-bg);
+        box-shadow:
+            0 0 0 2px var(--popup-stroke) inset,
+            0 0 60px 10px var(--popup-bg);
+        border-radius: 29px;
+
+        padding: var(--dialog-padding);
+
+        position: relative;
+        will-change: transform;
+    }
+
     :global(.open .dialog-body) {
         animation: modal-in 0.35s;
     }
@@ -107,6 +126,10 @@
     @media screen and (max-width: 535px) {
         :global(.open .dialog-body) {
             animation: modal-in-mobile 0.4s;
+            margin-bottom: calc(
+                var(--padding) / 2 + env(safe-area-inset-bottom)
+            );
+            box-shadow: 0 0 0 2px var(--popup-stroke) inset;
         }
     }
 
diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte
index ef2089a4..34d8d0b7 100644
--- a/web/src/components/dialog/PickerDialog.svelte
+++ b/web/src/components/dialog/PickerDialog.svelte
@@ -88,27 +88,12 @@
 
 <style>
     .picker-dialog {
-        --dialog-padding: 18px;
         --picker-item-size: 120px;
-
-        display: flex;
-        flex-direction: column;
-        align-items: center;
         gap: var(--padding);
         max-height: calc(
             90% - env(safe-area-inset-bottom) - env(safe-area-inset-top)
         );
-
         width: auto;
-        background: var(--popup-bg);
-        box-shadow:
-            0 0 0 2px var(--popup-stroke) inset,
-            0 0 60px 10px var(--popup-bg);
-        padding: var(--dialog-padding);
-        position: relative;
-        will-change: transform;
-
-        border-radius: 29px;
     }
 
     .popup-header {
@@ -167,13 +152,6 @@
     }
 
     @media screen and (max-width: 535px) {
-        .picker-dialog {
-            margin-bottom: calc(
-                var(--padding) / 2 + env(safe-area-inset-bottom)
-            );
-            box-shadow: 0 0 0 2px var(--popup-stroke) inset;
-        }
-
         .picker-body {
             grid-template-columns: 1fr 1fr 1fr;
         }
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index 1e55259b..0b61d08e 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -51,7 +51,7 @@
                 <Meowbalt emotion={meowbalt} />
             </div>
         {/if}
-        <div class="popup-body">
+        <div class="dialog-inner-container">
             {#if title || icon}
                 <div class="popup-header">
                     {#if icon === "warn-red"}
@@ -81,36 +81,25 @@
 
 <style>
     .small-dialog,
-    .popup-body {
+    .dialog-inner-container {
         display: flex;
         flex-direction: column;
         gap: var(--padding);
     }
 
-    .popup-body {
+    .dialog-inner-container {
         overflow-y: scroll;
         gap: 8px;
     }
 
     .small-dialog {
-        --dialog-padding: 18px;
-
-        align-items: center;
         text-align: center;
         max-width: 340px;
         width: calc(
             100% - var(--padding) - var(--dialog-padding) * 2
         );
         max-height: 50%;
-        background: var(--popup-bg);
-        box-shadow:
-            0 0 0 2px var(--popup-stroke) inset,
-            0 0 60px 10px var(--popup-bg);
-        padding: var(--dialog-padding);
         margin: calc(var(--padding) / 2);
-        border-radius: 29px;
-        position: relative;
-        will-change: transform;
     }
 
     .small-dialog.meowbalt-visible {
@@ -155,11 +144,4 @@
     .popup-title:focus-visible {
         box-shadow: none !important;
     }
-
-    @media screen and (max-width: 535px) {
-        .small-dialog {
-            margin-bottom: calc(var(--padding) / 2 + env(safe-area-inset-bottom));
-            box-shadow: 0 0 0 2px var(--popup-stroke) inset;
-        }
-    }
 </style>