edit styles

src/app/components/dropDownList.tsx

@@ -31,7 +31,7 @@ export default function DropDownList({ children, value, callBack, translatedValu
 					callBack(childValue || "");
 					setIsOpen(false);
 				},
-				className: `flex items-center w-full px-4 py-2 text-sm text-left hover:bg-blue-100 cursor-pointer select-none ${value === childValue ? "font-bold" : ""}`,
+				className: `dropdown-item ${value === childValue ? "current" : ""}`,
 				key: index,
 			});
 		}
@@ -39,12 +39,12 @@ export default function DropDownList({ children, value, callBack, translatedValu
 	});
 
 	return (
-		<div className="relative w-full" ref={dropdownRef}>
+		<div className="dropdown-wrapper" ref={dropdownRef}>
 			<button
 				onClick={() => {
 					setIsOpen(!isOpen)
 				}}
-				className="flex items-center justify-between w-full px-4 py-2 text-sm font-medium bg-white border-2 border-[#d1cece] rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#6365f186]"
+				className="dropdown-button"
 			>
 				<span className="flex items-center">
 					<span className="mr-2">
@@ -65,7 +65,7 @@ export default function DropDownList({ children, value, callBack, translatedValu
 				</svg>
 			</button>
 			{isOpen && (
-				<div className="absolute right-0 z-10 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg border-2 border-[#d1cece] focus:outline-none">
+				<div className="dropdown-list">
 					<ul
 						className="py-1"
 						role="listbox"