fix: dark styles (#2651)

Author: Chasen-Zhang

src/components/CopyPageButton/index.tsx

@@ -110,15 +110,17 @@ const CopyDropdownButton: React.FC = () => {
   }, [sourceUrl, handleCopy]);
   const renderButtonContent = useMemo(
     () => (
-      <Flex align="center" gap={6}>
+      <Flex className={styles.buttonText} align="center" gap={6}>
         {loading ? (
           <Spin size="small" />
         ) : isCopied ? (
           <CopiedSvg width={16} height={16} />
         ) : (
           <CopySvg width={16} height={16} />
         )}
-        <span>{loading ? $t("Copying...") : $t("Copy Page")}</span>
+        <span className={styles.buttonText}>
+          {loading ? $t("Copying...") : $t("Copy Page")}
+        </span>
       </Flex>
     ),
     [loading, isCopied]
@@ -129,7 +131,7 @@ const CopyDropdownButton: React.FC = () => {
       onClick={() => handleCopy(sourceUrl)}
       menu={menu}
       placement="bottomRight"
-      icon={<DownArrow width={18} height={18} />}
+      icon={<DownArrow className={styles.svg} width={18} height={18} />}
       className={styles.buttonCainter}
       trigger={["click"]}
     >

src/components/CopyPageButton/styles.module.scss

@@ -17,3 +17,17 @@
     }
   }
 }
+
+.buttonText {
+  svg > path {
+    fill: var(--color-text-0) !important;
+  }
+  span {
+    color: var(--color-text-1);
+  }
+}
+.svg {
+  path {
+    fill: var(--color-text-0) !important;
+  }
+}

src/css/custom.scss

@@ -372,3 +372,13 @@ textarea {
   display: flex;
   width: 100%;
 }
+
+.ant-dropdown .ant-dropdown-menu {
+  background-color: var(--color-bg-1);
+  .ant-dropdown-menu-item {
+    color: var(--color-text-1);
+    &:hover {
+      background-color: var(--color-fill-1);
+    }
+  }
+}