4 files changed, 80 insertions, 70 deletions

diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index a39ef8a7..1e4163ff 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,30 +1,40 @@
 import React from "react";
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
-import { calculateProps, CommonButtonProps } from "./common";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
 import "./Button.css";
 
 function _Button(
-  props: CommonButtonProps & {
+  props: {
+    color?: PaletteColorType;
+    text?: I18nText;
     outline?: boolean;
-    customButtonClassName?: string;
-  },
+  } & React.ComponentPropsWithoutRef<"button">,
   ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
+): JSX.Element {
   const { t } = useTranslation();
 
-  const { customButtonClassName, outline, ...otherProps } = props;
+  const { color, text, outline, className, children, ...otherProps } = props;
 
-  const { newProps, children } = calculateProps(
-    otherProps,
-    customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
-    t
-  );
+  if (text != null && children != null) {
+    console.warn("You can't set both text and children props.");
+  }
 
   return (
-    <button ref={ref} {...newProps}>
-      {children}
+    <button
+      ref={ref}
+      className={classNames(
+        "cru-" + (color ?? "primary"),
+        "cru-button",
+        outline && "outline",
+        className
+      )}
+      {...otherProps}
+    >
+      {text != null ? convertI18nText(text, t) : children}
     </button>
   );
 }
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 266ea908..a6377708 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,16 +1,39 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
 import "./FlatButton.css";
 
 function _FlatButton(
-  props: CommonButtonProps,
+  props: {
+    color?: PaletteColorType;
+    text?: I18nText;
+  } & React.ComponentPropsWithoutRef<"button">,
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  const { color, text, className, children, ...otherProps } = props;
+
+  if (text != null && children != null) {
+    console.warn("You can't set both text and children props.");
+  }
+
   return (
-    <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
+    <button
+      ref={ref}
+      className={classNames(
+        "cru-" + (color ?? "primary"),
+        "cru-flat-button",
+        className
+      )}
+      {...otherProps}
+    >
+      {text != null ? convertI18nText(text, t) : children}
+    </button>
   );
 }
 
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index a7e34f91..2764f92e 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -1,28 +1,40 @@
 import React from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
 
-import { CommonButtonProps } from "./common";
-import Button from "./Button";
 import Spinner from "../Spinner";
 
-const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
-  loading,
-  disabled,
-  color,
-  ...otherProps
-}) => {
+function LoadingButton(
+  props: {
+    color?: PaletteColorType;
+    text?: I18nText;
+    loading?: boolean;
+  } & React.ComponentPropsWithoutRef<"button">
+): JSX.Element {
+  const { t } = useTranslation();
+
+  const { color, text, loading, className, children, ...otherProps } = props;
+
+  if (text != null && children != null) {
+    console.warn("You can't set both text and children props.");
+  }
+
   return (
-    <Button
-      color={color}
-      outline
-      disabled={disabled || loading}
+    <button
+      className={classNames(
+        "cru-" + (color ?? "primary"),
+        "cru-button outline",
+        className
+      )}
       {...otherProps}
     >
-      {otherProps.children}
-      {loading ? (
-        <Spinner className="cru-align-text-bottom ms-1" color={color} />
-      ) : null}
-    </Button>
+      {text != null ? convertI18nText(text, t) : children}
+      {loading && <Spinner />}
+    </button>
   );
-};
+}
 
 export default LoadingButton;
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
deleted file mode 100644
index 0d84bae0..00000000
--- a/FrontEnd/src/views/common/button/common.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { TFunction } from "i18next";
-
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
-
-export type CommonButtonProps = {
-  text?: I18nText;
-  color?: PaletteColorType;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-export function calculateProps(
-  props: CommonButtonProps,
-  buttonClassName: string,
-  t: TFunction
-): {
-  children: React.ReactNode;
-  newProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
-} {
-  const { text, color, className, children, ...otherProps } = props;
-  const newProps = {
-    className: classNames(
-      buttonClassName,
-      color != null ? "cru-" + color : "cru-primary",
-      className
-    ),
-    ...otherProps,
-  };
-
-  return {
-    children: text != null ? convertI18nText(text, t) : children,
-    newProps: newProps,
-  };
-}