update css suitable for light and dark theme

isthaison · Nov 22, 2024 · d179080 · d179080
1 parent 7d475f8
commit d179080
Show file tree

Hide file tree

Showing 14 changed files with 23 additions and 33 deletions.
diff --git a/web/src/components/api-service/embed-modal/index.less b/web/src/components/api-service/embed-modal/index.less
@@ -4,5 +4,5 @@
 
 .codeText {
   padding: 10px;
-  background-color: #e8e8ea;
+  background-color: #ffffff09;
 }
diff --git a/web/src/components/message-item/index.less b/web/src/components/message-item/index.less
@@ -6,10 +6,6 @@
   .messageItemSectionLeft {
     width: 80%;
   }
-  .messageItemSectionRight {
-    // width: 80%;
-    // max-width: 50vw;
-  }
   .messageItemContent {
     display: inline-flex;
     gap: 20px;
@@ -20,7 +16,7 @@
   .messageText {
     .chunkText();
     padding: 0 14px;
-    background-color: rgba(249, 250, 251, 1);
+    background-color: rgba(249, 250, 251, 0.3);
     word-break: break-all;
   }
   .messageTextBase() {
@@ -33,13 +29,13 @@
   .messageText {
     .chunkText();
     .messageTextBase();
-    background-color: #e6f4ff;
+    background-color: rgba(36, 50, 252, 0.363);
     word-break: break-all;
   }
   .messageUserText {
     .chunkText();
     .messageTextBase();
-    background-color: rgb(248, 247, 247);
+    background-color: rgba(255, 255, 255, 0.3);
     word-break: break-all;
     text-align: justify;
   }

diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx
@@ -181,8 +181,8 @@ const MessageItem = ({
                 dataSource={documentList}
                 renderItem={(item) => {
                   // TODO:
-                  const fileThumbnail =
-                    documentThumbnails[item.id] || documentThumbnails[item.id];
+                  // const fileThumbnail =
+                  //   documentThumbnails[item.id] || documentThumbnails[item.id];
                   const fileExtension = getExtension(item.name);
                   return (
                     <List.Item>

diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/category-panel.tsx
@@ -37,16 +37,14 @@ const CategoryPanel = ({ chunkMethod }: { chunkMethod: string }) => {
       {imageList.length > 0 ? (
         <>
           <Title level={5} className={styles.topTitle}>
-            "{item.title}" {t('methodTitle')}
+            {`"${item.title}" ${t('methodTitle')}`}
           </Title>
           <p
             dangerouslySetInnerHTML={{
               __html: DOMPurify.sanitize(item.description),
             }}
           ></p>
-          <Title level={5}>
-            "{item.title}" {t('methodExamples')}
-          </Title>
+          <Title level={5}>{`"${item.title}" ${t('methodExamples')}`}</Title>
           <Text>{t('methodExamplesDescription')}</Text>
           <Row gutter={[10, 10]} className={styles.imageRow}>
             {imageList.map((x) => (

diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/index.less
@@ -1,5 +1,4 @@
 .testingWrapper {
   flex: 1;
-  background-color: @grayBackground;
   height: 100%;
 }
diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.less
@@ -1,6 +1,6 @@
 .testingControlWrapper {
   width: 350px;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.1);
   padding: 30px 20px;
   overflow: auto;
   height: calc(100vh - 160px);

diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less b/web/src/pages/add-knowledge/components/knowledge-testing/testing-result/index.less
@@ -1,6 +1,6 @@
 .testingResultWrapper {
   flex: 1;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.1);
   padding: 30px 20px;
   overflow: auto;
   height: calc(100vh - 160px);
@@ -24,7 +24,7 @@
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    background-color: rgba(244, 235, 255, 1);
+    background-color: rgba(255, 255, 255, 0.1);
     font-size: 10px;
     font-weight: normal;
   }

diff --git a/web/src/pages/add-knowledge/index.less b/web/src/pages/add-knowledge/index.less
@@ -6,13 +6,13 @@
     flex: 1;
     overflow-x: auto;
     height: 100%;
-    background-color: rgba(247, 248, 250, 1);
+    background-color: rgba(255, 255, 255, 0.1);
     padding: 16px 20px 28px 40px;
     display: flex;
     flex-direction: column;
   }
   .content {
-    background-color: white;
+    background-color: rgba(255, 255, 255, 0.1);
     margin-top: 16px;
     flex: 1;
   }

diff --git a/web/src/pages/chat/index.less b/web/src/pages/chat/index.less
@@ -23,7 +23,7 @@
     }
     .chatAppCardSelected {
       :global(.ant-card-body) {
-        background-color: @gray11;
+        background-color: rgba(255, 255, 255, 0.1);
         border-radius: 8px;
       }
     }
@@ -58,7 +58,7 @@
 
   .chatTitleCardSelected {
     :global(.ant-card-body) {
-      background-color: @gray11;
+      background-color: rgba(255, 255, 255, 0.1);
       border-radius: 8px;
     }
   }

diff --git a/web/src/pages/document-viewer/docx/index.less b/web/src/pages/document-viewer/docx/index.less
@@ -13,7 +13,8 @@
   :global(.document-container) {
     padding: 30px;
     width: 700px;
-    background: white;
+    background: rgba(255, 255, 255, 0.1);
+
     margin: auto;
   }
 

diff --git a/web/src/pages/flow/canvas/context-menu/index.less b/web/src/pages/flow/canvas/context-menu/index.less
@@ -1,5 +1,5 @@
 .contextMenu {
-  background: white;
+  background: rgba(255, 255, 255, 0.1);
   border-style: solid;
   box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
   position: absolute;
@@ -13,6 +13,6 @@
   }
 
   button:hover {
-    background: white;
+    background: rgba(255, 255, 255, 0.1);
   }
 }
diff --git a/web/src/pages/flow/canvas/node/index.less b/web/src/pages/flow/canvas/node/index.less
@@ -6,7 +6,7 @@
 
   padding: 10px;
   border-radius: 10px;
-  background: white;
+  background: rgba(255, 255, 255, 0.1);
   width: 200px;
 }
 

diff --git a/web/src/pages/knowledge/index.less b/web/src/pages/knowledge/index.less
@@ -16,15 +16,14 @@
     font-style: normal;
     font-weight: @fontWeight600;
     line-height: 38px;
-    color: rgba(16, 24, 40, 1);
+    color: var(--ant-color-info);
   }
   .description {
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
-    color: rgba(71, 84, 103, 1);
   }
 
   .topButton {

diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less
@@ -27,26 +27,24 @@
 
 .card {
   border-radius: 12px;
-  border: 1px solid rgba(234, 236, 240, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  background-color: rgba(255, 255, 255, 0.1);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   padding: 24px;
   width: 300px;
   cursor: pointer;
 
   .titleWrapper {
-    // flex: 1;
     .title {
       font-size: 24px;
       line-height: 32px;
       font-weight: 600;
-      color: var(--tw-ring-offset-color);
       word-break: break-all;
     }
     .description {
       font-size: 12px;
       font-weight: 600;
       line-height: 20px;
-      color: var(--tw-ring-offset-color);
     }
   }
 
@@ -72,7 +70,6 @@
   .rightText {
     font-size: 12px;
     font-weight: 600;
-    color: rgba(0, 0, 0, 0.65);
     vertical-align: middle;
   }
 }