3 files changed, 40 insertions, 40 deletions
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index c5976909..be605328 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -1,43 +1,47 @@
-import * as React from "react";
+import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
-import { useTranslation } from "react-i18next";
 
-import { convertI18nText, I18nText } from "@/common";
+import { I18nText, useC } from "@/common";
 import { PaletteColorType } from "@/palette";
 
 import "./Button.css";
 
-function _Button(
-  props: {
-    color?: PaletteColorType;
-    text?: I18nText;
-    outline?: boolean;
-  } & React.ComponentPropsWithoutRef<"button">,
-  ref: React.ForwardedRef<HTMLButtonElement>
-): JSX.Element {
-  const { t } = useTranslation();
+interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  color?: PaletteColorType;
+  text?: I18nText;
+  outline?: boolean;
+  buttonRef?: Ref<HTMLButtonElement> | null;
+}
 
-  const { color, text, outline, className, children, ...otherProps } = props;
+export default function Button(props: ButtonProps) {
+  const {
+    buttonRef,
+    color,
+    text,
+    outline,
+    className,
+    children,
+    ...otherProps
+  } = props;
 
   if (text != null && children != null) {
     console.warn("You can't set both text and children props.");
   }
 
+  const c = useC();
+
   return (
     <button
-      ref={ref}
+      ref={buttonRef}
       className={classNames(
         "cru-" + (color ?? "primary"),
         "cru-button",
         outline && "outline",
-        className
+        className,
       )}
       {...otherProps}
     >
-      {text != null ? convertI18nText(text, t) : children}
+      {text != null ? c(text) : children}
     </button>
   );
 }
-
-const Button = React.forwardRef(_Button);
-export default Button;
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index b42c5b3a..49912b68 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,41 +1,37 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { ComponentPropsWithoutRef, Ref } from "react";
 import classNames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
+import { I18nText, useC } from "@/common";
 import { PaletteColorType } from "@/palette";
 
 import "./FlatButton.css";
 
-function _FlatButton(
-  props: {
-    color?: PaletteColorType;
-    text?: I18nText;
-  } & React.ComponentPropsWithoutRef<"button">,
-  ref: React.ForwardedRef<HTMLButtonElement>
-): React.ReactElement | null {
-  const { t } = useTranslation();
+interface FlatButtonProps extends ComponentPropsWithoutRef<"button"> {
+  color?: PaletteColorType;
+  text?: I18nText;
+  buttonRef?: Ref<HTMLButtonElement> | null;
+}
 
-  const { color, text, className, children, ...otherProps } = props;
+export default function FlatButton(props: FlatButtonProps) {
+  const { color, text, className, children, buttonRef, ...otherProps } = props;
 
   if (text != null && children != null) {
     console.warn("You can't set both text and children props.");
   }
 
+  const c = useC();
+
   return (
     <button
-      ref={ref}
+      ref={buttonRef}
       className={classNames(
         "cru-" + (color ?? "primary"),
         "cru-flat-button",
-        className
+        className,
       )}
       {...otherProps}
     >
-      {text != null ? convertI18nText(text, t) : children}
+      {text != null ? c(text) : children}
     </button>
   );
 }
-
-const FlatButton = React.forwardRef(_FlatButton);
-export default FlatButton;
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index 3ba56277..ca12bf5a 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -1,17 +1,17 @@
-import * as React from "react";
+import { ComponentPropsWithoutRef } from "react";
 import classNames from "classnames";
 
 import { PaletteColorType } from "@/palette";
 
 import "./IconButton.css";
 
-export interface IconButtonProps extends React.ComponentPropsWithRef<"i"> {
+interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
   color?: PaletteColorType;
   large?: boolean;
 }
 
-export default function IconButton(props: IconButtonProps): JSX.Element {
+export default function IconButton(props: IconButtonProps) {
   const { icon, color, className, large, ...otherProps } = props;
 
   return (