Skip to content

Commit 444d89b

Browse files
WTW0313parambharat
WTW0313
authored and
parambharat
committed
feat: dark mode for knowledge (langgenius#15236)
1 parent 2654153 commit 444d89b

File tree

72 files changed

+473
-761
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+473
-761
lines changed

‎web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

+2-9
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
// CommandLineIcon as CommandLineSolidIcon,
1616
DocumentTextIcon as DocumentTextSolidIcon,
1717
} from '@heroicons/react/24/solid'
18-
import { RiApps2AddLine, RiInformation2Line } from '@remixicon/react'
18+
import { RiApps2AddLine, RiBookOpenLine, RiInformation2Line } from '@remixicon/react'
1919
import s from './style.module.css'
2020
import classNames from '@/utils/classnames'
2121
import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
@@ -58,13 +58,6 @@ const TargetSolidIcon = ({ className }: SVGProps<SVGElement>) => {
5858
</svg>
5959
}
6060

61-
const BookOpenIcon = ({ className }: SVGProps<SVGElement>) => {
62-
return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
63-
<path opacity="0.12" d="M1 3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7V10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1Z" fill="#155EEF" />
64-
<path d="M6 10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7M6 10.5V4.7M6 10.5L6.05003 10.425C6.39735 9.90398 6.57101 9.64349 6.80045 9.45491C7.00357 9.28796 7.23762 9.1627 7.4892 9.0863C7.77337 9 8.08645 9 8.71259 9H9.4C9.96005 9 10.2401 9 10.454 8.89101C10.6422 8.79513 10.7951 8.64215 10.891 8.45399C11 8.24008 11 7.96005 11 7.4V3.1C11 2.53995 11 2.25992 10.891 2.04601C10.7951 1.85785 10.6422 1.70487 10.454 1.60899C10.2401 1.5 9.96005 1.5 9.4 1.5H9.2C8.07989 1.5 7.51984 1.5 7.09202 1.71799C6.71569 1.90973 6.40973 2.21569 6.21799 2.59202C6 3.01984 6 3.5799 6 4.7" stroke="#155EEF" strokeLinecap="round" strokeLinejoin="round" />
65-
</svg>
66-
}
67-
6861
type IExtraInfoProps = {
6962
isMobile: boolean
7063
relatedApps?: RelatedAppResponse
@@ -131,7 +124,7 @@ const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
131124
}
132125
target='_blank' rel='noopener noreferrer'
133126
>
134-
<BookOpenIcon className='mr-1' />
127+
<RiBookOpenLine className='mr-1 text-text-accent' />
135128
{t('common.datasetMenus.viewDoc')}
136129
</a>
137130
</div>

‎web/app/components/app-sidebar/navLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function NavLink({
4444
key={name}
4545
href={href}
4646
className={classNames(
47-
isActive ? 'bg-state-accent-active text-text-accent font-semibold' : 'text-components-menu-item-text hover:bg-gray-100 hover:text-components-menu-item-text-hover',
47+
isActive ? 'bg-state-accent-active text-text-accent font-semibold' : 'text-components-menu-item-text hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
4848
'group flex items-center h-9 rounded-md py-2 text-sm font-normal',
4949
mode === 'expand' ? 'px-3' : 'px-2.5',
5050
)}

‎web/app/components/base/button/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,11 @@ export type ButtonProps = {
3434
destructive?: boolean
3535
loading?: boolean
3636
styleCss?: CSSProperties
37+
spinnerClassName?: string
3738
} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
3839

3940
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
40-
({ className, variant, size, destructive, loading, styleCss, children, ...props }, ref) => {
41+
({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
4142
return (
4243
<button
4344
type='button'
@@ -50,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
5051
{...props}
5152
>
5253
{children}
53-
{loading && <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />}
54+
{loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />}
5455
</button>
5556
)
5657
},

‎web/app/components/base/icons/src/public/other/RowStruct.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"width": "16",
2121
"height": "16",
2222
"rx": "5",
23-
"fill": "#F2F4F7"
23+
"fill": "currentColor"
2424
},
2525
"children": []
2626
},
@@ -33,7 +33,7 @@
3333
"width": "233",
3434
"height": "10",
3535
"rx": "3",
36-
"fill": "#EAECF0"
36+
"fill": "currentColor"
3737
},
3838
"children": []
3939
},
@@ -46,7 +46,7 @@
4646
"width": "345",
4747
"height": "6",
4848
"rx": "3",
49-
"fill": "#F2F4F7"
49+
"fill": "currentColor"
5050
},
5151
"children": []
5252
}

‎web/app/components/base/notion-page-selector/base.module.css

-4
This file was deleted.

‎web/app/components/base/notion-page-selector/base.tsx

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { useCallback, useEffect, useMemo, useState } from 'react'
22
import useSWR from 'swr'
3-
import s from './base.module.css'
3+
import { RiEqualizer2Line } from '@remixicon/react'
44
import WorkspaceSelector from './workspace-selector'
55
import SearchInput from './search-input'
66
import PageSelector from './page-selector'
7-
import cn from '@/utils/classnames'
87
import { preImportNotionPages } from '@/service/datasets'
98
import { NotionConnector } from '@/app/components/datasets/create/step-one'
109
import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
@@ -88,23 +87,24 @@ const NotionPageSelector = ({
8887
}, [firstWorkspaceId])
8988

9089
return (
91-
<div className='bg-gray-25 border border-gray-200 rounded-xl'>
90+
<div className='bg-background-default-subtle border border-components-panel-border rounded-xl'>
9291
{
9392
data?.notion_info?.length
9493
? (
9594
<>
96-
<div className='flex items-center pl-[10px] pr-2 h-11 bg-white border-b border-b-gray-200 rounded-t-xl'>
97-
<WorkspaceSelector
98-
value={currentWorkspaceId || firstWorkspaceId}
99-
items={notionWorkspaces}
100-
onSelect={handleSelectWorkspace}
101-
/>
102-
<div className='mx-1 w-[1px] h-3 bg-gray-200' />
103-
<div
104-
className={cn(s['setting-icon'], 'w-6 h-6 cursor-pointer')}
105-
onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
106-
/>
107-
<div className='grow' />
95+
<div className='flex items-center gap-x-2 p-2 h-12 bg-components-panel-bg border-b border-b-divider-regular rounded-t-xl'>
96+
<div className='grow flex items-center gap-x-1'>
97+
<WorkspaceSelector
98+
value={currentWorkspaceId || firstWorkspaceId}
99+
items={notionWorkspaces}
100+
onSelect={handleSelectWorkspace}
101+
/>
102+
<div className='mx-1 w-[1px] h-3 bg-divider-regular' />
103+
<RiEqualizer2Line
104+
className='w-4 h-4 cursor-pointer text-text-tertiary'
105+
onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
106+
/>
107+
</div>
108108
<SearchInput
109109
value={searchValue}
110110
onChange={handleSearchValueChange}

‎web/app/components/base/notion-page-selector/page-selector/index.module.css

-17
This file was deleted.

‎web/app/components/base/notion-page-selector/page-selector/index.tsx

+18-12
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { memo, useMemo, useState } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { FixedSizeList as List, areEqual } from 'react-window'
44
import type { ListChildComponentProps } from 'react-window'
5+
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
56
import Checkbox from '../../checkbox'
67
import NotionIcon from '../../notion-icon'
7-
import s from './index.module.css'
88
import cn from '@/utils/classnames'
99
import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
1010

@@ -94,10 +94,16 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
9494
if (hasChild) {
9595
return (
9696
<div
97-
className={cn(s.arrow, current.expand && s['arrow-expand'], 'shrink-0 mr-1 w-5 h-5 hover:bg-gray-200 rounded-md')}
97+
className='flex items-center justify-center shrink-0 mr-1 w-5 h-5 hover:bg-components-button-ghost-bg-hover rounded-md'
9898
style={{ marginLeft: current.depth * 8 }}
9999
onClick={() => handleToggle(index)}
100-
/>
100+
>
101+
{
102+
current.expand
103+
? <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
104+
: <RiArrowRightSLine className='w-4 h-4 text-text-tertiary' />
105+
}
106+
</div>
101107
)
102108
}
103109
if (current.parent_id === 'root' || !pagesMap[current.parent_id]) {
@@ -112,14 +118,12 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
112118

113119
return (
114120
<div
115-
className={cn('group flex items-center pl-2 pr-[2px] rounded-md border border-transparent hover:bg-gray-100 cursor-pointer', previewPageId === current.page_id && s['preview-item'])}
121+
className={cn('group flex items-center pl-2 pr-[2px] rounded-md hover:bg-state-base-hover cursor-pointer',
122+
previewPageId === current.page_id && 'bg-state-base-hover')}
116123
style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
117124
>
118125
<Checkbox
119-
className={cn(
120-
'shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]',
121-
disabled && 'group-hover:border-transparent',
122-
)}
126+
className='shrink-0 mr-2'
123127
checked={checkedIds.has(current.page_id)}
124128
disabled={disabled}
125129
onCheck={() => {
@@ -135,15 +139,17 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
135139
src={current.page_icon}
136140
/>
137141
<div
138-
className='grow text-sm font-medium text-gray-700 truncate'
142+
className='grow text-[13px] leading-4 font-medium text-text-secondary truncate'
139143
title={current.page_name}
140144
>
141145
{current.page_name}
142146
</div>
143147
{
144148
canPreview && (
145149
<div
146-
className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs font-medium text-gray-500 cursor-pointer hover:bg-gray-50 hover:text-gray-700'
150+
className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs leading-4 font-medium text-components-button-secondary-text
151+
cursor-pointer bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3
152+
backdrop-blur-[10px] hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover'
147153
onClick={() => handlePreview(index)}>
148154
{t('common.dataSource.notion.selector.preview')}
149155
</div>
@@ -152,7 +158,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
152158
{
153159
searchValue && (
154160
<div
155-
className='shrink-0 ml-1 max-w-[120px] text-xs text-gray-400 truncate'
161+
className='shrink-0 ml-1 max-w-[120px] text-xs text-text-quaternary truncate'
156162
title={breadCrumbs.join(' / ')}
157163
>
158164
{breadCrumbs.join(' / ')}
@@ -278,7 +284,7 @@ const PageSelector = ({
278284

279285
if (!currentDataList.length) {
280286
return (
281-
<div className='flex items-center justify-center h-[296px] text-[13px] text-gray-500'>
287+
<div className='flex items-center justify-center h-[296px] text-[13px] text-text-tertiary'>
282288
{t('common.dataSource.notion.selector.noSearchResult')}
283289
</div>
284290
)

‎web/app/components/base/notion-page-selector/search-input/index.module.css

-15
This file was deleted.

‎web/app/components/base/notion-page-selector/search-input/index.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback } from 'react'
22
import type { ChangeEvent } from 'react'
33
import { useTranslation } from 'react-i18next'
4-
import s from './index.module.css'
4+
import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
55
import cn from '@/utils/classnames'
66

77
type SearchInputProps = {
@@ -19,18 +19,18 @@ const SearchInput = ({
1919
}, [onChange])
2020

2121
return (
22-
<div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
23-
<div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} />
22+
<div className={cn('w-[200px] flex items-center p-2 h-8 rounded-lg bg-components-input-bg-normal')}>
23+
<RiSearchLine className={'w-4 h-4 mr-0.5 shrink-0 text-components-input-text-placeholder'} />
2424
<input
25-
className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none'
25+
className='min-w-0 grow px-1 text-[13px] leading-[16px] bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder border-0 outline-0 appearance-none'
2626
value={value}
2727
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
2828
placeholder={t('common.dataSource.notion.selector.searchPages') || ''}
2929
/>
3030
{
3131
value && (
32-
<div
33-
className={cn(s['clear-icon'], 'ml-1 w-4 h-4 cursor-pointer')}
32+
<RiCloseCircleFill
33+
className={'w-4 h-4 shrink-0 cursor-pointer text-components-input-text-placeholder'}
3434
onClick={handleClear}
3535
/>
3636
)

‎web/app/components/base/notion-page-selector/workspace-selector/index.module.css

-9
This file was deleted.

‎web/app/components/base/notion-page-selector/workspace-selector/index.tsx

+12-16
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
import { useTranslation } from 'react-i18next'
33
import { Fragment } from 'react'
44
import { Menu, Transition } from '@headlessui/react'
5+
import { RiArrowDownSLine } from '@remixicon/react'
56
import NotionIcon from '../../notion-icon'
6-
import s from './index.module.css'
7-
import cn from '@/utils/classnames'
87
import type { DataSourceNotionWorkspace } from '@/models/common'
98

109
type WorkspaceSelectorProps = {
@@ -25,15 +24,15 @@ export default function WorkspaceSelector({
2524
{
2625
({ open }) => (
2726
<>
28-
<Menu.Button className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
27+
<Menu.Button className={`flex items-center justify-center h-7 p-1 pr-2 rounded-md hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
2928
<NotionIcon
30-
className='ml-1 mr-2'
29+
className='mr-2'
3130
src={currentWorkspace?.workspace_icon}
3231
name={currentWorkspace?.workspace_name}
3332
/>
34-
<div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
35-
<div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-primary-600'>{currentWorkspace?.pages.length}</div>
36-
<div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} />
33+
<div className='mr-1 w-[90px] text-left text-sm font-medium text-text-secondary truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
34+
{/* <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div> */}
35+
<RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
3736
</Menu.Button>
3837
<Transition
3938
as={Fragment}
@@ -45,28 +44,25 @@ export default function WorkspaceSelector({
4544
leaveTo="transform opacity-0 scale-95"
4645
>
4746
<Menu.Items
48-
className={cn(
49-
s.popup,
50-
`absolute left-0 top-8 w-80
51-
origin-top-right rounded-lg bg-white
52-
border-[0.5px] border-gray-200`,
53-
)}
47+
className='absolute left-0 top-8 z-10 w-80
48+
origin-top-right rounded-lg bg-components-panel-bg-blur
49+
border-[0.5px] border-components-panel-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'
5450
>
5551
<div className="p-1 max-h-50 overflow-auto">
5652
{
5753
items.map(item => (
5854
<Menu.Item key={item.workspace_id}>
5955
<div
60-
className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
56+
className='flex items-center px-3 h-9 rounded-lg hover:bg-state-base-hover cursor-pointer'
6157
onClick={() => onSelect(item.workspace_id)}
6258
>
6359
<NotionIcon
6460
className='shrink-0 mr-2'
6561
src={item.workspace_icon}
6662
name={item.workspace_name}
6763
/>
68-
<div className='grow mr-2 text-sm text-gray-700 truncate' title={item.workspace_name}>{item.workspace_name}</div>
69-
<div className='shrink-0 text-xs font-medium text-primary-600'>
64+
<div className='grow mr-2 system-sm-medium text-text-secondary truncate' title={item.workspace_name}>{item.workspace_name}</div>
65+
<div className='shrink-0 system-xs-medium text-text-accent'>
7066
{item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
7167
</div>
7268
</div>

0 commit comments

Comments
 (0)