replace all html buttons with button component

frontend/src/components/basics/Button.tsx

@@ -1,35 +1,35 @@
 import SvgIcon, { Icon } from "./SvgIcon"
 
 type ButtonProps = {
-    onClicked: () => void,
+    onClick: () => void,
     icon?: Icon,
     text?: string,
-    buttonType : ButtonType
+    buttonType? : ButtonType
 }
 
 export const ButtonType = {
   DarkButton: {
-    textColor: "text-white",
-    backgroundColor: "bg-gray-600  hover:bg-gray-800"
+    textColor: "dark-button-text",
+    backgroundColor: "dark-button-bg"
   },
   PrimaryButton: {
-    textColor: "text-gray-600",
-    backgroundColor: "bg-blue-300 hover:bg-blue-400"
+    textColor: "primary-button-text",
+    backgroundColor: "primary-button-bg"
   },
   DefaultButton: {
-    textColor: "text-gray-600",
-    backgroundColor: "bg-gray-300 hover:bg-gray-400"
+    textColor: "default-button-text",
+    backgroundColor: "default-button-bg"
   }
 } as const;
 
 export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
 
-export default function Button ({onClicked, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
+export default function Button ({onClick: onClick, icon, text, buttonType = ButtonType.DefaultButton} : ButtonProps){
     return(
         <button
             type="button"
-            className={`px-4 py-2 shadow-md rounded-lg whitespace-nowrap ${buttonType.backgroundColor} ${buttonType.textColor}`}
-            onClick={onClicked}
+            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor}`}
+            onClick={onClick}
         >
             <div className="flex items-center gap-2">
                 {/* Render icon only if defined */}