From a90f1a5041cf4a622f41f3b2680052e3a4d5ba11 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 4 May 2022 11:35:47 +0800
Subject: ...

---
 FrontEnd/src/views/common/button/FlatButton.tsx | 31 +++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

(limited to 'FrontEnd/src/views/common/button/FlatButton.tsx')

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>
   );
 }
 
-- 
cgit v1.2.3