Feat: web app dark mode (#14732)

web/app/components/share/text-generation/run-batch/csv-download/index.tsx

@@ -27,17 +27,17 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
 
   return (
     <div className='mt-6'>
-      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='system-sm-medium text-text-primary'>{t('share.generation.csvStructureTitle')}</div>
       <div className='mt-2 max-h-[500px] overflow-auto'>
-        <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
-          <thead className='text-gray-500'>
+        <table className='table-fixed w-full border-separate border-spacing-0 border border-divider-regular rounded-lg text-xs'>
+          <thead className='text-text-tertiary'>
             <tr>
               {addQueryContentVars.map((item, i) => (
-                <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td>
+                <td key={i} className='h-9 pl-3 pr-2 border-b border-divider-regular'>{item.name}</td>
               ))}
             </tr>
           </thead>
-          <tbody className='text-gray-300'>
+          <tbody className='text-text-secondary'>
             <tr>
               {addQueryContentVars.map((item, i) => (
                 <td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td>
@@ -58,7 +58,7 @@ const CSVDownload: FC<ICSVDownloadProps> = ({
           template,
         ]}
       >
-        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
+        <div className='flex items-center h-[18px] space-x-1 text-text-accent system-xs-medium'>
           <DownloadIcon className='w-3 h-3' />
           <span>{t('share.generation.downloadTemplate')}</span>
         </div>

web/app/components/share/text-generation/run-batch/csv-reader/index.tsx

@@ -5,7 +5,6 @@ import {
   useCSVReader,
 } from 'react-papaparse'
 import { useTranslation } from 'react-i18next'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 
@@ -41,7 +40,11 @@ const CSVReader: FC<Props> = ({
         <>
           <div
             {...getRootProps()}
-            className={cn(s.zone, zoneHover && s.zoneHover, acceptedFile ? 'px-6' : 'justify-center border-dashed text-gray-500')}
+            className={cn(
+              'flex items-center h-20 rounded-xl bg-components-dropzone-bg border border-dashed border-components-dropzone-border system-sm-regular',
+              acceptedFile && 'px-6 bg-components-panel-on-panel-item-bg border-solid border-components-panel-border hover:bg-components-panel-on-panel-item-bg-hover hover:border-components-panel-bg-blur',
+              zoneHover && 'bg-components-dropzone-bg-accent border border-components-dropzone-border-accent',
+            )}
           >
             {
               acceptedFile
@@ -49,15 +52,15 @@ const CSVReader: FC<Props> = ({
                   <div className='w-full flex items-center space-x-2'>
                     <CSVIcon className="shrink-0" />
                     <div className='flex w-0 grow'>
-                      <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{acceptedFile.name.replace(/.csv$/, '')}</span>
-                      <span className='shrink-0 text-gray-500'>.csv</span>
+                      <span className='max-w-[calc(100%_-_30px)] truncate text-text-secondary'>{acceptedFile.name.replace(/.csv$/, '')}</span>
+                      <span className='shrink-0 text-text-tertiary'>.csv</span>
                     </div>
                   </div>
                 )
                 : (
-                  <div className='flex items-center justify-center space-x-2'>
+                  <div className='w-full flex items-center justify-center space-x-2'>
                     <CSVIcon className="shrink-0" />
-                    <div className='text-gray-500'>{t('share.generation.csvUploadTitle')}<span className='text-primary-400'>{t('share.generation.browse')}</span></div>
+                    <div className='text-text-tertiary'>{t('share.generation.csvUploadTitle')}<span className='text-text-accent cursor-pointer'>{t('share.generation.browse')}</span></div>
                   </div>
                 )}
           </div>

web/app/components/share/text-generation/run-batch/csv-reader/style.module.css

@@ -1,11 +0,0 @@
-.zone {
-    @apply flex items-center h-20 rounded-xl bg-gray-50 border border-gray-200 cursor-pointer text-sm font-normal;
-}
-
-.zoneHover {
-    @apply border-solid bg-gray-100;
-}
-
-.info {
-    @apply text-gray-800 text-sm;
-}

web/app/components/share/text-generation/run-batch/index.tsx

@@ -1,17 +1,16 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import {
-  PlayIcon,
-} from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import {
   RiLoader2Line,
+  RiPlayLargeLine,
 } from '@remixicon/react'
 import CSVReader from './csv-reader'
 import CSVDownload from './csv-download'
-import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import cn from '@/utils/classnames'
 export type IRunBatchProps = {
   vars: { name: string }[]
   onSend: (data: string[][]) => void
@@ -24,6 +23,8 @@ const RunBatch: FC<IRunBatchProps> = ({
   isAllFinished,
 }) => {
   const { t } = useTranslation()
+  const media = useBreakpoints()
+  const isPC = media === MediaType.pc
 
   const [csvData, setCsvData] = React.useState<string[][]>([])
   const [isParsed, setIsParsed] = React.useState(false)
@@ -36,16 +37,15 @@ const RunBatch: FC<IRunBatchProps> = ({
   const handleSend = () => {
     onSend(csvData)
   }
-  const Icon = isAllFinished ? PlayIcon : RiLoader2Line
+  const Icon = isAllFinished ? RiPlayLargeLine : RiLoader2Line
   return (
     <div className='pt-4'>
       <CSVReader onParsed={handleParsed} />
       <CSVDownload vars={vars} />
-      <div className='mt-4 h-[1px] bg-gray-100'></div>
       <div className='flex justify-end'>
         <Button
           variant="primary"
-          className='mt-4 pl-3 pr-4'
+          className={cn('mt-4 pl-3 pr-4', !isPC && 'grow')}
           onClick={handleSend}
           disabled={!isParsed || !isAllFinished}
         >

web/app/components/share/text-generation/run-batch/res-download/index.tsx

@@ -1,13 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import { RiDownloadLine } from '@remixicon/react'
 import {
   useCSVDownloader,
 } from 'react-papaparse'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
+import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
+import cn from '@/utils/classnames'
+
 export type IResDownloadProps = {
   isMobile: boolean
   values: Record<string, string>[]
@@ -31,10 +33,17 @@ const ResDownload: FC<IResDownloadProps> = ({
       }}
       data={values}
     >
-      <Button className={cn('space-x-2 bg-white', isMobile ? '!p-0 !w-8 justify-center' : '')}>
-        <DownloadIcon className='w-4 h-4 text-[#155EEF]' />
-        {!isMobile && <span className='text-[#155EEF]'>{t('common.operation.download')}</span>}
-      </Button>
+      {isMobile && (
+        <ActionButton>
+          <RiDownloadLine className='w-4 h-4' />
+        </ActionButton>
+      )}
+      {!isMobile && (
+        <Button className={cn('space-x-1')}>
+          <RiDownloadLine className='w-4 h-4' />
+          <span>{t('common.operation.download')}</span>
+        </Button>
+      )}
     </CSVDownloader>
   )
 }