From 1c322cd7bddc48ba87448f7ad77afa1c61a732ea Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Thu, 22 Aug 2024 03:42:24 -0400
Subject: [PATCH] Update dialog

---
 src/Dialog.astro | 162 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 143 insertions(+), 19 deletions(-)

diff --git a/src/Dialog.astro b/src/Dialog.astro
index 3481145..9640e3d 100644
--- a/src/Dialog.astro
+++ b/src/Dialog.astro
@@ -2,39 +2,163 @@
 // Properties
 const {
     Name,
-    Title = 'Dialog Title',
-    Description = 'Description',
+    Title = "Dialog Title",
+    Description = "Description",
     CloseButton = true,
     QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation
     Actions = false,
-    BlurryBackdrop = true
-} = Astro.props
+    BlurryBackdrop = true,
+} = Astro.props;
 ---
 
-<div id={Name} class="fl-dialog-backdrop"></div>
+<div id={Name + '-backdrop'} class="fl-dialog-backdrop"></div>
 <div id={Name} class="fl-dialog">
     <div class="fl-dialog-header">
         <div class="fl-dialog-header-start">
             <h2>{Title}</h2>
-            <p>{Description}</p>
         </div>
         <div class="fl-dialog-header-end">
-            {QuestionTooltip ?
-                <button title={QuestionTooltip}><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 19.01L12.01 18.9989" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
-                :
-                null
+            {
+                QuestionTooltip ? (
+                    <button title={QuestionTooltip}>
+                        <svg
+                            width="24px"
+                            height="24px"
+                            stroke-width="1.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            color="#000000"
+                        >
+                            <>
+                                <path
+                                    d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976"
+                                    stroke="#000000"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                                <path
+                                    d="M12 19.01L12.01 18.9989"
+                                    stroke="#000000"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                />
+                            </>
+                        </svg>
+                    </button>
+                ) : null
+            }
+            {
+                CloseButton ? (
+                    <button onclick={CloseButton}>
+                        <svg
+                            width="24px"
+                            height="24px"
+                            stroke-width="1.5"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            color="#000000"
+                        >
+                            <path
+                                d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
+                                stroke="#FFF"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </button>
+                ) : null
             }
-            {CloseButton ? <button><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button> : null}
         </div>
     </div>
     <div class="fl-dialog-content">
-        <slot/>
+        <slot />
     </div>
-    {Actions ?
-        <div class="fl-dialog-actions">
-            <slot name="actions"/>
-        </div>
-        :
-        null
+    {
+        Actions ? (
+            <div class="fl-dialog-actions">
+                <slot name="actions" />
+            </div>
+        ) : null
     }
-</div>
\ No newline at end of file
+</div>
+
+<style lang="scss" is:inline>
+    .fl-dialog-backdrop {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
+        z-index: 1;
+        display: none;
+    }
+    .fl-dialog {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+        background: black;
+        border-radius: 12px;
+        border: 1px #3e3e3e solid;
+        max-width: 720px;
+        display: none;
+        .fl-dialog-header {
+            border-radius: 12px 12px 0px 0px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 24px;
+            * {margin: 0px}
+            p {
+                color: gray;
+            }
+            button {
+                background: transparent;
+                border-radius: 3rem;
+                border: none;
+                aspect-ratio: 1;
+                &:hover {
+                    background: #1e1e1e;
+                    cursor: pointer;
+                }
+            }
+        }
+        .fl-dialog-content {
+            padding: 12px 24px;
+        }
+        .fl-dialog-actions {
+            border-radius: 0px 0px 12px 12px;
+            padding: 12px 24px;
+            display: flex;
+            justify-content: flex-end;
+            gap: 6px;
+            a, button {
+                color: black;
+                background: white;
+                border: none;
+                font-size: 16px;
+                border-radius: 4px;
+                padding: 6px 12px;
+                &:hover {
+                    filter: brightness(0.6);
+                    cursor: pointer;
+                }
+            }
+            .fl-secondary-btn {
+                color: white;
+                background: transparent;
+                &:hover {
+                    cursor: pointer;
+                    filter: brightness(0.6);
+                }
+            }
+        }
+    }
+</style>