feat(web): Add animation to dialog

Author: thien-do

src/web/animation/animation.module.css

@@ -5,23 +5,46 @@
 }
 
 /* prettier-ignore */
-@keyframes in {
+@keyframes flip-in {
   from { opacity: 0; transform: rotateX(-10deg); }
   to { opacity: 1; transform: rotateX(0deg); }
 }
 
 /* prettier-ignore */
-@keyframes out {
+@keyframes flip-out {
   from { opacity: 1; transform: rotateX(0deg); }
   to { opacity: 0; transform: rotateX(-10deg); }
 }
 
 .flip[data-state="open"] {
-  animation-name: in;
-  animation-duration: 200ms;
+  animation-name: flip-in;
+  animation-duration: 0.2s;
 }
 
 .flip[data-state="closed"] {
-  animation-name: out;
-  animation-duration: 600ms;
+  animation-name: flip-out;
+  animation-duration: 0.6s;
+}
+
+/* Fade */
+
+.fade {
+  will-change: opacity;
+  animation-timing-function: var(--ease);
+}
+
+/* prettier-ignore */
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* prettier-ignore */
+@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
+
+.fade[data-state="open"] {
+  animation-name: fade-in;
+  animation-duration: 0.4s;
+}
+
+.fade[data-state="closed"] {
+  animation-name: fade-out;
+  animation-duration: 0.8s;
 }

src/web/animation/animation.ts

@@ -2,4 +2,5 @@ import * as s from "./animation.module.css";
 
 export const animation = {
   flip: s.flip,
+  fade: s.fade,
 };

src/web/prompt/dialog.module.css

@@ -1,16 +1,21 @@
 .overlay {
-  background-color: var(--color-base);
+  background-color: rgba(var(--color-base-rgb), 0.8);
   position: fixed;
   inset: 0;
-  opacity: 0.8;
 }
 
-.content {
+.container {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  inset: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  perspective: 100vh;
+}
 
+.content {
   padding: 18px;
   display: flex;
   flex-direction: column;

src/web/prompt/dialog.tsx

@@ -1,5 +1,6 @@
 import * as Radix from "@radix-ui/react-alert-dialog";
 import { ReactNode } from "react";
+import { animation } from "../animation/animation";
 import { Card } from "../card/card";
 import * as s from "./dialog.module.css";
 
@@ -15,14 +16,21 @@ const Content = (props: Props): JSX.Element => {
   const { title, description, buttons } = props;
   return (
     <Radix.Portal>
-      <Radix.Overlay className={s.overlay} />
-      <Radix.Content className={[s.content, Card.glass].join(" ")}>
-        <Radix.Title className={s.title}>{title}</Radix.Title>
-        <Radix.Description className={s.description}>
-          {description}
-        </Radix.Description>
-        <div className={s.footer}>{buttons}</div>
-      </Radix.Content>
+      <Radix.Overlay
+        className={[s.overlay, animation.fade].join(" ")}
+      ></Radix.Overlay>
+      {/* Container to apply transform animation to Content */}
+      <div className={s.container}>
+        <Radix.Content
+          className={[s.content, Card.glass, animation.flip].join(" ")}
+        >
+          <Radix.Title className={s.title}>{title}</Radix.Title>
+          <Radix.Description className={s.description}>
+            {description}
+          </Radix.Description>
+          <div className={s.footer}>{buttons}</div>
+        </Radix.Content>
+      </div>
     </Radix.Portal>
   );
 };