feat: fixed the sidebar color with the animation

Author: chauhan-varun

pages/tools/components/SearchBar.tsx

@@ -17,11 +17,14 @@ const SearchBar = ({ transform }: { transform: Transform }) => {
       <div className='relative'>
         <input
           type='text'
-          className='w-full px-4 py-2 border dark:border-slate-900 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300 dark:bg-slate-900'
+          className='w-full px-4 py-2 border dark:border-slate-900 rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300 bg-slate-800 text-white dark:bg-slate-900 hover:scale-[0.94] transition-all duration-200'
           placeholder='Search'
           name='query'
           value={query}
           onChange={changeHandler}
+          style={{
+            transition: 'all 0.2s ease-in-out !important',
+          }}
         />
       </div>
     </div>

pages/tools/components/Sidebar.tsx

@@ -127,14 +127,20 @@ export default function Sidebar({
         <div className='w-full flex items-center justify-between mt-4 gap-2'>
           <button
             type='submit'
-            className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none'
+            className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none transition-all duration-200 hover:scale-[1.05]'
+            style={{
+              transition: 'all 0.2s ease-in-out !important',
+            }}
           >
             Apply Filters
           </button>
           <button
             type='button'
-            className='bg-slate-200 dark:bg-slate-900 text-gray-700 dark:text-slate-200 px-4 py-2 rounded hover:bg-slate-300 focus:outline-none'
+            className='bg-slate-200 dark:bg-slate-900 text-gray-700 dark:text-slate-200 px-4 py-2 rounded hover:bg-slate-300 dark:hover:bg-slate-700 focus:outline-none transition-all duration-200 hover:scale-[1.05]'
             onClick={clearFilters}
+            style={{
+              transition: 'all 0.2s ease-in-out !important',
+            }}
           >
             Clear Filters
           </button>

pages/tools/components/ui/Checkbox.tsx

@@ -22,15 +22,21 @@ export default function Checkbox({
   };
 
   return (
-    <label className='flex items-center gap-3 px-4 py-2 cursor-pointer'>
+    <label
+      className='flex items-center gap-3 px-4 py-2 cursor-pointer hover:bg-slate-300 dark:hover:bg-slate-800 transition-all duration-200 rounded hover:scale-[1.02] group'
+      style={{
+        transition: 'all 0.2s ease-in-out !important',
+      }}
+    >
       <input
         type='checkbox'
         value={value}
         name={name}
         checked={isChecked}
         onChange={handleChange}
+        className='group-hover:scale-90 transition-all duration-200'
       />
-      <span className='text-gray-700 dark:text-slate-300 font-medium'>
+      <span className='text-gray-700 dark:text-slate-300 font-medium group-hover:text-primary dark:group-hover:text-blue-400 transition-all duration-200'>
         {label}
       </span>
     </label>

pages/tools/components/ui/DropdownMenu.tsx

@@ -26,23 +26,28 @@ export default function DropdownMenu({
   }, [router]);
 
   return (
-    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer'>
+    <div
+      className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer hover:scale-[0.94] transition-all duration-200'
+      style={{
+        transition: 'all 0.2s ease-in-out !important',
+      }}
+    >
       <div
-        className='w-full flex justify-between items-center align-middle cursor-pointer'
+        className='w-full flex justify-between items-center align-middle cursor-pointer group'
         onClick={() => {
           setIsDropdownOpen((prev) => !prev);
         }}
       >
         {React.cloneElement(icon, {
-          className: 'mr-2 ml-2',
+          className: 'mr-2 ml-2 group-hover:scale-60 transition-all duration-200',
         })}
-        <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
+        <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto transition-all duration-200'>
           {label}
         </div>
         <svg
           style={{
             transform: `${isDropdownOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
-            transition: 'all 0.2s linear',
+            transition: 'all 0.2s ease-in-out',
             cursor: 'pointer',
           }}
           id='arrow'
@@ -51,6 +56,7 @@ export default function DropdownMenu({
           height='32'
           viewBox='0 0 24 24'
           width='24'
+          className='group-hover:scale-90'
         >
           <path
             clipRule='evenodd'