Fix/explore darkmode (#14751)

web/app/components/explore/app-card/index.tsx

@@ -5,8 +5,7 @@ import Button from '../../base/button'
 import cn from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
-import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
-import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+import { AppTypeIcon } from '../../app/type-selector'
 export type AppCardProps = {
   app: App
   canCreate: boolean
@@ -23,7 +22,7 @@ const AppCard = ({
   const { t } = useTranslation()
   const { app: appBasicInfo } = app
   return (
-    <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
+    <div className={cn('relative overflow-hidden pb-2 group col-span-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border rounded-lg shadow-sm flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg')}>
       <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
         <div className='relative shrink-0'>
           <AppIcon
@@ -33,23 +32,8 @@ const AppCard = ({
             background={appBasicInfo.icon_background}
             imageUrl={appBasicInfo.icon_url}
           />
-          <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
-            {appBasicInfo.mode === 'advanced-chat' && (
-              <ChatBot className='w-3 h-3 text-[#1570EF]' />
-            )}
-            {appBasicInfo.mode === 'agent-chat' && (
-              <CuteRobot className='w-3 h-3 text-indigo-600' />
-            )}
-            {appBasicInfo.mode === 'chat' && (
-              <ChatBot className='w-3 h-3 text-[#1570EF]' />
-            )}
-            {appBasicInfo.mode === 'completion' && (
-              <AiText className='w-3 h-3 text-[#0E9384]' />
-            )}
-            {appBasicInfo.mode === 'workflow' && (
-              <Route className='w-3 h-3 text-[#f79009]' />
-            )}
-          </span>
+          <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[4px] border border-divider-regular outline outline-components-panel-on-panel-item-bg'
+            className='w-3 h-3' type={appBasicInfo.mode} />
         </div>
         <div className='grow w-0 py-[1px]'>
           <div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
@@ -64,14 +48,14 @@ const AppCard = ({
           </div>
         </div>
       </div>
-      <div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary ">
+      <div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
         <div className='line-clamp-4 group-hover:line-clamp-2'>
           {app.description}
         </div>
       </div>
       {isExplore && canCreate && (
-        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
-          <div className={cn('flex items-center w-full space-x-2')}>
+        <div className={cn('hidden absolute bottom-0 left-0 right-0 p-4 pt-8 group-hover:flex bg-gradient-to-t from-[60.27%] from-components-panel-gradient-2 to-transparent')}>
+          <div className={cn('flex items-center w-full space-x-2 h-8')}>
             <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
               <PlusIcon className='w-4 h-4 mr-1' />
               <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
@@ -79,16 +63,6 @@ const AppCard = ({
           </div>
         </div>
       )}
-      {!isExplore && (
-        <div className={cn('hidden items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px] bg-white group-hover:flex absolute bottom-0 left-0 right-0')}>
-          <div className={cn('flex items-center w-full space-x-2')}>
-            <Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
-              <PlusIcon className='w-4 h-4 mr-1' />
-              <span className='text-xs'>{t('app.newApp.useTemplate')}</span>
-            </Button>
-          </div>
-        </div>
-      )}
     </div>
   )
 }

web/app/components/explore/app-list/index.tsx

@@ -17,7 +17,6 @@ import { fetchAppDetail, fetchAppList } from '@/service/explore'
 import { importDSL } from '@/service/apps'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import CreateAppModal from '@/app/components/explore/create-app-modal'
-import AppTypeSelector from '@/app/components/app/type-selector'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import Loading from '@/app/components/base/loading'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -28,7 +27,6 @@ import { DSLImportMode } from '@/models/app'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 
 type AppsProps = {
-  pageType?: PageType
   onSuccess?: () => void
 }
 
@@ -38,7 +36,6 @@ export enum PageType {
 }
 
 const Apps = ({
-  pageType = PageType.EXPLORE,
   onSuccess,
 }: AppsProps) => {
   const { t } = useTranslation()
@@ -62,7 +59,7 @@ const Apps = ({
   const [currentType, setCurrentType] = useState<string>('')
   const [currCategory, setCurrCategory] = useTabSearchParams({
     defaultTab: allCategoriesEn,
-    disableSearchParams: pageType !== PageType.EXPLORE,
+    disableSearchParams: false,
   })
 
   const {
@@ -166,26 +163,18 @@ const Apps = ({
 
   return (
     <div className={cn(
-      'flex flex-col',
-      pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-56px)]',
+      'flex flex-col h-full border-l-[0.5px] border-divider-regular',
     )}>
-      {pageType === PageType.EXPLORE && (
-        <div className='shrink-0 pt-6 px-12'>
-          <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
-          <div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
-        </div>
-      )}
+
+      <div className='shrink-0 pt-6 px-12'>
+        <div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
+        <div className='text-text-tertiary text-sm'>{t('explore.apps.description')}</div>
+      </div>
+
       <div className={cn(
-        'flex items-center justify-between mt-6',
-        pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
+        'flex items-center justify-between mt-6 px-12',
       )}>
         <>
-          {pageType !== PageType.EXPLORE && (
-            <>
-              <AppTypeSelector value={currentType} onChange={setCurrentType}/>
-              <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
-            </>
-          )}
           <Category
             list={categories}
             value={currCategory}
@@ -205,19 +194,17 @@ const Apps = ({
       </div>
 
       <div className={cn(
-        'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
-        pageType === PageType.EXPLORE ? 'mt-4' : 'mt-0 pt-2',
+        'relative flex flex-1 pb-6 flex-col overflow-auto shrink-0 grow mt-4',
       )}>
         <nav
           className={cn(
             s.appList,
-            'grid content-start shrink-0',
-            pageType === PageType.EXPLORE ? 'gap-4 px-6 sm:px-12' : 'gap-3 px-8  sm:!grid-cols-2 md:!grid-cols-3 lg:!grid-cols-4',
+            'grid content-start shrink-0 gap-4 px-6 sm:px-12',
           )}>
           {searchFilteredList.map(app => (
             <AppCard
               key={app.app_id}
-              isExplore={pageType === PageType.EXPLORE}
+              isExplore
               app={app}
               canCreate={hasEditPermission}
               onCreate={() => {

web/app/components/explore/index.tsx

@@ -40,7 +40,7 @@ const Explore: FC<IExploreProps> = ({
   }, [isCurrentWorkspaceDatasetOperator])
 
   return (
-    <div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
+    <div className='flex h-full bg-background-body border-t border-divider-regular overflow-hidden'>
       <ExploreContext.Provider
         value={
           {

web/app/components/explore/item-operation/index.tsx

@@ -52,33 +52,33 @@ const ItemOperation: FC<IItemOperationProps> = ({
       <PortalToFollowElemTrigger
         onClick={() => setOpen(v => !v)}
       >
-        <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} !bg-gray-100 !shadow-none`)}></div>
+        <div className={cn(className, s.btn, 'h-6 w-6 rounded-md border-none py-1', (isItemHovering || open) && `${s.open} !bg-components-actionbar-bg !shadow-none`)}></div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
         className="z-50"
       >
         <div
           ref={ref}
-          className={'min-w-[120px] p-1 bg-white rounded-lg border border--gray-200 shadow-lg'}
+          className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border border-components-panel-border shadow-lg'}
           onMouseEnter={setIsHovering}
           onMouseLeave={setNotHovering}
           onClick={(e) => {
             e.stopPropagation()
           }}
         >
-          <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}>
-            <Pin02 className='shrink-0 w-4 h-4 text-gray-500' />
+          <div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={togglePin}>
+            <Pin02 className='shrink-0 w-4 h-4 text-text-secondary' />
             <span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
           </div>
           {isShowRenameConversation && (
-            <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={onRenameConversation}>
-              <RiEditLine className='shrink-0 w-4 h-4 text-gray-500' />
+            <div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={onRenameConversation}>
+              <RiEditLine className='shrink-0 w-4 h-4 text-text-secondary' />
               <span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
             </div>
           )}
           {isShowDelete && (
-            <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
-              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2')} />
+            <div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-state-base-hover group')} onClick={onDelete} >
+              <RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-text-secondary stroke-2')} />
               <span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
             </div>
           )}

web/app/components/explore/item-operation/style.module.css

@@ -3,7 +3,7 @@
 }
 
 .actionName {
-  @apply text-gray-700 text-sm;
+  @apply text-text-secondary text-sm;
 }
 
 .commonIcon {
@@ -29,5 +29,5 @@ body .btn:hover {
 }
 
 .deleteActionItem:hover .deleteActionItemChild {
-  @apply text-red-500; 
-}
+  @apply text-red-500;
+}

web/app/components/explore/sidebar/app-nav-item/index.tsx

@@ -3,7 +3,6 @@ import React, { useRef } from 'react'
 
 import { useRouter } from 'next/navigation'
 import { useHover } from 'ahooks'
-import s from './style.module.css'
 import cn from '@/utils/classnames'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
@@ -46,10 +45,8 @@ export default function AppNavItem({
     <div
       ref={ref}
       key={id}
-      className={cn(
-        s.item,
-        isSelected ? s.active : 'hover:bg-gray-200',
-        'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
+      className={cn('text-components-menu-item-text system-sm-medium flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
+        isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
       )}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().

web/app/components/explore/sidebar/app-nav-item/style.module.css

@@ -1,9 +0,0 @@
-/* .item:hover, */
-.item.active {
-  border: 0.5px solid #EAECF0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  border-radius: 8px;
-  background: #FFFFFF;
-  color: #344054;
-  font-weight: 500;
-}