chore: i18n in toast

src/common/component/AutoDeleteMessages.tsx

@@ -21,6 +21,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
     const [updateSetting, { isSuccess }] = useUpdateAutoDeleteMsgMutation();
     const [value, setValue] = useState<number>(setting?.expires_in ?? 0);
     const { t } = useTranslation("setting", { keyPrefix: "auto_delete_msg" });
+    const { t: ct } = useTranslation();
     const options = [
         { title: t("off"), value: 0 },
         { title: t("5_min"), value: 5 * 60 },
@@ -41,7 +42,7 @@ const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
     };
     useEffect(() => {
         if (isSuccess) {
-            toast.success("Update Successfully!");
+            toast.success(ct("tip.update"));
         }
     }, [isSuccess]);
     const originalVal = setting?.expires_in ?? 0;

src/common/component/GoogleLoginButton.tsx

@@ -61,12 +61,13 @@ interface Props {
 
 const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
   const { t } = useTranslation("auth");
+  const { t: ct } = useTranslation();
   const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   //拿本地存的magic token
   const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
   useEffect(() => {
     if (isSuccess) {
-      toast.success("Login Successfully");
+      toast.success(ct("tip.login"));
       // navigateTo("/");
     }
   }, [isSuccess]);

src/common/component/ImagePreviewModal.tsx

@@ -49,17 +49,6 @@ const StyledWrapper = styled.div`
     &.loading .image img {
       filter: blur(2px);
     }
-
-    .origin {
-      font-weight: bold;
-      font-size: 14px;
-      color: #aaa;
-
-      &:hover {
-        text-decoration: underline;
-        color: #fff;
-      }
-    }
   }
 `;
 
@@ -117,13 +106,12 @@ const ImagePreviewModal: FC<Props> = ({ download = true, data, closeModal }) =>
             <img
               src={url}
               alt="preview"
-              className={`animate__animated animate__fadeIn animate__faster`}
             />
           </div>
           {download && (
             <a
               // onClick={handleDownload}
-              className="origin"
+              className="font-semibold text-sm text-gray-600 hover:underline hover:text-white"
               download={name}
               type={type}
               href={downloadLink || originUrl}

src/common/component/Loading.tsx

@@ -1,61 +1,41 @@
-import { FC } from "react";
-import styled, { keyframes } from "styled-components";
+import { FC, useState, useEffect } from "react";
+import clsx from "clsx";
 import { Ring } from "@uiball/loaders";
 import Button from "./styled/Button";
 import useLogout from "../hook/useLogout";
 
-const DelayVisible = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  align-items: center;
-  justify-content: center;
-
-  &.fullscreen {
-    width: 100vw;
-    height: 100vh;
-  }
-
-  .reload {
-    opacity: 0;
-
-    &.visible {
-      animation: ${DelayVisible} 1s forwards;
-      animation-delay: 30s;
-    }
-  }
-`;
-
 interface Props {
   reload?: boolean;
   fullscreen?: boolean;
 }
 
 const Loading: FC<Props> = ({ reload = false, fullscreen = false }) => {
+  const [reloadVisible, setReloadVisible] = useState(false);
   const { clearLocalData } = useLogout();
   const handleReload = () => {
     clearLocalData();
     location.reload();
   };
+  useEffect(() => {
+    let inter = 0;
+    if (reload) {
+      inter = window.setTimeout(() => {
+        setReloadVisible(true);
+      }, 30 * 1000);
+
+    }
+    return () => {
+      clearTimeout(inter);
+    };
+  }, [reload]);
 
   return (
-    <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
+    <div className={clsx("w-full h-full flex flex-col items-center justify-center gap-4", fullscreen ? "w-screen h-screen" : "")}>
       <Ring size={40} lineWeight={5} speed={2} color="black" />
-      <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
+      <Button className={clsx(`danger`, reloadVisible ? "visible" : "invisible")} onClick={handleReload}>
         Reload
       </Button>
-    </StyledWrapper>
+    </div>
   );
 };
 

src/common/component/ManageMembers/index.tsx

@@ -33,7 +33,7 @@ const ManageMembers: FC<Props> = ({ cid }) => {
 
   useEffect(() => {
     if (updateSuccess) {
-      toast.success("Update Successfully");
+      toast.success(ct("tip.update"));
     }
   }, [updateSuccess]);
 

src/common/component/ServerVersionChecker.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { useGetServerVersionQuery } from '../../app/services/server';
 import { compareVersion } from '../utils';
 
@@ -9,14 +10,24 @@ type Props = {
 }
 
 const ServerVersionChecker = ({ empty = false, version, children }: Props) => {
+  const { t } = useTranslation();
   const { data: currentVersion, isSuccess } = useGetServerVersionQuery();
   if (!isSuccess) return null;
   const res = compareVersion(currentVersion, version);
   if (res < 0) return empty ? null : <div className='flex flex-col gap-2 items-start border border-solid border-orange-500 p-3 rounded-lg'>
-    <span className='text-gray-400 text-sm'>This function needs server version:<strong className='font-bold'>{version}</strong> at least 🚨</span>
-    <span className='text-gray-400 text-sm'>Your current version:<strong className='font-bold'>{currentVersion}</strong></span>
-    <span className='text-gray-400 text-sm'>Please upgrade the Server!</span>
-    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">How to Update VoceChat Server 📖 </a>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.version_needed"}>
+        <strong className='font-bold'>{{ version }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>
+      <Trans i18nKey={"server_update.current_version"}>
+        <strong className='font-bold'>{{ version: currentVersion }}</strong>
+      </Trans>
+    </span>
+    <span className='text-gray-400 text-sm'>{t("server_update.update_tip")}</span>
+    <a className='text-blue-500 underline' href="https://doc.voce.chat/install/install-by-docker#update-vocechat-docker" target="_blank" rel="noopener noreferrer">
+      {t("server_update.howto")}  📖 </a>
   </div>;
   return children;
 };