feat: enhance UI components with improved styling and icon updates
This commit is contained in:
twwu
parent
f127e10e0c
commit
25711ffae2
@ -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>
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -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={{
|
||||
|
||||
@ -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' >
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user