chore: updates

src/common/component/QRCode.tsx

@@ -20,9 +20,8 @@ const QRCode = ({ link }: Props) => {
                 src: logo,
                 x: undefined,
                 y: undefined,
-                height: 28,
-                width: 28,
-
+                height: 80,
+                width: 80,
                 excavate: true,
             }} />
     );

src/common/component/styled/Label.tsx

@@ -1,10 +1,9 @@
-import styled from "styled-components";
-
-const StyledLabel = styled.label`
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #6b7280;
-`;
+import { LabelHTMLAttributes, ReactNode } from "react";
 
+type Props = LabelHTMLAttributes<HTMLLabelElement> & { children?: ReactNode }
+const StyledLabel = ({ children, className = '', ...rest }: Props) => {
+  return <label className={`text-gray-500 text-sm ${className}`} {...rest}>
+    {children}
+  </label>;
+};
 export default StyledLabel;

src/common/component/styled/Textarea.tsx

@@ -1,25 +1,7 @@
-import styled from "styled-components";
-
-const StyledTextarea = styled.textarea`
-  font-family: inherit;
-  width: 100%;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
-  border-radius: 4px;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 8px;
-  color: #333;
-  resize: unset;
-  &:disabled {
-    color: #78787c;
-    background-color: #f9fafb;
-  }
-  &::placeholder {
-    color: #d1d5db;
-  }
-`;
+import { TextareaHTMLAttributes } from "react";
 
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+const StyledTextarea = ({ className, ...rest }: Props) => {
+  return <textarea className={`rounded text-sm p-2 bg-white text-gray-700 resize-none w-full shadow border border-solid disabled:bg-[#f9fafb] disabled:text-gray-400 disabled:pointer-events-none placeholder:text-gray-400 ${className}`} {...rest}></textarea>;
+};
 export default StyledTextarea;

src/routes/setting/config/Firebase.tsx

@@ -15,14 +15,14 @@ interface IOptions {
   official: string,
   custom: string
 }
-const Options: IOptions = {
-  disable: "Disable",
-  official: "Use Official Configuration",
-  custom: "Custom"
-};
 export default function ConfigFirebase() {
   const { values, setValues, updateConfig, changed, reset } = useConfig("firebase");
   const { t } = useTranslation("setting");
+  const Options: IOptions = {
+    disable: t("firebase.disable"),
+    official: t("firebase.use_official"),
+    custom: t("firebase.custom")
+  };
   let select: keyof IOptions | "" = "";
   if (values) {
     const {