Modal

midday-ai · Dec 17, 2023 · 25a4e1a · 25a4e1a
1 parent 100dc07
commit 25a4e1a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
 }