Feat: settings dark mode (#15184)

web/app/components/header/account-setting/api-based-extension-page/empty.tsx

@@ -1,23 +1,25 @@
 import { useTranslation } from 'react-i18next'
-import { Webhooks } from '@/app/components/base/icons/src/vender/line/development'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import {
+  RiExternalLinkLine,
+  RiPuzzle2Line,
+} from '@remixicon/react'
 
 const Empty = () => {
   const { t } = useTranslation()
 
   return (
-    <div className='mb-2 p-6 rounded-2xl bg-gray-50'>
-      <div className='flex items-center justify-center mb-3 w-12 h-12 rounded-[10px] border border-[#EAECF5]'>
-        <Webhooks className='w-6 h-6 text-gray-500' />
+    <div className='mb-2 p-6 rounded-xl bg-background-section'>
+      <div className='flex items-center justify-center mb-3 w-10 h-10 rounded-[10px] bg-components-card-bg-alt backdrop-blur-sm border-[0.5px] border-components-card-border shadow-lg'>
+        <RiPuzzle2Line className='w-5 h-5 text-text-accent' />
       </div>
-      <div className='mb-2 text-sm text-gray-600'>{t('common.apiBasedExtension.title')}</div>
+      <div className='mb-1 text-text-secondary system-sm-medium'>{t('common.apiBasedExtension.title')}</div>
       <a
-        className='flex items-center mb-2 h-[18px] text-xs text-primary-600'
+        className='flex items-center system-xs-regular text-text-accent'
         href={t('common.apiBasedExtension.linkUrl') || '/'}
         target='_blank' rel='noopener noreferrer'
       >
-        <BookOpen01 className='mr-1 w-3 h-3' />
         {t('common.apiBasedExtension.link')}
+        <RiExternalLinkLine className='ml-1 w-3 h-3' />
       </a>
     </div>
   )

web/app/components/header/account-setting/api-based-extension-page/index.tsx

@@ -5,6 +5,7 @@ import {
 } from '@remixicon/react'
 import Item from './item'
 import Empty from './empty'
+import Button from '@/app/components/base/button'
 import { useModalContext } from '@/context/modal-context'
 import { fetchApiBasedExtensionList } from '@/service/common'
 
@@ -41,13 +42,14 @@ const ApiBasedExtensionPage = () => {
           ))
         )
       }
-      <div
-        className='flex items-center justify-center px-3 h-8 text-[13px] font-medium text-gray-700 rounded-lg bg-gray-50 cursor-pointer'
+      <Button
+        variant='secondary'
+        className='w-full'
         onClick={handleOpenApiBasedExtensionModal}
       >
-        <RiAddLine className='mr-2 w-4 h-4' />
+        <RiAddLine className='mr-1 w-4 h-4' />
         {t('common.apiBasedExtension.add')}
-      </div>
+      </Button>
     </div>
   )
 }

web/app/components/header/account-setting/api-based-extension-page/item.tsx

@@ -3,8 +3,9 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiDeleteBinLine,
+  RiEditLine,
 } from '@remixicon/react'
-import { Edit02 } from '@/app/components/base/icons/src/vender/line/general'
+import Button from '@/app/components/base/button'
 import type { ApiBasedExtension } from '@/models/common'
 import { useModalContext } from '@/context/modal-context'
 import { deleteApiBasedExtension } from '@/service/common'
@@ -36,25 +37,25 @@ const Item: FC<ItemProps> = ({
   }
 
   return (
-    <div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-gray-50 hover:border-gray-200 hover:shadow-xs'>
+    <div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-components-input-bg-normal hover:border-components-input-border-active hover:shadow-xs'>
       <div className='grow'>
-        <div className='mb-0.5 text-[13px] font-medium text-gray-700'>{data.name}</div>
-        <div className='text-xs text-gray-500'>{data.api_endpoint}</div>
+        <div className='mb-0.5 text-[13px] font-medium text-text-secondary'>{data.name}</div>
+        <div className='text-xs text-text-tertiary'>{data.api_endpoint}</div>
       </div>
       <div className='hidden group-hover:flex items-center'>
-        <div
-          className='flex items-center mr-1 px-3 h-7 bg-white text-xs font-medium text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+        <Button
+          className='mr-1'
           onClick={handleOpenApiBasedExtensionModal}
         >
-          <Edit02 className='mr-[5px] w-3.5 h-3.5' />
+          <RiEditLine className='mr-1 w-4 h-4' />
           {t('common.operation.edit')}
-        </div>
-        <div
-          className='flex items-center justify-center w-7 h-7 bg-white text-gray-700 rounded-md border-[0.5px] border-gray-200 shadow-xs cursor-pointer'
+        </Button>
+        <Button
           onClick={() => setShowDeleteConfirm(true)}
         >
-          <RiDeleteBinLine className='w-4 h-4' />
-        </div>
+          <RiDeleteBinLine className='mr-1 w-4 h-4' />
+          {t('common.operation.delete')}
+        </Button>
       </div>
       {
         showDeleteConfirm

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -101,9 +101,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
           <a
             href={t('common.apiBasedExtension.linkUrl') || '/'}
             target='_blank' rel='noopener noreferrer'
-            className='group flex items-center text-xs text-text-tertiary font-normal hover:text-text-accent'
+            className='group flex items-center text-xs text-text-accent font-normal'
           >
-            <BookOpen01 className='mr-1 w-3 h-3 text-text-tertiary group-hover:text-text-accent' />
+            <BookOpen01 className='mr-1 w-3 h-3' />
             {t('common.apiBasedExtension.link')}
           </a>
         </div>