From 25711ffae209c9c33a718e4ac3c149cf7c40e60f Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 7 Feb 2025 16:49:10 +0800
Subject: [PATCH] feat: enhance UI components with improved styling and icon
 updates

---
 web/app/components/base/search-input/index.tsx   | 16 ++++++----------
 .../detail/completed/child-segment-list.tsx      |  2 +-
 .../detail/completed/common/chunk-content.tsx    |  4 ++--
 .../documents/detail/segment-add/index.tsx       | 16 +++++++---------
 .../datasets/documents/detail/settings/index.tsx |  2 +-
 .../datasets/documents/rename-modal.tsx          |  2 +-
 6 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 556a7bdf49..bd8d4de32a 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -1,9 +1,8 @@
 import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiSearchLine } from '@remixicon/react'
+import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 type SearchInputProps = {
   placeholder?: string
@@ -27,22 +26,19 @@ const SearchInput: FC<SearchInputProps> = ({
 
   return (
     <div className={cn(
-      'group flex items-center px-2 h-8 rounded-lg bg-gray-200 hover:bg-gray-300 border border-transparent overflow-hidden',
-      focus && '!bg-white hover:bg-white shadow-xs !border-gray-300',
-      !focus && value && 'hover:!bg-gray-200 hover:!shadow-xs hover:!border-black/5',
+      'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover border-none overflow-hidden',
+      focus && '!bg-components-input-bg-active',
       white && '!bg-white hover:!bg-white shadow-xs !border-gray-300 hover:!border-gray-300',
       className,
     )}>
       <div className="pointer-events-none shrink-0 flex items-center mr-1.5 justify-center w-4 h-4">
-        <RiSearchLine className="h-3.5 w-3.5 text-gray-500" aria-hidden="true" />
+        <RiSearchLine className="h-4 w-4 text-components-input-text-placeholder" aria-hidden="true" />
       </div>
       <input
         type="text"
         name="query"
         className={cn(
-          'grow block h-[18px] bg-gray-200 border-0 text-gray-700 text-[13px] placeholder:text-gray-500 appearance-none outline-none group-hover:bg-gray-300 caret-blue-600',
-          focus && '!bg-white hover:bg-white group-hover:bg-white placeholder:!text-gray-400',
-          !focus && value && 'hover:!bg-gray-200 group-hover:!bg-gray-200',
+          'grow block h-[18px] bg-transparent border-0 text-components-input-text-filled system-sm-regular placeholder:text-components-input-text-placeholder appearance-none outline-none caret-#295EFF',
           white && '!bg-white hover:!bg-white group-hover:!bg-white placeholder:!text-gray-400',
         )}
         placeholder={placeholder || t('common.operation.search')!}
@@ -71,7 +67,7 @@ const SearchInput: FC<SearchInputProps> = ({
             setInternalValue('')
           }}
         >
-          <XCircle className='w-3.5 h-3.5 text-gray-400 group-hover/clear:text-gray-600' />
+          <RiCloseCircleFill className='w-4 h-4 text-text-quaternary group-hover/clear:text-text-tertiary' />
         </div>
       )}
     </div>
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index 1615ea98cf..e409639049 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/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()
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index e6403fa12f..7bb8d2f54f 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -16,7 +16,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}
@@ -82,7 +82,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={{
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index 7123c99b34..18e4bb2f22 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/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' >
diff --git a/web/app/components/datasets/documents/detail/settings/index.tsx b/web/app/components/datasets/documents/detail/settings/index.tsx
index 05c52d4de8..d45e4d8602 100644
--- a/web/app/components/datasets/documents/detail/settings/index.tsx
+++ b/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
diff --git a/web/app/components/datasets/documents/rename-modal.tsx b/web/app/components/datasets/documents/rename-modal.tsx
index 883897b510..b8090db9f6 100644
--- a/web/app/components/datasets/documents/rename-modal.tsx
+++ b/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}