Update to use dialog

v3xlabs · Feb 15, 2024 · 94a8f15 · 94a8f15
1 parent 2f95dc2
commit 94a8f15
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 38 deletions.
diff --git a/packages/thorin-core/src/modal/index.ts b/packages/thorin-core/src/modal/index.ts
@@ -9,6 +9,9 @@ export class ThorinModal extends LitElement {
     @property({ type: String })
     modalTitle = '';
 
+    @property({ type: Boolean })
+    closeOnRequest = true;
+
     static styles = css`
         :host {
             display: none;
@@ -35,6 +38,9 @@ export class ThorinModal extends LitElement {
             align-items: center;
             position: fixed;
             max-width: 100%;
+            outline: none;
+            border: none;
+            background: transparent;
         }
         .modal {
             transition: all 250ms ease-out;
@@ -71,6 +77,16 @@ export class ThorinModal extends LitElement {
             font-size: 20px;
             padding-bottom: var(--thorin-spacing-2);
         }
+        dialog::backdrop {
+            background-image: linear-gradient(
+                45deg,
+                magenta,
+                rebeccapurple,
+                dodgerblue,
+                green
+            );
+            opacity: 0.75;
+        }
         /* Modal Breakpoint */
         @media (max-width: 576px) {
             .modal-container {
@@ -82,10 +98,12 @@ export class ThorinModal extends LitElement {
                 transform: unset;
                 height: auto;
                 align-items: flex-end;
+                width: calc(100% - var(--thorin-spacing-4));
+                overflow-y: auto;
+                max-height: calc(100vh - var(--thorin-spacing-4));
             }
             .modal {
                 /* max-height: 100vh; */
-                overflow-y: auto;
                 width: 100%;
 
                 max-width: 100%;
@@ -104,14 +122,18 @@ export class ThorinModal extends LitElement {
 
     render() {
         return html`
-            <div class="modal-container">
-                <div class="modal">
-                    <div class="content">
-                        <div class="title">${this.modalTitle}</div>
-                        <slot></slot>
+            <dialog open="${this.open}" class="modal-container" @close="${() =>
+            console.log('onClose')}" @click="${(event) => {
+            console.log('click', event);
+        }}">
+                    <div class="modal">
+                        <div class="content">
+                            <div class="title">${this.modalTitle}</div>
+                            <slot></slot>
+                        </div>
                     </div>
                 </div>
-            </div>
+            </dialog>
         `;
     }
 

diff --git a/packages/thorin-core/src/style.css b/packages/thorin-core/src/style.css
@@ -37,37 +37,6 @@ p {
 }
 
 :root {
-    --ens-blue: #5298ff;
-    --ens-blue2: rgba(82, 152, 255, 0.6);
-    --ens-blue3: rgba(82, 152, 255, 0.25);
-    --ens-green: #49b393;
-    --ens-indigo: #5854d6;
-    --ens-orange: #ff9500;
-    --ens-pink: #ff2d55;
-    --ens-purple: #af52de;
-    --ens-red: #d55555;
-    --ens-teal: #5ac8fa;
-    --ens-yellow: #e8b811;
-    --ens-grey1: #f6f6f6;
-    --ens-grey2: #9b9ba7;
-    --ens-grey3: #454545;
-    --ens-gradient-blue: linear-gradient(
-        330.4deg,
-        #44bcf0 4.54%,
-        #7298f8 59.2%,
-        #a099ff 148.85%
-    );
-    --ens-gradient-purple: linear-gradient(
-        323.31deg,
-        #de82ff -15.56%,
-        #7f6aff 108.43%
-    );
-    --ens-gradient-green: linear-gradient(
-        323.31deg,
-        #73a6f2 -15.56%,
-        #42c2ab 108.43%
-    );
-
     --thorin-blue-primary: #3889FF;
     --thorin-blue-active: #003685;
     --thorin-blue-dim: #056AFF;