feat: dark mode for knowledge (#15236)
This commit is contained in:
Wu Tianwei
@@ -1,11 +1,5 @@
|
||||
.stepHeader {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 42px 64px 12px 0;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.form {
|
||||
@@ -14,38 +8,22 @@
|
||||
}
|
||||
|
||||
.dataSourceItem {
|
||||
@apply w-full box-border relative flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
|
||||
border: 0.5px solid #EAECF0;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #101828;
|
||||
@apply w-full relative flex items-center p-3 h-14 bg-components-option-card-option-bg rounded-xl
|
||||
cursor-pointer border border-components-option-card-option-border text-text-secondary;
|
||||
}
|
||||
|
||||
.dataSourceItem:hover {
|
||||
background-color: #f5f8ff;
|
||||
border: 0.5px solid #B2CCFF;
|
||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
@apply bg-components-option-card-option-bg-hover border border-components-option-card-option-border-hover shadow-xs shadow-shadow-shadow-3;
|
||||
}
|
||||
|
||||
.dataSourceItem.active {
|
||||
background-color: #f5f8ff;
|
||||
border: 1.5px solid #528BFF;
|
||||
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
|
||||
}
|
||||
|
||||
.dataSourceItem.disabled {
|
||||
background-color: #f9fafb;
|
||||
border: 0.5px solid #EAECF0;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
cursor: default;
|
||||
@apply bg-components-option-card-option-selected-bg border border-components-option-card-option-selected-border
|
||||
ring-[0.5px] ring-components-option-card-option-selected-border;
|
||||
}
|
||||
|
||||
.dataSourceItem.disabled,
|
||||
.dataSourceItem.disabled:hover {
|
||||
background-color: #f9fafb;
|
||||
border: 0.5px solid #EAECF0;
|
||||
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
|
||||
@apply bg-components-option-card-option-bg border-[0.5px] border-components-option-card-option-border cursor-not-allowed text-text-disabled shadow-none;
|
||||
}
|
||||
|
||||
.comingTag {
|
||||
@@ -64,17 +42,9 @@
|
||||
}
|
||||
|
||||
.datasetIcon {
|
||||
@apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
|
||||
background-color: #F5FAFF;
|
||||
@apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat bg-text-primary-on-surface border-[0.5px] border-divider-regular backdrop-blur-sm;
|
||||
background-image: url(../assets/file.svg);
|
||||
background-size: 16px;
|
||||
border: 0.5px solid #D1E9FF;
|
||||
}
|
||||
|
||||
.dataSourceItem:active .datasetIcon,
|
||||
.dataSourceItem:hover .datasetIcon {
|
||||
background-color: #F5F8FF;
|
||||
border: 0.5px solid #E0EAFF;
|
||||
}
|
||||
|
||||
.datasetIcon.notion {
|
||||
@@ -97,54 +67,7 @@
|
||||
background-color: #eaecf0;
|
||||
}
|
||||
|
||||
.notionConnectionTip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
width: 640px;
|
||||
background: #F9FAFB;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.notionIcon {
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #fff center no-repeat url(../assets/notion.svg);
|
||||
background: var(--color-components-card-bg) center no-repeat url(../assets/notion.svg);
|
||||
background-size: 24px;
|
||||
border: 0.5px solid #EAECF5;
|
||||
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.notionConnectionTip .title {
|
||||
position: relative;
|
||||
margin: 24px 0 4px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.notionConnectionTip .title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: center no-repeat url(../assets/Icon-3-dots.svg);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.notionConnectionTip .tip {
|
||||
margin-bottom: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #6B7280;
|
||||
}
|
||||
@@ -19,6 +19,7 @@ import { useDatasetDetailContext } from '@/context/dataset-detail'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import VectorSpaceFull from '@/app/components/billing/vector-space-full'
|
||||
import classNames from '@/utils/classnames'
|
||||
import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
|
||||
|
||||
type IStepOneProps = {
|
||||
datasetId?: string
|
||||
@@ -48,10 +49,15 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className={s.notionConnectionTip}>
|
||||
<span className={s.notionIcon} />
|
||||
<div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
|
||||
<div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
|
||||
<div className='flex flex-col items-start p-6 w-[640px] rounded-2xl bg-workflow-process-bg'>
|
||||
<span className={cn(s.notionIcon, 'w-12 h-12 p-3 border-[0.5px] border-components-card-border rounded-[10px] shadow-lg shadow-shadow-shadow-5 mb-2')} />
|
||||
<div className='flex flex-col gap-y-1 pt-1 pb-3 mb-1'>
|
||||
<span className='text-text-secondary system-md-semibold'>
|
||||
{t('datasetCreation.stepOne.notionSyncTitle')}
|
||||
<Icon3Dots className='inline relative -top-2.5 -left-1.5 w-4 h-4 text-text-secondary' />
|
||||
</span>
|
||||
<div className='text-text-tertiary system-sm-regular'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
|
||||
</div>
|
||||
<Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
|
||||
</div>
|
||||
)
|
||||
@@ -132,7 +138,9 @@ const StepOne = ({
|
||||
<div className={classNames(s.form)}>
|
||||
{
|
||||
shouldShowDataSourceTypeList && (
|
||||
<div className={classNames(s.stepHeader, 'z-10 text-text-secondary bg-components-panel-bg-blur')}>{t('datasetCreation.steps.one')}</div>
|
||||
<div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
|
||||
{t('datasetCreation.steps.one')}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
@@ -141,6 +149,7 @@ const StepOne = ({
|
||||
<div
|
||||
className={cn(
|
||||
s.dataSourceItem,
|
||||
'system-sm-medium',
|
||||
dataSourceType === DataSourceType.FILE && s.active,
|
||||
dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
|
||||
)}
|
||||
@@ -163,6 +172,7 @@ const StepOne = ({
|
||||
<div
|
||||
className={cn(
|
||||
s.dataSourceItem,
|
||||
'system-sm-medium',
|
||||
dataSourceType === DataSourceType.NOTION && s.active,
|
||||
dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
|
||||
)}
|
||||
@@ -185,6 +195,7 @@ const StepOne = ({
|
||||
<div
|
||||
className={cn(
|
||||
s.dataSourceItem,
|
||||
'system-sm-medium',
|
||||
dataSourceType === DataSourceType.WEB && s.active,
|
||||
dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
|
||||
)}
|
||||
@@ -205,7 +216,7 @@ const StepOne = ({
|
||||
<>
|
||||
<FileUploader
|
||||
fileList={files}
|
||||
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
|
||||
titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg' : undefined}
|
||||
prepareFileList={updateFileList}
|
||||
onFileListUpdate={updateFileList}
|
||||
onFileUpdate={updateFile}
|
||||
|
||||
Reference in New Issue
Block a user