8 files changed, 155 insertions, 138 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
new file mode 100644
index 00000000..c34176f6
--- /dev/null
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -0,0 +1,51 @@
+.cru-button:not(.outline) {
+  color: var(--cru-theme-t-color);
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  border: none;
+  transition: all 0.5s;
+  background-color: var(--cru-theme-color);
+}
+
+.cru-button:not(.outline):hover {
+  background-color: var(--cru-theme-f1-color);
+}
+
+.cru-button:not(.outline):active {
+  background-color: var(--cru-theme-f2-color);
+}
+
+.cru-button:not(.outline):disabled {
+  background-color: var(--cru-disable-color);
+  cursor: auto;
+}
+
+.cru-button.outline {
+  color: var(--cru-theme-color);
+  border: var(--cru-theme-color) 1px solid;
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+  border-radius: 0.2em;
+  transition: all 0.6s;
+  background-color: white;
+}
+
+.cru-button.outline:hover {
+  color: var(--cru-theme-f1-color);
+  border-color: var(--cru-theme-f1-color);
+  background-color: var(--cru-background-color);
+}
+
+.cru-button.outline:active {
+  color: var(--cru-theme-f2-color);
+  border-color: var(--cru-theme-f2-color);
+  background-color: var(--cru-background-1-color);
+}
+
+.cru-button.outline:disabled {
+  color: var(--cru-disable-color);
+  border-color: var(--cru-disable-color);
+  background-color: white;
+  cursor: auto;
+}
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
new file mode 100644
index 00000000..a39ef8a7
--- /dev/null
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { calculateProps, CommonButtonProps } from "./common";
+
+import "./Button.css";
+
+function _Button(
+  props: CommonButtonProps & {
+    outline?: boolean;
+    customButtonClassName?: string;
+  },
+  ref: React.ForwardedRef<HTMLButtonElement>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  const { customButtonClassName, outline, ...otherProps } = props;
+
+  const { newProps, children } = calculateProps(
+    otherProps,
+    customButtonClassName ?? "cru-button" + (outline ? " outline" : ""),
+    t
+  );
+
+  return (
+    <button ref={ref} {...newProps}>
+      {children}
+    </button>
+  );
+}
+
+const Button = React.forwardRef(_Button);
+export default Button;
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index 522563b9..f0d33153 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -5,44 +5,14 @@
   border: none;
   background-color: transparent;
   transition: all 0.6s;
-}
-
-.cru-flat-button:hover:not(.disabled) {
-  background-color: #e9ecef;
+  color: var(--cru-theme-color);
 }
 
 .cru-flat-button.disabled {
+  color: var(--cru-theme-l1-color);
   cursor: default;
 }
 
-.cru-flat-button.primary {
-  color: var(--tl-primary-color);
-}
-
-.cru-flat-button.primary.disabled {
-  color: var(--tl-primary-lighter-color);
-}
-
-.cru-flat-button.secondary {
-  color: var(--tl-secondary-color);
-}
-
-.cru-flat-button.secondary.disabled {
-  color: var(--tl-secondary-lighter-color);
-}
-
-.cru-flat-button.success {
-  color: var(--tl-success-color);
-}
-
-.cru-flat-button.success.disabled {
-  color: var(--tl-success-lighter-color);
-}
-
-.cru-flat-button.danger {
-  color: var(--tl-danger-color);
-}
-
-.cru-flat-button.danger.disabled {
-  color: var(--tl-danger-ligher-color);
+.cru-flat-button:hover:not(.disabled) {
+  background-color: #e9ecef;
 }
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 6351971a..266ea908 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,39 +1,16 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import classNames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { CommonButtonProps } from "./common";
+import Button from "./Button";
 
 import "./FlatButton.css";
 
 function _FlatButton(
-  {
-    text,
-    color,
-    onClick,
-    className,
-    style,
-  }: {
-    text: I18nText;
-    color?: PaletteColorType;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-  },
+  props: CommonButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
-  const { t } = useTranslation();
-
   return (
-    <button
-      ref={ref}
-      className={classNames("cru-flat-button", color ?? "primary", className)}
-      onClick={onClick}
-      style={style}
-    >
-      {convertI18nText(text, t)}
-    </button>
+    <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
   );
 }
 
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
new file mode 100644
index 00000000..a7e34f91
--- /dev/null
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import { CommonButtonProps } from "./common";
+import Button from "./Button";
+import Spinner from "../Spinner";
+
+const LoadingButton: React.FC<{ loading?: boolean } & CommonButtonProps> = ({
+  loading,
+  disabled,
+  color,
+  ...otherProps
+}) => {
+  return (
+    <Button
+      color={color}
+      outline
+      disabled={disabled || loading}
+      {...otherProps}
+    >
+      {otherProps.children}
+      {loading ? (
+        <Spinner className="cru-align-text-bottom ms-1" color={color} />
+      ) : null}
+    </Button>
+  );
+};
+
+export default LoadingButton;
diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css
deleted file mode 100644
index dc5abaaa..00000000
--- a/FrontEnd/src/views/common/button/TextButton.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.cru-text-button {
-  background: transparent;
-  border: none;
-}
-
-.cru-text-button.primary {
-  color: var(--tl-primary-color);
-}
-
-.cru-text-button.primary:hover {
-  color: var(--tl-primary-lighter-color);
-}
-
-.cru-text-button.secondary {
-  color: var(--tl-secondary-color);
-}
-
-.cru-text-button.secondary:hover {
-  color: var(--tl-secondary-lighter-color);
-}
-
-.cru-text-button.success {
-  color: var(--tl-success-color);
-}
-
-.cru-text-button.success:hover {
-  color: var(--tl-success-lighter-color);
-}
-
-.cru-text-button.danger {
-  color: var(--tl-danger-color);
-}
-
-.cru-text-button.danger:hover {
-  color: var(--tl-danger-lighter-color);
-}
diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
deleted file mode 100644
index 1a2bac94..00000000
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import classNames from "classnames";
-
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
-
-import "./TextButton.css";
-
-function _TextButton(
-  {
-    text,
-    color,
-    onClick,
-    className,
-    style,
-  }: {
-    text: I18nText;
-    color?: PaletteColorType;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-  },
-  ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
-  const { t } = useTranslation();
-
-  return (
-    <button
-      ref={ref}
-      className={classNames("cru-text-button", color ?? "primary", className)}
-      onClick={onClick}
-      style={style}
-    >
-      {convertI18nText(text, t)}
-    </button>
-  );
-}
-
-const TextButton = React.forwardRef(_TextButton);
-export default TextButton;
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
new file mode 100644
index 00000000..0d84bae0
--- /dev/null
+++ b/FrontEnd/src/views/common/button/common.ts
@@ -0,0 +1,35 @@
+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,
+  };
+}