chore: fix dialog background color

web/src/components/Dialog/BaseDialog.tsx

@@ -3,7 +3,6 @@ import classNames from "classnames";
 import { useEffect, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
-import { ANIMATION_DURATION } from "@/helpers/consts";
 import CommonContextProvider from "@/layouts/CommonContextProvider";
 import store from "@/store";
 import { useDialogStore } from "@/store/module";
@@ -75,24 +74,15 @@ export function generateDialog<T extends DialogProps>(
   document.body.append(tempDiv);
   document.body.style.overflow = "hidden";
 
-  setTimeout(() => {
-    tempDiv.firstElementChild?.classList.add("showup");
-  }, 0);
-
   const cbs: DialogCallback = {
     destroy: () => {
-      tempDiv.firstElementChild?.classList.remove("showup");
-      tempDiv.firstElementChild?.classList.add("showoff");
       document.body.style.removeProperty("overflow");
       setTimeout(() => {
         dialog.unmount();
         tempDiv.remove();
-      }, ANIMATION_DURATION);
-    },
-    hide: () => {
-      tempDiv.firstElementChild?.classList.remove("showup");
-      tempDiv.firstElementChild?.classList.add("showoff");
+      });
     },
+    hide: () => {},
   };
 
   const dialogProps = {

web/src/helpers/consts.ts

@@ -1,9 +1,6 @@
 // UNKNOWN_ID is the symbol for unknown id.
 export const UNKNOWN_ID = -1;
 
-// ANIMATION_DURATION is the duration of animation in milliseconds.
-export const ANIMATION_DURATION = 200;
-
 // DAILY_TIMESTAMP is the timestamp for a day.
 export const DAILY_TIMESTAMP = 3600 * 24 * 1000;
 

web/src/less/base-dialog.less

@@ -1,13 +1,5 @@
 .dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
-
-  &.showup {
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-
-  &.showoff {
-    @apply hidden;
-  }
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60;
 
   > .dialog-container {
     @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;