refactor icons. Somehow button colors are no longer working...

frontend/src/components/basics/Button.tsx

@@ -1,52 +1,32 @@
-import SvgIcon, { Icon } from "./SvgIcon"
+import { defaultIconSize } from "./SvgIcon";
+import { ButtonType, type BasicButtonProps } from "./BasicButtonDefinitions";
 
-type ButtonProps = {
-    onClick: () => void,
-    icon?: Icon,
-    text?: string,
-    buttonType?: ButtonType
-    className?: string
+type ButtonProps = BasicButtonProps & { 
+  onClick: () => void;
+};
+
+export default function Button({
+  onClick,
+  icon: Icon,
+  text,
+  buttonType = ButtonType.DefaultButton,
+  className = "",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        {Icon && (
+          <Icon
+            size={defaultIconSize}
+          />
+        )}
+        {text}
+      </div>
+    </button>
+  );
 }
-
-export const ButtonType = {
-    DarkButton: {
-        textColor: "dark-button-text",
-        backgroundColor: "dark-button-bg"
-    },
-    PrimaryButton: {
-        textColor: "primary-button-text",
-        backgroundColor: "primary-button-bg"
-    },
-    DefaultButton: {
-        textColor: "default-button-text",
-        backgroundColor: "default-button-bg"
-    },
-    TransparentButton: {
-        textColor: "transparent-button-text",
-        backgroundColor: "transparent-button-bg"
-    }
-} as const;
-
-export type ButtonType = typeof ButtonType[keyof typeof ButtonType];
-
-export default function Button(
-    { 
-        onClick: onClick, 
-        icon, text, 
-        buttonType = ButtonType.DefaultButton, 
-        className = "" 
-    }: ButtonProps) {
-    return (
-        <button
-            type="button"
-            className={`basic-button ${buttonType.backgroundColor} ${buttonType.textColor} ${className}`}
-            onClick={onClick}
-        >
-            <div className="flex items-center gap-2">
-                {/* Render icon only if defined */}
-                {icon && <SvgIcon icon={icon} color={buttonType.textColor} />}
-                {text}
-            </div>
-        </button>
-    )
-}