Feat：app list dark mode (#16110)

web/app/components/app/duplicate-modal/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
@@ -13,7 +13,7 @@ import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import type { AppIconType } from '@/types/app'
 
-export interface DuplicateAppModalProps {
+export type DuplicateAppModalProps = {
   appName: string
   icon_type: AppIconType | null
   icon: string
@@ -72,12 +72,14 @@ const DuplicateAppModal = ({
       <Modal
         isShow={show}
         onClose={() => { }}
-        className={cn(s.modal, '!max-w-[480px]', 'px-8')}
+        className={cn('relative !max-w-[480px]', 'px-8')}
       >
-        <span className={s.close} onClick={onHide} />
-        <div className={s.title}>{t('app.duplicateTitle')}</div>
-        <div className={s.content}>
-          <div className={s.subTitle}>{t('explore.appCustomize.subTitle')}</div>
+        <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onHide}>
+          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+        </div>
+        <div className='relative mt-3 mb-9 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.duplicateTitle')}</div>
+        <div className='mb-9 system-sm-regular text-text-secondary'>
+          <div className='mb-2 system-md-medium'>{t('explore.appCustomize.subTitle')}</div>
           <div className='flex items-center justify-between space-x-2'>
             <AppIcon
               size='large'

web/app/components/app/duplicate-modal/style.module.css

@@ -1,36 +0,0 @@
-.modal {
-  position: relative;
-}
-
-.modal .close {
-  position: absolute;
-  right: 16px;
-  top: 25px;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: center no-repeat url(~@/app/components/datasets/create/assets/close.svg);
-  background-size: 16px;
-  cursor: pointer;
-}
-
-.modal .title {
-  @apply mb-9;
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 30px;
-  color: #101828;
-}
-
-.modal .content {
-  @apply mb-9;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  color: #101828;
-}
-
-.subTitle {
-  margin-bottom: 8px;
-  font-weight: 500;
-}

web/app/components/app/switch-app-modal/index.tsx

@@ -6,7 +6,6 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
@@ -25,7 +24,7 @@ import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/aler
 import AppIcon from '@/app/components/base/app-icon'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
-interface SwitchAppModalProps {
+type SwitchAppModalProps = {
   show: boolean
   appDetail: App
   onSuccess?: () => void
@@ -95,24 +94,24 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
   return (
     <>
       <Modal
-        className={cn('p-8 max-w-[600px] w-[600px]', s.bg)}
+        className={cn('p-8 max-w-[600px] w-[600px]')}
         isShow={show}
         onClose={() => { }}
       >
         <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+          <RiCloseLine className='w-4 h-4 text-text-tertiary' />
         </div>
-        <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
+        <div className='w-12 h-12 p-3 bg-background-default-burn rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
           <AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
         </div>
-        <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('app.switch')}</div>
-        <div className='my-1 text-gray-500 text-sm leading-5'>
+        <div className='relative mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('app.switch')}</div>
+        <div className='my-1 text-text-tertiary text-sm leading-5'>
           <span>{t('app.switchTipStart')}</span>
-          <span className='text-gray-700 font-medium'>{t('app.switchTip')}</span>
+          <span className='text-text-secondary font-medium'>{t('app.switchTip')}</span>
           <span>{t('app.switchTipEnd')}</span>
         </div>
         <div className='pb-4'>
-          <div className='py-2 text-sm font-medium leading-[20px] text-gray-900'>{t('app.switchLabel')}</div>
+          <div className='py-2 text-sm font-medium leading-[20px] text-text-primary'>{t('app.switchLabel')}</div>
           <div className='flex items-center justify-between space-x-2'>
             <AppIcon
               size='large'
@@ -147,7 +146,7 @@ const SwitchAppModal = ({ show, appDetail, inAppDetail = false, onSuccess, onClo
         <div className='pt-6 flex justify-between items-center'>
           <div className='flex items-center'>
             <Checkbox className='shrink-0' checked={removeOriginal} onCheck={() => setRemoveOriginal(!removeOriginal)} />
-            <div className="ml-2 text-sm leading-5 text-gray-700 cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
+            <div className="ml-2 text-sm leading-5 text-text-secondary cursor-pointer" onClick={() => setRemoveOriginal(!removeOriginal)}>{t('app.removeOriginal')}</div>
           </div>
           <div className='flex items-center'>
             <Button className='mr-2' onClick={onClose}>{t('app.newApp.Cancel')}</Button>

web/app/components/app/switch-app-modal/style.module.css

@@ -1,3 +0,0 @@
-.bg {
-  background: linear-gradient(180deg, rgba(247, 144, 9, 0.05) 0%, rgba(247, 144, 9, 0.00) 24.41%), #F9FAFB;
-}