feat: dark mode for knowledge (#15236)

web/app/components/datasets/create/website/firecrawl/header.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
   return (
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
-        <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
-        <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
-          onClick={onSetting}
-        >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
-        </div>
+        <div className='text-base font-medium text-text-secondary'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
+        <div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
+        <Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
+          <RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+          <span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
+            {t(`${I18N_PREFIX}.configureFirecrawl`)}
+          </span>
+        </Button>
       </div>
       <a
         href='https://docs.firecrawl.dev/introduction'
-        target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
-        {t(`${I18N_PREFIX}.firecrawlDoc`)}
+        <RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
+        <span>{t(`${I18N_PREFIX}.firecrawlDoc`)}</span>
       </a>
     </div>
   )

web/app/components/datasets/create/website/firecrawl/index.tsx

@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
 import ErrorMessage from '../base/error-message'
 import Header from './header'
 import Options from './options'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import Toast from '@/app/components/base/toast'
@@ -99,7 +98,7 @@ const FireCrawl: FC<Props> = ({
           isError: false,
           data: {
             ...res,
-            total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+            total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
           },
         }
       }
@@ -116,7 +115,7 @@ const FireCrawl: FC<Props> = ({
       // update the progress
       setCrawlResult({
         ...res,
-        total: Math.min(res.total, parseFloat(crawlOptions.limit as string)),
+        total: Math.min(res.total, Number.parseFloat(crawlOptions.limit as string)),
       })
       onCheckedCrawlResultChange(res.data || []) // default select the crawl result
       await sleep(2500)
@@ -179,10 +178,10 @@ const FireCrawl: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
-          className={cn('mt-4')}
+          className='mt-4'
           controlFoldOptions={controlFoldOptions}
         >
           <Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
@@ -194,7 +193,7 @@ const FireCrawl: FC<Props> = ({
               && <Crawling
                 className='mt-2'
                 crawledNum={crawlResult?.current || 0}
-                totalNum={crawlResult?.total || parseFloat(crawlOptions.limit as string) || 0}
+                totalNum={crawlResult?.total || Number.parseFloat(crawlOptions.limit as string) || 0}
               />}
             {showError && (
               <ErrorMessage className='rounded-b-xl' title={t(`${I18N_PREFIX}.exceptionErrorTitle`)} errorMsg={crawlErrorMessage} />
@@ -206,7 +205,7 @@ const FireCrawl: FC<Props> = ({
                 checkedList={checkedCrawlResult}
                 onSelectedChange={onCheckedCrawlResultChange}
                 onPreview={onPreview}
-                usedTime={parseFloat(crawlResult?.time_consuming as string) || 0}
+                usedTime={Number.parseFloat(crawlResult?.time_consuming as string) || 0}
               />
             }
           </div>

web/app/components/datasets/create/website/firecrawl/options.tsx

@@ -36,6 +36,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.crawlSubPage`)}
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <div className='flex justify-between space-x-4'>
         <Field
@@ -76,6 +77,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.extractOnlyMainContent`)}
         isChecked={payload.only_main_content}
         onChange={handleChange('only_main_content')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
     </div>
   )