Feat: settings dark mode (#15184)

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>
   )
 }