fix: redesigned the dropdown

components/tools/FiltersDisplay.js

@@ -20,7 +20,7 @@ export default function FiltersDisplay({ checkedValues = [], setValues }) {
           <div
             key={index}
             className={twMerge(
-                `hover:border-black border border-gray-600 text-gray-600 hover:text-black p-1 pb-0 rounded-2xl flex gap-1 items-start`
+                `hover:border-black border border-gray-600 text-gray-600 hover:text-black p-1 pb-0 pl-1.5 rounded-2xl flex align-center gap-1 items-start`
             )}
           >
             <div className="text-xs m-auto h-fit">{items}</div>

components/tools/FiltersDropdown.js

@@ -12,18 +12,18 @@ export default function FiltersDropdown({ dataList = [], checkedOptions = [], se
   };
 
   return (
-    <div className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)} data-testid="FiltersDropdown-div">
+    <div className={twMerge(`max-w-lg max-h-[300px] overflow-y-auto border-4 flex gap-2 flex-col p-2 duration-200 delay-150 ${className}`)} data-testid="FiltersDropdown-div">
       {dataList.map((data, index) => {
         const checked = checkedOptions.includes(data.name);
         return (
           <div
             key={index}
-            className={twMerge(`border border-secondary-600 text-secondary-600 p-1 pb-0 rounded-2xl flex gap-1 cursor-pointer items-start ${checked ? 'bg-secondary-600 text-white' : ''}`)}
+            className={twMerge(`border rounded text-gray-700 hover:bg-gray-300 p-1 flex gap-1 cursor-pointer items-start ${checked ? 'hover:bg-secondary-600 bg-secondary-600 text-white' : ''}`)}
             onClick={(e) => handleClickOption(e, data.name)}
 
           >
-            {checked ? <img src='/img/illustrations/icons/CheckedIcon.svg' /> : <img src='/img/illustrations/icons/UncheckedIcon.svg' />}
-            <div className='text-xs -mt-[1px] mb-[1px]'>{data.name}</div>
+              <li className="list-none mx-2 ">{data.name}</li>  
+
           </div>
         );
       })}