Feat: settings dark mode (#15184)

web/app/components/header/account-setting/data-source-page/panel/index.tsx

@@ -8,12 +8,13 @@ import ConfigItem from './config-item'
 
 import s from './style.module.css'
 import { DataSourceType } from './types'
+import Button from '@/app/components/base/button'
 import { DataSourceProvider } from '@/models/common'
 import cn from '@/utils/classnames'
 
 type Props = {
   type: DataSourceType
-  provider: DataSourceProvider
+  provider?: DataSourceProvider
   isConfigured: boolean
   onConfigure: () => void
   readOnly: boolean
@@ -43,13 +44,13 @@ const Panel: FC<Props> = ({
   return (
     <div className='mb-2 bg-background-section-burn rounded-xl'>
       <div className='flex items-center px-3 py-[9px]'>
-        <div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} />
+        <div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg !bg-background-default')} />
         <div className='grow'>
           <div className='flex items-center h-5'>
             <div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div>
             {isWebsite && (
-              <div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'>
-                <span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
+              <div className='ml-1 leading-[18px] px-1.5 rounded-md bg-components-badge-white-to-dark text-xs font-medium text-text-secondary'>
+                <span className='text-text-tertiary'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
               </div>
             )}
           </div>
@@ -66,16 +67,13 @@ const Panel: FC<Props> = ({
             {
               isConfigured
                 ? (
-                  <div
-                    className={
-                      `flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
-                  rounded-md text-xs font-medium text-gray-700
-                  ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
-                    }
+                  <Button
+                    disabled={readOnly}
+                    className='ml-3'
                     onClick={onConfigure}
                   >
                     {t('common.dataSource.configure')}
-                  </div>
+                  </Button>
                 )
                 : (
                   <>