Skip to content

Commit 076bd1c

Browse files
JzoNgKVOiamjoel
JzoNgKVO
authored and
iamjoel
committed
Feat: dark mode for logs and annotations (#11575)
1 parent 880094c commit 076bd1c

File tree

42 files changed

+427
-463
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+427
-463
lines changed

‎web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
141141

142142
if (!appDetail) {
143143
return (
144-
<div className='flex h-full items-center justify-center bg-white'>
144+
<div className='flex h-full items-center justify-center bg-background-body'>
145145
<Loading />
146146
</div>
147147
)
@@ -152,7 +152,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
152152
{appDetail && (
153153
<AppSideBar title={appDetail.name} icon={appDetail.icon} icon_background={appDetail.icon_background} desc={appDetail.mode} navigation={navigation} />
154154
)}
155-
<div className="bg-white grow overflow-hidden">
155+
<div className="bg-components-panel-bg grow overflow-hidden">
156156
{children}
157157
</div>
158158
</div>

‎web/app/components/app/annotation/add-annotation-modal/edit-item/index.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { FC } from 'react'
33
import React from 'react'
44
import { useTranslation } from 'react-i18next'
5-
import Textarea from 'rc-textarea'
5+
import Textarea from '@/app/components/base/textarea'
66
import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
77

88
export enum EditItemType {
@@ -31,12 +31,10 @@ const EditItem: FC<Props> = ({
3131
{avatar}
3232
</div>
3333
<div className='grow'>
34-
<div className='mb-1 leading-[18px] text-xs font-semibold text-gray-900'>{name}</div>
34+
<div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
3535
<Textarea
36-
className='mt-1 block w-full leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none'
3736
value={content}
3837
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
39-
autoSize={{ minRows: 3 }}
4038
placeholder={placeholder}
4139
autoFocus
4240
/>

‎web/app/components/app/annotation/add-annotation-modal/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState } from 'react'
44
import { useTranslation } from 'react-i18next'
55
import type { AnnotationItemBasic } from '../type'
66
import EditItem, { EditItemType } from './edit-item'
7+
import Checkbox from '@/app/components/base/checkbox'
78
import Drawer from '@/app/components/base/drawer-plus'
89
import Button from '@/app/components/base/button'
910
import Toast from '@/app/components/base/toast'
@@ -96,11 +97,11 @@ const AddAnnotationModal: FC<Props> = ({
9697
<AnnotationFull />
9798
</div>
9899
)}
99-
<div className='px-6 flex h-16 items-center justify-between border-t border-black/5 bg-gray-50 rounded-bl-xl rounded-br-xl leading-[18px] text-[13px] font-medium text-gray-500'>
100+
<div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
100101
<div
101102
className='flex items-center space-x-2'
102103
>
103-
<input type="checkbox" checked={isCreateNext} onChange={() => setIsCreateNext(!isCreateNext)} className="w-4 h-4 rounded border-gray-300 text-blue-700 focus:ring-blue-700" />
104+
<Checkbox checked={isCreateNext} onCheck={() => setIsCreateNext(!isCreateNext)} />
104105
<div>{t('appAnnotation.addModal.createNext')}</div>
105106
</div>
106107
<div className='mt-2 flex space-x-2'>

‎web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@ const CSVDownload: FC = () => {
3333

3434
return (
3535
<div className='mt-6'>
36-
<div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
36+
<div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
3737
<div className='mt-2 max-h-[500px] overflow-auto'>
38-
<table className='table-fixed w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
39-
<thead className='text-gray-500'>
38+
<table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
39+
<thead className='text-text-tertiary'>
4040
<tr>
41-
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('appAnnotation.batchModal.question')}</td>
42-
<td className='h-9 pl-3 pr-2 border-b border-gray-200'>{t('appAnnotation.batchModal.answer')}</td>
41+
<td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.question')}</td>
42+
<td className='h-9 pl-3 pr-2 border-b border-divider-regular'>{t('appAnnotation.batchModal.answer')}</td>
4343
</tr>
4444
</thead>
4545
<tbody className='text-gray-700'>
4646
<tr>
47-
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
48-
<td className='h-9 pl-3 pr-2 border-b border-gray-100 text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
47+
<td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.question')} 1</td>
48+
<td className='h-9 pl-3 pr-2 border-b border-divider-subtle text-[13px]'>{t('appAnnotation.batchModal.answer')} 1</td>
4949
</tr>
5050
<tr>
5151
<td className='h-9 pl-3 pr-2 text-[13px]'>{t('appAnnotation.batchModal.question')} 2</td>
@@ -61,7 +61,7 @@ const CSVDownload: FC = () => {
6161
bom={true}
6262
data={getTemplate()}
6363
>
64-
<div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
64+
<div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'>
6565
<DownloadIcon className='w-3 h-3 mr-1' />
6666
{t('appAnnotation.batchModal.template')}
6767
</div>

‎web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -91,29 +91,29 @@ const CSVUploader: FC<Props> = ({
9191
/>
9292
<div ref={dropRef}>
9393
{!file && (
94-
<div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
94+
<div className={cn('flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular', dragging && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent')}>
9595
<div className='w-full flex items-center justify-center space-x-2'>
9696
<CSVIcon className="shrink-0" />
97-
<div className='text-gray-500'>
97+
<div className='text-text-tertiary'>
9898
{t('appAnnotation.batchModal.csvUploadTitle')}
99-
<span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
99+
<span className='text-text-accent cursor-pointer' onClick={selectHandle}>{t('appAnnotation.batchModal.browse')}</span>
100100
</div>
101101
</div>
102102
{dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
103103
</div>
104104
)}
105105
{file && (
106-
<div className={cn('flex items-center h-20 px-6 rounded-xl bg-gray-50 border border-gray-200 text-sm font-normal group', 'hover:bg-[#F5F8FF] hover:border-[#B2CCFF]')}>
106+
<div className={cn('flex items-center h-20 px-6 rounded-xl bg-components-panel-bg border border-components-panel-border text-sm font-normal group', 'hover:bg-components-panel-bg-blur hover:border-components-panel-bg-blur')}>
107107
<CSVIcon className="shrink-0" />
108108
<div className='flex ml-2 w-0 grow'>
109-
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{file.name.replace(/.csv$/, '')}</span>
110-
<span className='shrink-0 text-gray-500'>.csv</span>
109+
<span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-text-primary'>{file.name.replace(/.csv$/, '')}</span>
110+
<span className='shrink-0 text-text-tertiary'>.csv</span>
111111
</div>
112112
<div className='hidden group-hover:flex items-center'>
113-
<Button className='!h-8 !px-3 !py-[6px] bg-white !text-[13px] !leading-[18px] text-gray-700' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
114-
<div className='mx-2 w-px h-4 bg-gray-200' />
113+
<Button variant='secondary' onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.change')}</Button>
114+
<div className='mx-2 w-px h-4 bg-divider-regular' />
115115
<div className='p-2 cursor-pointer' onClick={removeFile}>
116-
<RiDeleteBinLine className='w-4 h-4 text-gray-500' />
116+
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
117117
</div>
118118
</div>
119119
</div>

‎web/app/components/app/annotation/batch-add-annotation-modal/index.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,9 @@ const BatchModal: FC<IBatchModalProps> = ({
8888

8989
return (
9090
<Modal isShow={isShow} onClose={() => { }} className='px-8 py-6 !max-w-[520px] !rounded-xl'>
91-
<div className='relative pb-1 text-xl font-medium leading-[30px] text-gray-900'>{t('appAnnotation.batchModal.title')}</div>
91+
<div className='relative pb-1 system-xl-medium text-text-primary'>{t('appAnnotation.batchModal.title')}</div>
9292
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onCancel}>
93-
<RiCloseLine className='w-4 h-4 text-gray-500' />
93+
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
9494
</div>
9595
<CSVUploader
9696
file={currentCSV}
@@ -105,11 +105,10 @@ const BatchModal: FC<IBatchModalProps> = ({
105105
)}
106106

107107
<div className='mt-[28px] pt-6 flex justify-end'>
108-
<Button className='mr-2 text-gray-700 text-sm font-medium' onClick={onCancel}>
108+
<Button className='mr-2 text-text-tertiary system-sm-medium' onClick={onCancel}>
109109
{t('appAnnotation.batchModal.cancel')}
110110
</Button>
111111
<Button
112-
className='text-sm font-medium'
113112
variant="primary"
114113
onClick={handleSend}
115114
disabled={isAnnotationFull || !currentCSV}

‎web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

+11-15
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,11 @@
22
import type { FC } from 'react'
33
import React, { useState } from 'react'
44
import { useTranslation } from 'react-i18next'
5-
import Textarea from 'rc-textarea'
6-
import { RiDeleteBinLine } from '@remixicon/react'
7-
import cn from '@/utils/classnames'
5+
import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
86
import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
9-
import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'
10-
import { Edit04 as EditSolid } from '@/app/components/base/icons/src/vender/solid/general'
7+
import Textarea from '@/app/components/base/textarea'
118
import Button from '@/app/components/base/button'
9+
import cn from '@/utils/classnames'
1210

1311
export enum EditItemType {
1412
Query = 'query',
@@ -22,8 +20,8 @@ type Props = {
2220
}
2321

2422
export const EditTitle: FC<{ className?: string; title: string }> = ({ className, title }) => (
25-
<div className={cn(className, 'flex items-center height-[18px] text-xs font-medium text-gray-500')}>
26-
<EditSolid className='mr-1 w-3.5 h-3.5' />
23+
<div className={cn(className, 'flex items-center h-[18px] system-xs-medium text-text-tertiary')}>
24+
<RiEditFill className='mr-1 w-3.5 h-3.5' />
2725
<div>{title}</div>
2826
<div
2927
className='ml-2 grow h-[1px]'
@@ -64,32 +62,32 @@ const EditItem: FC<Props> = ({
6462
{avatar}
6563
</div>
6664
<div className='grow'>
67-
<div className='mb-1 leading-[18px] text-xs font-semibold text-gray-900'>{name}</div>
68-
<div className='leading-5 text-sm font-normal text-gray-900'>{content}</div>
65+
<div className='mb-1 system-xs-semibold text-text-primary'>{name}</div>
66+
<div className='system-sm-regular text-text-primary'>{content}</div>
6967
{!isEdit
7068
? (
7169
<div>
7270
{showNewContent && (
7371
<div className='mt-3'>
7472
<EditTitle title={editTitle} />
75-
<div className='mt-1 leading-5 text-sm font-normal text-gray-900'>{newContent}</div>
73+
<div className='mt-1 system-sm-regular text-text-primary'>{newContent}</div>
7674
</div>
7775
)}
7876
<div className='mt-2 flex items-center'>
7977
{!readonly && (
8078
<div
81-
className='flex items-center space-x-1 leading-[18px] text-xs font-medium text-[#155EEF] cursor-pointer'
79+
className='flex items-center space-x-1 system-xs-medium text-text-accent cursor-pointer'
8280
onClick={() => {
8381
setIsEdit(true)
8482
}}
8583
>
86-
<Edit04 className='mr-1 w-3.5 h-3.5' />
84+
<RiEditLine className='mr-1 w-3.5 h-3.5' />
8785
<div>{t('common.operation.edit')}</div>
8886
</div>
8987
)}
9088

9189
{showNewContent && (
92-
<div className='ml-2 flex items-center leading-[18px] text-xs font-medium text-gray-500'>
90+
<div className='ml-2 flex items-center system-xs-medium text-text-tertiary'>
9391
<div className='mr-2'>·</div>
9492
<div
9593
className='flex items-center space-x-1 cursor-pointer'
@@ -112,10 +110,8 @@ const EditItem: FC<Props> = ({
112110
<div className='mt-3'>
113111
<EditTitle title={editTitle} />
114112
<Textarea
115-
className='mt-1 block w-full leading-5 max-h-none text-sm text-gray-700 outline-none appearance-none resize-none'
116113
value={newContent}
117114
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setNewContent(e.target.value)}
118-
autoSize={{ minRows: 3 }}
119115
placeholder={placeholder}
120116
autoFocus
121117
/>

‎web/app/components/app/annotation/edit-annotation-modal/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const EditAnnotationModal: FC<Props> = ({
123123
{
124124
annotationId
125125
? (
126-
<div className='px-4 flex h-16 items-center justify-between border-t border-black/5 bg-gray-50 rounded-bl-xl rounded-br-xl leading-[18px] text-[13px] font-medium text-gray-500'>
126+
<div className='px-4 flex h-16 items-center justify-between border-t border-divider-subtle bg-background-section-burn rounded-bl-xl rounded-br-xl system-sm-medium text-text-tertiary'>
127127
<div
128128
className='flex items-center pl-3 space-x-2 cursor-pointer'
129129
onClick={() => setShowModal(true)}

‎web/app/components/app/annotation/header-opts/index.tsx

+20-25
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { Fragment, useEffect, useState } from 'react'
44
import { useTranslation } from 'react-i18next'
55
import {
66
RiAddLine,
7+
RiMoreFill,
78
} from '@remixicon/react'
89
import { useContext } from 'use-context-selector'
910
import {
@@ -14,7 +15,6 @@ import Button from '../../../base/button'
1415
import AddAnnotationModal from '../add-annotation-modal'
1516
import type { AnnotationItemBasic } from '../type'
1617
import BatchAddModal from '../batch-add-annotation-modal'
17-
import s from './style.module.css'
1818
import cn from '@/utils/classnames'
1919
import CustomPopover from '@/app/components/base/popover'
2020
import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
@@ -80,17 +80,17 @@ const HeaderOptions: FC<Props> = ({
8080
const Operations = () => {
8181
return (
8282
<div className="w-full py-1">
83-
<button className={s.actionItem} onClick={() => {
83+
<button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]' onClick={() => {
8484
setShowBulkImportModal(true)
8585
}}>
86-
<FilePlus02 className={s.actionItemIcon} />
87-
<span className={s.actionName}>{t('appAnnotation.table.header.bulkImport')}</span>
86+
<FilePlus02 className='w-4 h-4 text-text-tertiary' />
87+
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkImport')}</span>
8888
</button>
8989
<Menu as="div" className="relative w-full h-full">
90-
<Menu.Button className={s.actionItem}>
91-
<FileDownload02 className={s.actionItemIcon} />
92-
<span className={s.actionName}>{t('appAnnotation.table.header.bulkExport')}</span>
93-
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-gray-500' />
90+
<Menu.Button className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
91+
<FileDownload02 className='w-4 h-4 text-text-tertiary' />
92+
<span className='grow text-text-secondary system-sm-regular text-left'>{t('appAnnotation.table.header.bulkExport')}</span>
93+
<ChevronRight className='shrink-0 w-[14px] h-[14px] text-text-tertiary' />
9494
</Menu.Button>
9595
<Transition
9696
as={Fragment}
@@ -103,11 +103,7 @@ const HeaderOptions: FC<Props> = ({
103103
>
104104
<Menu.Items
105105
className={cn(
106-
`
107-
absolute top-[1px] py-1 min-w-[100px] z-10 bg-white border-[0.5px] border-gray-200
108-
divide-y divide-gray-100 origin-top-right rounded-xl
109-
`,
110-
s.popup,
106+
'absolute top-[1px] left-1 -translate-x-full py-1 min-w-[100px] z-10 bg-components-panel-bg border-[0.5px] border-components-panel-on-panel-item-bg origin-top-right rounded-xl shadow-xs',
111107
)}
112108
>
113109
<CSVDownloader
@@ -119,12 +115,12 @@ const HeaderOptions: FC<Props> = ({
119115
...list.map(item => [item.question, item.answer]),
120116
]}
121117
>
122-
<button disabled={annotationUnavailable} className={s.actionItem}>
123-
<span className={s.actionName}>CSV</span>
118+
<button disabled={annotationUnavailable} className='h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]'>
119+
<span className='grow text-text-secondary system-sm-regular text-left'>CSV</span>
124120
</button>
125121
</CSVDownloader>
126-
<button disabled={annotationUnavailable} className={cn(s.actionItem, '!border-0')} onClick={JSONLOutput}>
127-
<span className={s.actionName}>JSONL</span>
122+
<button disabled={annotationUnavailable} className={cn('h-9 py-2 px-3 mx-1 flex items-center space-x-2 hover:bg-components-panel-on-panel-item-bg-hover rounded-lg cursor-pointer disabled:opacity-50 w-[calc(100%_-_8px)]', '!border-0')} onClick={JSONLOutput}>
123+
<span className='grow text-text-secondary system-sm-regular text-left'>JSONL</span>
128124
</button>
129125
</Menu.Items>
130126
</Transition>
@@ -137,21 +133,20 @@ const HeaderOptions: FC<Props> = ({
137133

138134
return (
139135
<div className='flex space-x-2'>
140-
<Button variant='primary' onClick={() => setShowAddModal(true)} className='flex items-center !h-8 !px-3 !text-[13px] space-x-2'>
141-
<RiAddLine className='w-4 h-4' />
136+
<Button variant='primary' onClick={() => setShowAddModal(true)}>
137+
<RiAddLine className='w-4 h-4 mr-0.5' />
142138
<div>{t('appAnnotation.table.header.addAnnotation')}</div>
143139
</Button>
144140
<CustomPopover
145141
htmlContent={<Operations />}
146142
position="br"
147143
trigger="click"
148-
btnElement={<div className={cn(s.actionIcon, s.commonIcon)} />}
149-
btnClassName={open =>
150-
cn(
151-
open ? 'border-gray-300 !bg-gray-100 !shadow-none' : 'border-gray-200',
152-
s.actionIconWrapper,
153-
)
144+
btnElement={
145+
<Button variant='secondary' className='w-8 p-0'>
146+
<RiMoreFill className='w-4 h-4' />
147+
</Button>
154148
}
149+
btnClassName='p-0 border-0'
155150
className={'!w-[155px] h-fit !z-20'}
156151
popupClassName='!w-full !overflow-visible'
157152
manualClose

0 commit comments

Comments
 (0)