From 2242bd2c4d51ef79a3fdfc953ce5d631bdc82901 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Thu, 9 Jan 2025 15:42:41 +1030
Subject: [PATCH] feat: add slide-down animation to FloatingBar and enhance
 search behavior in DataBar

---
 .../src/components/ui/DataBar/DataBar.jsx     |  9 +-
 frontend/tailwind.config.js                   | 88 ++++++++++---------
 2 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/ui/DataBar/DataBar.jsx b/frontend/src/components/ui/DataBar/DataBar.jsx
index 3e10cb3..3ebcafe 100644
--- a/frontend/src/components/ui/DataBar/DataBar.jsx
+++ b/frontend/src/components/ui/DataBar/DataBar.jsx
@@ -7,7 +7,7 @@ import AddButton from './AddButton';
 
 const FloatingBar = ({children}) => (
     <>
-        <div className='fixed top-0 left-0 right-0 z-50 bg-gradient-to-br from-gray-800 to-gray-900 border-b border-gray-700 shadow-xl backdrop-blur-sm'>
+        <div className='fixed top-0 left-0 right-0 z-50 animate-slide-down bg-gradient-to-br from-gray-800 to-gray-900 border-b border-gray-700 shadow-xl backdrop-blur-sm'>
             <div className='max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8'>
                 <div className='flex items-center gap-4 h-16'>{children}</div>
             </div>
@@ -47,8 +47,15 @@ const DataBar = ({
     }, []);
 
     const handleSearch = term => {
+        // First set the search term and trigger the search
         setActiveSearch(term);
         onSearch(term);
+
+        // Then smoothly scroll to top
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
     };
 
     const controls = (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 5e61783..9f0c6d2 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,44 +1,52 @@
 /** @type {import('tailwindcss').Config} */
 // tailwind.config.js
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      fontFamily: {
-        'code': ['Courier New', 'monospace'], // Custom pre font
-      },
-      keyframes: {
-        'modal-open': {
-          '0%': { opacity: 0, transform: 'scale(0.95)' },
-          '100%': { opacity: 1, transform: 'scale(1)' },
-        },
-        'fade-in': {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
-        },
-      },
-      animation: {
-        'modal-open': 'modal-open 0.3s ease-out forwards',
-        'fade-in': 'fade-in 0.5s ease-in-out forwards',
-      },
-      colors: {
-        'dark-bg': '#1a1c23',
-        'dark-card': '#2a2e37',
-        'dark-text': '#e2e8f0',
-        'dark-border': '#4a5568',
-        'dark-button': '#3182ce',
-        'dark-button-hover': '#2c5282',
-      },
-      borderRadius: {
-        'lg': '0.5rem',
-        'md': '0.375rem',
-        'sm': '0.25rem',
-      },
+    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+    darkMode: 'class',
+    theme: {
+        extend: {
+            fontFamily: {
+                code: ['Courier New', 'monospace'] // Custom pre font
+            },
+            keyframes: {
+                'modal-open': {
+                    '0%': {opacity: 0, transform: 'scale(0.95)'},
+                    '100%': {opacity: 1, transform: 'scale(1)'}
+                },
+                'fade-in': {
+                    '0%': {opacity: 0},
+                    '100%': {opacity: 1}
+                },
+                'slide-down': {
+                    '0%': {
+                        opacity: '0',
+                        transform: 'translate3d(0, -100%, 0)'
+                    },
+                    '100%': {
+                        opacity: '1',
+                        transform: 'translate3d(0, 0, 0)'
+                    }
+                }
+            },
+            animation: {
+                'modal-open': 'modal-open 0.3s ease-out forwards',
+                'fade-in': 'fade-in 0.5s ease-in-out forwards',
+                'slide-down': 'slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1)'
+            },
+            colors: {
+                'dark-bg': '#1a1c23',
+                'dark-card': '#2a2e37',
+                'dark-text': '#e2e8f0',
+                'dark-border': '#4a5568',
+                'dark-button': '#3182ce',
+                'dark-button-hover': '#2c5282'
+            },
+            borderRadius: {
+                lg: '0.5rem',
+                md: '0.375rem',
+                sm: '0.25rem'
+            }
+        }
     },
-  },
-  plugins: [],
-}
+    plugins: []
+};