Skip to content

Commit 931d704

Browse files
douxcdouxc
authored
Fix/explore darkmode (langgenius#14751)
1 parent bb4e7da commit 931d704

File tree

8 files changed

+42
-92
lines changed

8 files changed

+42
-92
lines changed

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

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@ import Button from '../../base/button'
55
import cn from '@/utils/classnames'
66
import type { App } from '@/models/explore'
77
import AppIcon from '@/app/components/base/app-icon'
8-
import { AiText, ChatBot, CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
9-
import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
8+
import { AppTypeIcon } from '../../app/type-selector'
109
export type AppCardProps = {
1110
app: App
1211
canCreate: boolean
@@ -23,7 +22,7 @@ const AppCard = ({
2322
const { t } = useTranslation()
2423
const { app: appBasicInfo } = app
2524
return (
26-
<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')}>
25+
<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')}>
2726
<div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
2827
<div className='relative shrink-0'>
2928
<AppIcon
@@ -33,23 +32,8 @@ const AppCard = ({
3332
background={appBasicInfo.icon_background}
3433
imageUrl={appBasicInfo.icon_url}
3534
/>
36-
<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'>
37-
{appBasicInfo.mode === 'advanced-chat' && (
38-
<ChatBot className='w-3 h-3 text-[#1570EF]' />
39-
)}
40-
{appBasicInfo.mode === 'agent-chat' && (
41-
<CuteRobot className='w-3 h-3 text-indigo-600' />
42-
)}
43-
{appBasicInfo.mode === 'chat' && (
44-
<ChatBot className='w-3 h-3 text-[#1570EF]' />
45-
)}
46-
{appBasicInfo.mode === 'completion' && (
47-
<AiText className='w-3 h-3 text-[#0E9384]' />
48-
)}
49-
{appBasicInfo.mode === 'workflow' && (
50-
<Route className='w-3 h-3 text-[#f79009]' />
51-
)}
52-
</span>
35+
<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'
36+
className='w-3 h-3' type={appBasicInfo.mode} />
5337
</div>
5438
<div className='grow w-0 py-[1px]'>
5539
<div className='flex items-center text-sm leading-5 font-semibold text-text-secondary'>
@@ -64,31 +48,21 @@ const AppCard = ({
6448
</div>
6549
</div>
6650
</div>
67-
<div className="description-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary ">
51+
<div className="description-wrapper h-[90px] px-[14px] system-xs-regular text-text-tertiary">
6852
<div className='line-clamp-4 group-hover:line-clamp-2'>
6953
{app.description}
7054
</div>
7155
</div>
7256
{isExplore && canCreate && (
73-
<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')}>
74-
<div className={cn('flex items-center w-full space-x-2')}>
57+
<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')}>
58+
<div className={cn('flex items-center w-full space-x-2 h-8')}>
7559
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
7660
<PlusIcon className='w-4 h-4 mr-1' />
7761
<span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
7862
</Button>
7963
</div>
8064
</div>
8165
)}
82-
{!isExplore && (
83-
<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')}>
84-
<div className={cn('flex items-center w-full space-x-2')}>
85-
<Button variant='primary' className='grow h-7' onClick={() => onCreate()}>
86-
<PlusIcon className='w-4 h-4 mr-1' />
87-
<span className='text-xs'>{t('app.newApp.useTemplate')}</span>
88-
</Button>
89-
</div>
90-
</div>
91-
)}
9266
</div>
9367
)
9468
}

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

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import { fetchAppDetail, fetchAppList } from '@/service/explore'
1717
import { importDSL } from '@/service/apps'
1818
import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
1919
import CreateAppModal from '@/app/components/explore/create-app-modal'
20-
import AppTypeSelector from '@/app/components/app/type-selector'
2120
import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
2221
import Loading from '@/app/components/base/loading'
2322
import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -28,7 +27,6 @@ import { DSLImportMode } from '@/models/app'
2827
import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
2928

3029
type AppsProps = {
31-
pageType?: PageType
3230
onSuccess?: () => void
3331
}
3432

@@ -38,7 +36,6 @@ export enum PageType {
3836
}
3937

4038
const Apps = ({
41-
pageType = PageType.EXPLORE,
4239
onSuccess,
4340
}: AppsProps) => {
4441
const { t } = useTranslation()
@@ -62,7 +59,7 @@ const Apps = ({
6259
const [currentType, setCurrentType] = useState<string>('')
6360
const [currCategory, setCurrCategory] = useTabSearchParams({
6461
defaultTab: allCategoriesEn,
65-
disableSearchParams: pageType !== PageType.EXPLORE,
62+
disableSearchParams: false,
6663
})
6764

6865
const {
@@ -166,26 +163,18 @@ const Apps = ({
166163

167164
return (
168165
<div className={cn(
169-
'flex flex-col',
170-
pageType === PageType.EXPLORE ? 'h-full border-l border-gray-200' : 'h-[calc(100%-56px)]',
166+
'flex flex-col h-full border-l-[0.5px] border-divider-regular',
171167
)}>
172-
{pageType === PageType.EXPLORE && (
173-
<div className='shrink-0 pt-6 px-12'>
174-
<div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
175-
<div className='text-gray-500 text-sm'>{t('explore.apps.description')}</div>
176-
</div>
177-
)}
168+
169+
<div className='shrink-0 pt-6 px-12'>
170+
<div className={`mb-1 ${s.textGradient} text-xl font-semibold`}>{t('explore.apps.title')}</div>
171+
<div className='text-text-tertiary text-sm'>{t('explore.apps.description')}</div>
172+
</div>
173+
178174
<div className={cn(
179-
'flex items-center justify-between mt-6',
180-
pageType === PageType.EXPLORE ? 'px-12' : 'px-8',
175+
'flex items-center justify-between mt-6 px-12',
181176
)}>
182177
<>
183-
{pageType !== PageType.EXPLORE && (
184-
<>
185-
<AppTypeSelector value={currentType} onChange={setCurrentType}/>
186-
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
187-
</>
188-
)}
189178
<Category
190179
list={categories}
191180
value={currCategory}
@@ -205,19 +194,17 @@ const Apps = ({
205194
</div>
206195

207196
<div className={cn(
208-
'relative flex flex-1 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow',
209-
pageType === PageType.EXPLORE ? 'mt-4' : 'mt-0 pt-2',
197+
'relative flex flex-1 pb-6 flex-col overflow-auto shrink-0 grow mt-4',
210198
)}>
211199
<nav
212200
className={cn(
213201
s.appList,
214-
'grid content-start shrink-0',
215-
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',
202+
'grid content-start shrink-0 gap-4 px-6 sm:px-12',
216203
)}>
217204
{searchFilteredList.map(app => (
218205
<AppCard
219206
key={app.app_id}
220-
isExplore={pageType === PageType.EXPLORE}
207+
isExplore
221208
app={app}
222209
canCreate={hasEditPermission}
223210
onCreate={() => {

‎web/app/components/explore/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const Explore: FC<IExploreProps> = ({
4040
}, [isCurrentWorkspaceDatasetOperator])
4141

4242
return (
43-
<div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
43+
<div className='flex h-full bg-background-body border-t border-divider-regular overflow-hidden'>
4444
<ExploreContext.Provider
4545
value={
4646
{

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,33 +52,33 @@ const ItemOperation: FC<IItemOperationProps> = ({
5252
<PortalToFollowElemTrigger
5353
onClick={() => setOpen(v => !v)}
5454
>
55-
<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>
55+
<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>
5656
</PortalToFollowElemTrigger>
5757
<PortalToFollowElemContent
5858
className="z-50"
5959
>
6060
<div
6161
ref={ref}
62-
className={'min-w-[120px] p-1 bg-white rounded-lg border border--gray-200 shadow-lg'}
62+
className={'min-w-[120px] p-1 bg-components-panel-bg-blur backdrop-blur-[5px] rounded-lg border border-components-panel-border shadow-lg'}
6363
onMouseEnter={setIsHovering}
6464
onMouseLeave={setNotHovering}
6565
onClick={(e) => {
6666
e.stopPropagation()
6767
}}
6868
>
69-
<div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}>
70-
<Pin02 className='shrink-0 w-4 h-4 text-gray-500' />
69+
<div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={togglePin}>
70+
<Pin02 className='shrink-0 w-4 h-4 text-text-secondary' />
7171
<span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
7272
</div>
7373
{isShowRenameConversation && (
74-
<div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={onRenameConversation}>
75-
<RiEditLine className='shrink-0 w-4 h-4 text-gray-500' />
74+
<div className={cn(s.actionItem, 'hover:bg-state-base-hover group')} onClick={onRenameConversation}>
75+
<RiEditLine className='shrink-0 w-4 h-4 text-text-secondary' />
7676
<span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
7777
</div>
7878
)}
7979
{isShowDelete && (
80-
<div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-gray-50 group')} onClick={onDelete} >
81-
<RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-gray-500 stroke-2')} />
80+
<div className={cn(s.actionItem, s.deleteActionItem, 'hover:bg-state-base-hover group')} onClick={onDelete} >
81+
<RiDeleteBinLine className={cn(s.deleteActionItemChild, 'shrink-0 w-4 h-4 stroke-current text-text-secondary stroke-2')} />
8282
<span className={cn(s.actionName, s.deleteActionItemChild)}>{t('explore.sidebar.action.delete')}</span>
8383
</div>
8484
)}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
.actionName {
6-
@apply text-gray-700 text-sm;
6+
@apply text-text-secondary text-sm;
77
}
88

99
.commonIcon {
@@ -29,5 +29,5 @@ body .btn:hover {
2929
}
3030

3131
.deleteActionItem:hover .deleteActionItemChild {
32-
@apply text-red-500;
33-
}
32+
@apply text-red-500;
33+
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, { useRef } from 'react'
33

44
import { useRouter } from 'next/navigation'
55
import { useHover } from 'ahooks'
6-
import s from './style.module.css'
76
import cn from '@/utils/classnames'
87
import ItemOperation from '@/app/components/explore/item-operation'
98
import AppIcon from '@/app/components/base/app-icon'
@@ -46,10 +45,8 @@ export default function AppNavItem({
4645
<div
4746
ref={ref}
4847
key={id}
49-
className={cn(
50-
s.item,
51-
isSelected ? s.active : 'hover:bg-gray-200',
52-
'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
48+
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',
49+
isSelected ? 'bg-state-base-active text-components-menu-item-text-active' : 'hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
5350
)}
5451
onClick={() => {
5552
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‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)