componenets standardization 1

frontend/src/components/ecommerce/DemographicCard.tsx

@@ -3,6 +3,7 @@ import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 import { MoreDotIcon } from "../../icons";
 import CountryMap from "./CountryMap";
+import IconButton from "../ui/button/IconButton";
 
 export default function DemographicCard() {
   const [isOpen, setIsOpen] = useState(false);
@@ -26,9 +27,9 @@ export default function DemographicCard() {
           </p>
         </div>
         <div className="relative inline-block">
-          <button className="dropdown-toggle" onClick={toggleDropdown}>
+          <IconButton variant="ghost" size="sm" onClick={toggleDropdown} aria-label="More options">
             <MoreDotIcon className="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 size-6" />
-          </button>
+          </IconButton>
           <Dropdown
             isOpen={isOpen}
             onClose={closeDropdown}