update css icon for mode dark agent compoent

isthaison · Nov 26, 2024 · 8c75382 · 8c75382
1 parent 54ad304
commit 8c75382
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 10 deletions.
diff --git a/web/src/less/variable.less b/web/src/less/variable.less
@@ -7,7 +7,7 @@
 @gray8: rgba(165, 163, 169, 1);
 @gray11: rgba(232, 232, 234, 1);
 @purple: rgba(127, 86, 217, 1);
-@selectedBackgroundColor: rgba(239, 248, 255, 0.1);
+@selectedBackgroundColor: rgba(239, 248, 255, 1);
 @blurBackground: rgba(22, 119, 255, 0.5);
 @blurBackgroundHover: rgba(22, 119, 255, 0.2);
 

diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.less
@@ -29,3 +29,6 @@
 .cardSelected {
   background-color: @selectedBackgroundColor;
 }
+.cardSelectedDark {
+  background-color: #ffffff2f;
+}
diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import DOMPurify from 'dompurify';
 import { useEffect, useState } from 'react';
 
+import { useTheme } from '@/components/theme-provider';
 import { ChunkTextMode } from '../../constant';
 import styles from './index.less';
 
@@ -31,6 +32,7 @@ const ChunkCard = ({
 }: IProps) => {
   const available = Number(item.available_int);
   const [enabled, setEnabled] = useState(false);
+  const { theme } = useTheme();
 
   const onChange = (checked: boolean) => {
     setEnabled(checked);
@@ -56,7 +58,8 @@ const ChunkCard = ({
   return (
     <Card
       className={classNames(styles.chunkCard, {
-        [styles.cardSelected]: selected,
+        [`${theme === 'dark' ? styles.cardSelectedDark : styles.cardSelected}`]:
+          selected,
       })}
     >
       <Flex gap={'middle'} justify={'space-between'}>

diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
@@ -99,7 +99,7 @@
   border-radius: 10px;
   min-height: 128px;
   .noteTitle {
-    background-color: #edfcff;
+    background-color: #edfcff50;
     font-size: 12px;
     padding: 6px 6px 4px;
     border-top-left-radius: 10px;

diff --git a/web/src/pages/flow/form/begin-form/index.less b/web/src/pages/flow/form/begin-form/index.less
@@ -1,7 +1,7 @@
 .dynamicInputVariable {
-  background-color: #ebe9e9;
+  background-color: #ebe9e950;
   :global(.ant-collapse-content) {
-    background-color: #f6f6f6;
+    background-color: #f6f6f657;
   }
   :global(.ant-collapse-content-box) {
     padding: 0 !important;

diff --git a/web/src/pages/flow/form/components/index.less b/web/src/pages/flow/form/components/index.less
@@ -1,7 +1,7 @@
 .dynamicInputVariable {
-  background-color: #ebe9e9;
+  background-color: #ebe9e950;
   :global(.ant-collapse-content) {
-    background-color: #f6f6f6;
+    background-color: #f6f6f657;
   }
   margin-bottom: 20px;
   .title {

diff --git a/web/src/pages/flow/form/invoke-form/index.less b/web/src/pages/flow/form/invoke-form/index.less
@@ -18,9 +18,9 @@
 }
 
 .dynamicParameterVariable {
-  background-color: #ebe9e9;
+  background-color: #ebe9e950;
   :global(.ant-collapse-content) {
-    background-color: #f6f6f6;
+    background-color: #f6f6f634;
   }
   :global(.ant-collapse-content-box) {
     padding: 0 !important;

diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
@@ -75,7 +75,7 @@ const SideBar = () => {
         mode="inline"
         items={items}
         onClick={handleMenuClick}
-        style={{ width: 312 }}
+        className={styles.menu}
       />
     </section>
   );