updated help ui and removed border from header

Author: Ciphrox

src/assets/styles/dialog.css

@@ -48,53 +48,74 @@
 }
 
 dialog[open] {
-  opacity: 1;
-  transform: scaleY(1);
+  animation: slideIn 0.3s ease-out forwards;
 }
 
-/*   Closed state of the dialog   */
 dialog {
   opacity: 0;
-  transform: scaleY(0);
-  transition:
-    opacity 0.7s ease-out,
-    transform 0.7s ease-out,
-    overlay 0.7s ease-out allow-discrete,
-    display 0.7s ease-out allow-discrete;
-  /* Equivalent to
-  transition: all 0.7s allow-discrete; */
-}
-
-/*   Before-open state  */
-/* Needs to be after the previous dialog[open] rule to take effect,
-    as the specificity is the same */
-@starting-style {
-  dialog[open] {
+  transform: translateY(-20px);
+  transition: opacity 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
     opacity: 0;
-    transform: scaleY(0);
+    transform: translateY(20px);
   }
 }
 
-/* Transition the :backdrop when the dialog modal is promoted to the top layer */
+dialog[closing] {
+  animation: slideOut 0.3s ease-in forwards;
+  pointer-events: none;
+}
+
 dialog::backdrop {
-  background-color: var(--dialog__bg--1);
-  transition:
-    display 0.7s allow-discrete,
-    overlay 0.7s allow-discrete,
-    background-color 0.7s;
-  /* Equivalent to
-  transition: all 0.7s allow-discrete; */
+  background: rgba(0, 0, 0, 0);
+  transition: background 0.3s ease-in-out;
 }
 
 dialog[open]::backdrop {
-  background-color: var(--dialog__bg--2);
+  background: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.3s ease-out forwards;
 }
 
-/* This starting-style rule cannot be nested inside the above selector
-because the nesting selector cannot represent pseudo-elements. */
+dialog[closing]::backdrop {
+  animation: fadeOut 0.3s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    background: rgba(0, 0, 0, 0);
+  }
 
-@starting-style {
-  dialog[open]::backdrop {
-    background-color: var(--dialog__bg--1);
+  to {
+    background: rgba(0, 0, 0, 0.5);
   }
 }
+
+@keyframes fadeOut {
+  from {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  to {
+    background: rgba(0, 0, 0, 0);
+  }
+}

src/assets/styles/globals.css

@@ -93,16 +93,6 @@
     min-height: 100vh;
   }
 
-  header {
-    grid-area: header;
-    height: var(--header-h);
-    border: 1px solid pink;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-inline: 1rem;
-  }
-
   a {
     color: light-dark(#151414, white);
   }

src/components/Dialog.js

@@ -0,0 +1,7 @@
+document.querySelector('dialog').addEventListener('close', (e) => {
+  const dialog = e.target;
+  dialog.setAttribute('closing', '');
+  dialog.addEventListener('animationend', () => {
+    dialog.removeAttribute('closing');
+  }, { once: true });
+});

src/components/Help.astro

@@ -9,7 +9,7 @@ interface Props {
 const { title, description } = Astro.props;
 ---
 
-<div id="help" class="help">❓</div>
+<div id="help" class="help">?</div>
 <dialog id="info" class="help-dialog">
   <div class="dialog-header">
     <h2>{title}</h2>
@@ -34,8 +34,17 @@ const { title, description } = Astro.props;
 
 <style>
   .help {
-    padding: 1rem;
-    outline: 1px solid grey;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    font-weight: 600;
+    padding: 1.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: var(--primary);
+    border-radius: 50%;
+    border: 1.5px solid var(--primary);
     cursor: pointer;
   }
 </style>