fixed css night mode for flow and header item checked

isthaison · Nov 22, 2024 · 3ae9253 · 3ae9253
1 parent 32d7228
commit 3ae9253
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less
@@ -48,6 +48,26 @@
       color: white;
     }
   }
+  :global(.ant-radio-button-wrapper-checked.dark) {
+    border-radius: 0px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.first) {
+    border-top-left-radius: 6px !important;
+    border-bottom-left-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
+  :global(.ant-radio-button-wrapper-checked.dark.last) {
+    border-top-right-radius: 6px !important;
+    border-bottom-right-radius: 6px !important;
+    & a {
+      color: white;
+    }
+  }
 }
 
 .ant-radio-button-wrapper-checked {

diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx
@@ -10,6 +10,7 @@ import { MouseEventHandler, useCallback, useMemo } from 'react';
 import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
+import { useTheme } from '@/components/theme-provider';
 import styles from './index.less';
 
 const { Header } = Layout;
@@ -22,7 +23,7 @@ const RagHeader = () => {
   const { pathname } = useLocation();
   const { t } = useTranslate('header');
   const appConf = useFetchAppConf();
-
+  const { theme: themeRag } = useTheme();
   const tagsData = useMemo(
     () => [
       { path: '/knowledge', name: t('knowledgeBase'), icon: KnowledgeBaseIcon },
@@ -81,8 +82,12 @@ const RagHeader = () => {
           className={styles.radioGroup}
           value={currentPath}
         >
-          {tagsData.map((item) => (
-            <Radio.Button value={item.name} key={item.name}>
+          {tagsData.map((item, index) => (
+            <Radio.Button
+              className={`${themeRag === 'dark' ? 'dark' : 'light'} ${index === 0 ? 'first' : ''} ${index === tagsData.length - 1 ? 'last' : ''}`}
+              value={item.name}
+              key={item.name}
+            >
               <a href={item.path}>
                 <Flex
                   align="center"

diff --git a/web/src/pages/flow/list/flow-card/index.less b/web/src/pages/flow/list/flow-card/index.less
@@ -28,6 +28,7 @@
 .card {
   border-radius: 12px;
   border: 1px solid rgba(234, 236, 240, 1);
+  background-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   padding: 24px;
   width: 300px;
@@ -39,14 +40,12 @@
       font-size: 24px;
       line-height: 32px;
       font-weight: 600;
-      color: rgba(0, 0, 0, 0.88);
       word-break: break-all;
     }
     .description {
       font-size: 12px;
       font-weight: 600;
       line-height: 20px;
-      color: rgba(0, 0, 0, 0.45);
     }
   }
 
@@ -72,7 +71,6 @@
   .rightText {
     font-size: 12px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.65);
     vertical-align: middle;
   }
 }