Feat/add icons (#450)

web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.module.css

@@ -1,14 +0,0 @@
-.file-icon {
-  background: url(../../../../assets/file.svg) center center no-repeat;
-  background-size: contain;
-}
-
-.sync-icon {
-  background: url(../../../../assets/sync.svg) center center no-repeat;
-  background-size: contain;
-}
-
-.trash-icon {
-  background: url(../../../../assets/trash.svg) center center no-repeat;
-  background-size: contain;
-}

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

@@ -5,12 +5,13 @@ import Link from 'next/link'
 import { useSWRConfig } from 'swr'
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/solid'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
-import s from './index.module.css'
 import { apiPrefix } from '@/config'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import Toast from '@/app/components/base/toast'
 import type { DataSourceNotion } from '@/models/common'
+import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
+import { RefreshCw05 } from '@/app/components/base/icons/src/vender/line/arrows'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 
 type OperateProps = {
   workspace: DataSourceNotion
@@ -23,7 +24,7 @@ export default function Operate({
     cursor-pointer
   `
   const itemIconClassName = `
-  mr-2 mt-[2px] w-4 h-4
+  mr-2 mt-[2px] w-4 h-4 text-gray-500
   `
   const { t } = useTranslation()
   const { mutate } = useSWRConfig()
@@ -73,7 +74,7 @@ export default function Operate({
                     <Link
                       className={itemClassName}
                       href={`${apiPrefix}/oauth/data-source/notion`}>
-                      <div className={cn(s['file-icon'], itemIconClassName)}></div>
+                      <FilePlus02 className={itemIconClassName} />
                       <div>
                         <div className='leading-5'>{t('common.dataSource.notion.changeAuthorizedPages')}</div>
                         <div className='leading-5 text-xs text-gray-500'>
@@ -84,7 +85,7 @@ export default function Operate({
                   </Menu.Item>
                   <Menu.Item>
                     <div className={itemClassName} onClick={handleSync}>
-                      <div className={cn(s['sync-icon'], itemIconClassName)} />
+                      <RefreshCw05 className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.sync')}</div>
                     </div>
                   </Menu.Item>
@@ -92,7 +93,7 @@ export default function Operate({
                 <Menu.Item>
                   <div className='p-1'>
                     <div className={itemClassName} onClick={handleRemove}>
-                      <div className={cn(s['trash-icon'], itemIconClassName)} />
+                      <Trash03 className={itemIconClassName} />
                       <div className='leading-5'>{t('common.dataSource.notion.remove')}</div>
                     </div>
                   </div>

web/app/components/header/account-setting/index.module.css

@@ -2,14 +2,4 @@
   max-width: 720px !important;
   padding: 0 !important;
   overflow-y: auto;
-}
-
-.data-source-icon {
-  background: url(../assets/data-source.svg) center center no-repeat;
-  background-size: cover;
-}
-
-.data-source-solid-icon {
-  background: url(../assets/data-source-blue.svg) center center no-repeat;
-  background-size: cover;
 }

web/app/components/header/account-setting/index.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import { AtSymbolIcon, CubeTransparentIcon, GlobeAltIcon, UserIcon, UsersIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { GlobeAltIcon as GlobalAltIconSolid, UserIcon as UserIconSolid, UsersIcon as UsersIconSolid } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
@@ -12,21 +11,13 @@ import ProviderPage from './provider-page'
 import DataSourcePage from './data-source-page'
 import s from './index.module.css'
 import Modal from '@/app/components/base/modal'
+import { Database03 } from '@/app/components/base/icons/src/vender/line/development'
+import { Database03 as Database03Solid } from '@/app/components/base/icons/src/vender/solid/development'
 
 const iconClassName = `
   w-4 h-4 ml-3 mr-2
 `
 
-type IconProps = {
-  className?: string
-}
-const DataSourceIcon = ({ className }: IconProps) => (
-  <div className={cn(s['data-source-icon'], className)} />
-)
-const DataSourceSolidIcon = ({ className }: IconProps) => (
-  <div className={cn(s['data-source-solid-icon'], className)} />
-)
-
 type IAccountSettingProps = {
   onCancel: () => void
   activeTab?: string
@@ -81,8 +72,8 @@ export default function AccountSetting({
         {
           key: 'data-source',
           name: t('common.settings.dataSource'),
-          icon: <DataSourceIcon className={iconClassName} />,
-          activeIcon: <DataSourceSolidIcon className={iconClassName} />,
+          icon: <Database03 className={iconClassName} />,
+          activeIcon: <Database03Solid className={iconClassName} />,
         },
       ],
     },