feat: dark mode for knowledge (#15236)

web/app/components/datasets/documents/detail/completed/child-segment-list.tsx

@@ -165,7 +165,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
                   onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
                   labelClassName={focused ? 'bg-state-accent-solid text-text-primary-on-surface' : ''}
                   labelInnerClassName={'text-[10px] font-semibold align-bottom leading-6'}
-                  contentClassName={classNames('!leading-6', focused ? 'bg-state-accent-hover-alt text-text-primary' : '')}
+                  contentClassName={classNames('!leading-6', focused ? 'bg-state-accent-hover-alt text-text-primary' : 'text-text-secondary')}
                   showDivider={false}
                   onClick={(e) => {
                     e.stopPropagation()

web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx

@@ -17,7 +17,7 @@ const Textarea: FC<IContentProps> = React.memo(({
   return (
     <textarea
       className={classNames(
-        'disabled:bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto',
+        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full overflow-y-auto',
         className,
       )}
       placeholder={placeholder}
@@ -83,7 +83,7 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
     <textarea
       ref={textareaRef}
       className={classNames(
-        'disabled:bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full',
+        'bg-transparent inset-0 outline-none border-none appearance-none resize-none w-full',
         className,
       )}
       style={{

web/app/components/datasets/documents/detail/segment-add/index.tsx

@@ -103,15 +103,13 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
         manualClose
         trigger='click'
         htmlContent={
-          <div className='w-full p-1'>
-            <button
-              type='button'
-              className='w-full py-1.5 px-2 flex items-center hover:bg-state-base-hover rounded-lg text-text-secondary system-md-regular'
-              onClick={showBatchModal}
-            >
-              {t('datasetDocuments.list.action.batchAdd')}
-            </button>
-          </div>
+          <button
+            type='button'
+            className='w-full py-1.5 px-2 flex items-center rounded-lg text-text-secondary system-md-regular'
+            onClick={showBatchModal}
+          >
+            {t('datasetDocuments.list.action.batchAdd')}
+          </button>
         }
         btnElement={
           <div className='flex justify-center items-center' >

web/app/components/datasets/documents/detail/settings/index.tsx

@@ -57,7 +57,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
 
   return (
     <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
-      <div className="grow bg-white">
+      <div className="grow">
         {!documentDetail && <Loading type='app' />}
         {dataset && documentDetail && (
           <StepTwo

web/app/components/datasets/documents/list.tsx

@@ -16,7 +16,6 @@ import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
-import { Edit03 } from '../../base/icons/src/vender/solid/general'
 import { Globe01 } from '../../base/icons/src/vender/line/mapsAndTravel'
 import ChunkingModeLabel from '../common/chunking-mode-label'
 import FileTypeIcon from '../../base/file-uploader/file-type-icon'
@@ -343,7 +342,7 @@ export const OperationAction: FC<{
           position='br'
           btnElement={
             <div className={cn(s.commonIcon)}>
-              <RiMoreFill className='w-4 h-4 text-text-components-button-secondary-text' />
+              <RiMoreFill className='w-4 h-4 text-components-button-secondary-text' />
             </div>
           }
           btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
@@ -598,7 +597,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                             handleShowRenameModal(doc)
                           }}
                         >
-                          <Edit03 className='w-4 h-4 text-text-tertiary' />
+                          <RiEditLine className='w-4 h-4 text-text-tertiary' />
                         </div>
                       </Tooltip>
                     </div>

web/app/components/datasets/documents/rename-modal.tsx

@@ -59,7 +59,7 @@ const RenameModal: FC<Props> = ({
       isShow
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('datasetDocuments.list.table.name')}</div>
+      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('datasetDocuments.list.table.name')}</div>
       <Input
         className='mt-2 h-10'
         value={newName}

web/app/components/datasets/documents/style.module.css

@@ -9,7 +9,7 @@
   max-width: 200px;
 }
 .actionIconWrapperList {
-  @apply h-6 w-6 rounded-md border-none p-1 hover:bg-gray-100 !important;
+  @apply h-6 w-6 rounded-md border-none p-1 hover:bg-state-base-hover !important;
 }
 .actionIconWrapperDetail {
   @apply p-2 bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover
@@ -17,7 +17,7 @@
   shadow-xs shadow-shadow-shadow-3 !important;
 }
 .actionItem {
-  @apply h-9 py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer;
+  @apply h-9 py-2 px-3 mx-1 flex items-center gap-2 hover:bg-state-base-hover rounded-lg cursor-pointer;
 }
 .deleteActionItem {
   @apply hover:bg-state-destructive-hover !important;