fix: graph filters sheet animation (#15)

* fix: add missing `tailwindcss-animate` plugin * refactor: animate sheet faster from `500/300` to `300/200`
expo · Mar 27, 2024 · 24dd5d0 · 24dd5d0
1 parent 06c28b1
commit 24dd5d0
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/webui/bun.lockb b/webui/bun.lockb
diff --git a/webui/package.json b/webui/package.json
@@ -40,7 +40,8 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.6",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/webui/src/ui/Sheet.tsx b/webui/src/ui/Sheet.tsx
@@ -33,7 +33,7 @@ export const SheetOverlay = () => null;
 // SheetOverlay.displayName = Dialog.Overlay.displayName;
 
 const sheetVariants = cva(
-  'fixed z-50 gap-4 bg-overlay border border-default p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  'fixed z-50 gap-4 bg-overlay border border-default p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300',
   {
     variants: {
       side: {

diff --git a/webui/tailwind.config.js b/webui/tailwind.config.js
@@ -5,4 +5,5 @@ module.exports = {
   ...expoTheme,
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   presets: [require('nativewind/preset')],
+  plugins: [require('tailwindcss-animate')],
 };