refactor: polish dark mode

src/common/component/MarkdownEditor/index.tsx

@@ -2,11 +2,13 @@ import { useRef, useEffect, FC } from "react";
 import "@toast-ui/editor/dist/toastui-editor.css";
 import { Editor } from "@toast-ui/react-editor";
 import "prismjs/themes/prism.css";
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
 
 import useUploadFile from "../../hook/useUploadFile";
 import Button from "../styled/Button";
+import { isDarkMode } from "../../utils";
 
 type Props = {
   updateDraft?: (draft: string) => void;
@@ -24,12 +26,13 @@ const MarkdownEditor: FC<Props> = ({
   sendMarkdown,
   setEditorInstance
 }) => {
-  const editorRef = useRef<Editor | undefined>(undefined);
+  const editorRef = useRef<Editor>();
   const { uploadFile } = useUploadFile();
   // const [pHolder, setPHolder] = useState(placeholder);
   useEffect(() => {
     const editor = editorRef?.current;
     if (editor) {
+
       const editorInstance = editor.getInstance();
       editorInstance.removeHook("addImageBlobHook");
       editorInstance.addHook("addImageBlobHook", async (blob, callback) => {
@@ -73,6 +76,7 @@ const MarkdownEditor: FC<Props> = ({
         height={height}
         initialEditType="markdown"
         useCommandShortcut={true}
+        theme={isDarkMode() ? "dark" : "light"}
       />
       <Button className="send small" onClick={send}>
         Send

src/common/component/MarkdownRender.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useState, useRef, FC } from "react";
 import "prismjs/themes/prism.css";
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 //@ts-ignore
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
 import { Viewer } from "@toast-ui/react-editor";
 
 import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
+import { isDarkMode } from "../utils";
 
 
 interface IProps {
@@ -50,7 +52,7 @@ const MarkdownRender: FC<IProps> = ({ content }) => {
         <ImagePreviewModal download={false} data={previewImage} closeModal={closePreviewModal} />
       )}
       <div ref={mdContainer} id="MARKDOWN_CONTAINER">
-        <Viewer initialValue={content} plugins={[codeSyntaxHighlight]}></Viewer>
+        <Viewer initialValue={content} plugins={[codeSyntaxHighlight]} theme={isDarkMode() ? "dark" : "light"}></Viewer>
       </div>
     </>
   );

src/common/component/Send/Toolbar.tsx

@@ -48,22 +48,22 @@ const Toolbar: FC<Props> = ({
     <div className={`flex flex-col items-center justify-end gap-2.5 md:flex-row`}>
       <div className="cursor-pointer flex gap-3.5">
         <Tooltip placement="top" tip="Markdown">
-          <MarkdownIcon className="fill-[#22ccee]" onClick={toggleMode} />
+          <MarkdownIcon className={isMarkdown ? "fill-[#22ccee]" : "dark:fill-gray-300"} onClick={toggleMode} />
         </Tooltip>
         {isMarkdown &&
           (fullscreen ? (
             <Tooltip placement="top" tip="Exit Fullscreen">
-              <ExitFullscreenIcon onClick={toggleMarkdownFullscreen} />
+              <ExitFullscreenIcon onClick={toggleMarkdownFullscreen} className="dark:fill-gray-300" />
             </Tooltip>
           ) : (
             <Tooltip placement="top" tip="Fullscreen">
-              <FullscreenIcon onClick={toggleMarkdownFullscreen} />
+              <FullscreenIcon onClick={toggleMarkdownFullscreen} className="dark:fill-gray-300" />
             </Tooltip>
           ))}
       </div>
       {!isMarkdown && <Tooltip placement="top" tip={t("action.upload")}>
         <div className="cursor-pointer relative w-6 h-6">
-          <AddIcon />
+          <AddIcon className="dark:fill-gray-300" />
           <label htmlFor="file" className=" cursor-pointer absolute left-0 top-0 w-full h-full opacity-0">
             <input
               className="hidden"

src/common/component/User/index.tsx

@@ -43,7 +43,7 @@ const User: FC<Props> = ({
   };
   if (!curr) return null;
   const online = curr.online || curr.uid == loginUid;
-  const containerClass = clsx(`relative flex items-center justify-start gap-2 p-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact && "p-0");
+  const containerClass = clsx(`relative flex items-center justify-start gap-2 rounded-lg select-none `, interactive && "hover:bg-gray-500/10", compact ? "p-0" : "p-2");
   const nameClass = clsx(`text-sm text-gray-500 max-w-[190px] truncate font-semibold dark:text-white`);
   const statusClass = clsx(`absolute -bottom-0.5 -right-1.5 w-3 h-3 box-content rounded-full border-[2px] border-solid border-white dark:border-gray-300`,
     online ? "bg-[#22c55e]" : "bg-[#a1a1aa]",

src/common/component/Version.tsx

@@ -6,12 +6,12 @@ type Props = {};
 const Version: FC<Props> = () => {
   const { t } = useTranslation("setting", { keyPrefix: "version" });
   const { data: serverVersion } = useGetServerVersionQuery();
-  const ts = process.env.REACT_APP_BUILD_TIME;
+  const ts = (process.env.REACT_APP_BUILD_TIME ?? 0) as number;
   return (
     <div className="flex flex-col gap-3 dark:text-white">
       <div className="item">{t("client_version")}: {process.env.VERSION}</div>
       <div className="item">{t("server_version")}: {serverVersion}</div>
-      <div className="item">{t("build_time")}: {ts} {dayjs(ts).fromNow()}</div>
+      <div className="item">{t("build_time")}: {ts} ({dayjs(ts * 1000).fromNow()})</div>
     </div>
   );
 };

src/common/component/styled/Button.tsx

@@ -10,12 +10,12 @@ const StyledButton = ({ children, className = '', ...rest }: Props) => {
   const isSmall = className.includes('small');
   const isMini = className.includes('mini');
   const isFull = className.includes('flex');
-  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg box-border px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
+  return <button className={clsx(`text-sm text-white bg-primary-400 break-keep shadow rounded-lg px-3.5 py-2.5 hover:bg-primary-500 active:bg-primary-500 disabled:bg-gray-300`,
     isFull && "w-full",
     isGhost && "text-primary-400 border border-solid border-primary-400 !bg-transparent",
-    isCancel && "!bg-transparent text-gray-800 dark:text-gray-50 border border-solid border-gray-200",
+    isCancel && "!bg-transparent !text-black dark:!text-gray-50 border border-solid border-gray-200",
     isSmall && "!py-2",
-    noBorder && "!shadow-none border-none",
+    noBorder && "!shadow-none !border-none",
     isMini && "!px-2.5 !py-1 !text-xs",
     isDanger && "bg-red-500 disabled:bg-gray-300 hover:bg-red-500/80 active:bg-red-700",
     className