From 25a4e1a1d0e3400fa4203a0fe81f2e744a5b3fe6 Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Sun, 17 Dec 2023 18:19:27 +0100
Subject: [PATCH] Modal

---
 .../components/tables/vault/data-table.tsx    |  5 +--
 packages/ui/src/components/dialog.tsx         |  6 +--
 packages/ui/src/globals.css                   | 40 +++++++++++++++++++
 3 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/apps/dashboard/src/components/tables/vault/data-table.tsx b/apps/dashboard/src/components/tables/vault/data-table.tsx
index 46a5b8ad22..db8ac9ec81 100644
--- a/apps/dashboard/src/components/tables/vault/data-table.tsx
+++ b/apps/dashboard/src/components/tables/vault/data-table.tsx
@@ -15,10 +15,7 @@ export function DataTable({ teamId }) {
 
   return (
     <Table>
-      <TableHeader
-        className="border-0 sticky top-0 backdrop-blur backdrop-filter bg-opacity-50"
-        style={{ background: "var(--sticky)" }}
-      >
+      <TableHeader className="border-0">
         <TableRow>
           <TableHead className="w-[60%]">Name</TableHead>
           <TableHead className="w-[15%]">Created at</TableHead>
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 8217bb2d15..bd8eae5a72 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-[dialog-overlay-hide_100ms] data-[state=open]:animate-[dialog-overlay-show_100ms]",
       className
     )}
     {...props}
@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-xl border dark:border-none dark:p-px text-primary rounded-lg z-50",
+        "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-xl border dark:border-none dark:p-px text-primary rounded-lg z-50 data-[state=closed]:animate-[dialog-content-hide_100ms] data-[state=open]:animate-[dialog-content-show_100ms]",
         className
       )}
       style={{
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       }}
       {...props}
     >
-      <div className="bg-background p-2 rounded-lg dark:rounded-[15px]">
+      <div className="bg-background p-2 rounded-lg dark:rounded-[8px]">
         {children}
       </div>
       <DialogPrimitive.Close className="absolute right-6 top-6 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index f23e9a6e63..6298056825 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -74,4 +74,44 @@
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
   appearance: none;
+}
+
+@keyframes dialog-overlay-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-overlay-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-content-show {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes dialog-content-hide {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.97);
+  }
 }
\ No newline at end of file