admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: account page dark mode (#11977)

Browse Source
This commit is contained in:
Yi Xiao
2024-12-23 11:17:49 +08:00
committed by GitHub
parent 39df994ff9
commit 74b1b60125
19 changed files with 165 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/header/account-setting/collapse/index.tsx
View File

@@ -25,18 +25,18 @@ const Collapse = ({
const toggle = () => setOpen(!open)
return (
<div className={classNames('border border-gray-200 bg-gray-50 rounded-lg', wrapperClassName)}>
<div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-gray-800 cursor-pointer' onClick={toggle}>
<div className={classNames('bg-background-section-burn rounded-xl', wrapperClassName)}>
<div className='flex items-center justify-between leading-[18px] px-3 py-2 text-xs font-medium text-text-secondary cursor-pointer' onClick={toggle}>
{title}
{
open
? <ChevronDownIcon className='w-3 h-3 text-gray-400' />
: <ChevronRightIcon className='w-3 h-3 text-gray-400' />
? <ChevronDownIcon className='w-3 h-3 text-components-button-tertiary-text' />
: <ChevronRightIcon className='w-3 h-3 text-components-button-tertiary-text' />
}
</div>
{
open && (
<div className='py-2 border-t border-t-gray-100'>
<div className='py-1 mb-1 mx-1 border-t border-divider-subtle rounded-lg bg-components-panel-on-panel-item-bg'>
{
items.map(item => (
<div key={item.key} onClick={() => onSelect && onSelect(item)}>

1
web/app/components/header/account-setting/data-source-page/index.tsx
View File

@@ -12,7 +12,6 @@ export default function DataSourcePage() {
return (
<div className='mb-8'>
<div className='mb-2 text-sm font-medium text-gray-900'>{t('common.dataSource.add')}</div>
<DataSourceNotion workspaces={notionWorkspaces} />
<DataSourceWebsite provider={DataSourceProvider.jinaReader} />
<DataSourceWebsite provider={DataSourceProvider.fireCrawl} />

14
web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
View File

@@ -44,22 +44,22 @@ const ConfigItem: FC<Props> = ({
const onChangeAuthorizedPage = notionActions?.onChangeAuthorizedPage || function () { }
return (
<div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-white rounded-lg')} key={payload.id}>
<div className={cn(s['workspace-item'], 'flex items-center mb-1 py-1 pr-1 bg-components-panel-on-panel-item-bg rounded-lg')} key={payload.id}>
<payload.logo className='ml-3 mr-1.5' />
<div className='grow py-[7px] leading-[18px] text-[13px] font-medium text-gray-700 truncate' title={payload.name}>{payload.name}</div>
<div className='grow py-[7px] system-sm-medium text-text-secondary truncate' title={payload.name}>{payload.name}</div>
{
payload.isActive
? <Indicator className='shrink-0 mr-[6px]' />
? <Indicator className='shrink-0 mr-[6px]' color='green' />
: <Indicator className='shrink-0 mr-[6px]' color='yellow' />
}
<div className='shrink-0 mr-3 text-xs font-medium uppercase'>
<div className={`shrink-0 mr-3 text-xs font-medium uppercase ${payload.isActive ? 'text-util-colors-green-green-600' : 'text-util-colors-warning-warning-600'}`}>
{
payload.isActive
? t(isNotion ? 'common.dataSource.notion.connected' : 'common.dataSource.website.active')
: t(isNotion ? 'common.dataSource.notion.disconnected' : 'common.dataSource.website.inactive')
}
</div>
<div className='mr-2 w-[1px] h-3 bg-gray-100' />
<div className='mr-2 w-[1px] h-3 bg-divider-regular' />
{isNotion && (
<Operate payload={{
id: payload.id,
@@ -70,8 +70,8 @@ const ConfigItem: FC<Props> = ({
{
isWebsite && !readOnly && (
<div className='p-2 text-gray-500 cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
<RiDeleteBinLine className='w-4 h-4 ' />
<div className='p-2 text-text-tertiary cursor-pointer rounded-md hover:bg-black/5' onClick={onRemove} >
<RiDeleteBinLine className='w-4 h-4' />
</div>
)
}

24
web/app/components/header/account-setting/data-source-page/panel/index.tsx
View File

@@ -2,7 +2,7 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { PlusIcon } from '@heroicons/react/24/solid'
import { RiAddLine } from '@remixicon/react'
import type { ConfigItemType } from './config-item'
import ConfigItem from './config-item'
@@ -41,12 +41,12 @@ const Panel: FC<Props> = ({
const isWebsite = type === DataSourceType.website
return (
<div className='mb-2 border-[0.5px] border-gray-200 bg-gray-50 rounded-xl'>
<div className='mb-2 bg-background-section-burn rounded-xl'>
<div className='flex items-center px-3 py-[9px]'>
<div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-gray-100 rounded-lg')} />
<div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} />
<div className='grow'>
<div className='flex items-center h-5'>
<div className='text-sm font-medium text-gray-800'>{t(`common.dataSource.${type}.title`)}</div>
<div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div>
{isWebsite && (
<div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'>
<span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'}
@@ -55,7 +55,7 @@ const Panel: FC<Props> = ({
</div>
{
!isConfigured && (
<div className='leading-5 text-xs text-gray-500'>
<div className='system-xs-medium text-text-tertiary'>
{t(`common.dataSource.${type}.description`)}
</div>
)
@@ -81,13 +81,13 @@ const Panel: FC<Props> = ({
<>
{isSupportList && <div
className={
`flex items-center px-3 py-1 min-h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md
`flex items-center px-3 py-1 min-h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text rounded-md
${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
}
onClick={onConfigure}
>
<PlusIcon className='w-[14px] h-[14px] mr-[5px]' />
{t('common.dataSource.notion.addWorkspace')}
<RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text mr-[5px]' />
{t('common.dataSource.connect')}
</div>}
</>
)
@@ -98,8 +98,8 @@ const Panel: FC<Props> = ({
{isWebsite && !isConfigured && (
<div
className={
`flex items-center ml-3 px-3 h-7 bg-white border border-gray-200
rounded-md text-xs font-medium text-gray-700
`flex items-center ml-3 px-3 h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border
rounded-md text-xs font-medium text-components-button-secondary-accent-text
${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
}
onClick={!readOnly ? onConfigure : undefined}
@@ -113,10 +113,10 @@ const Panel: FC<Props> = ({
isConfigured && (
<>
<div className='flex items-center px-3 h-[18px]'>
<div className='text-xs font-medium text-gray-500'>
<div className='system-xs-medium text-text-tertiary'>
{isNotion ? t('common.dataSource.notion.connectedWorkspace') : t('common.dataSource.website.configuredCrawlers')}
</div>
<div className='grow ml-3 border-t border-t-gray-100' />
<div className='grow ml-3 border-t border-t-divider-subtle' />
</div>
<div className='px-3 pt-2 pb-3'>
{

14
web/app/components/header/account-setting/index.tsx
View File

@@ -152,14 +152,14 @@ export default function AccountSetting({
wrapperClassName='pt-[60px]'
>
<div className='flex'>
<div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-gray-100 shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
<div className='mb-8 ml-0 sm:ml-2 text-sm sm:text-base font-medium leading-6 text-gray-900'>{t('common.userProfile.settings')}</div>
<div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-divider-burn shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
<div className='mb-8 ml-0 sm:ml-2 sm:text-base title-2xl-semi-bold text-text-primary'>{t('common.userProfile.settings')}</div>
<div className='w-full'>
{
menuItems.map(menuItem => (
<div key={menuItem.key} className='mb-4'>
{!isCurrentWorkspaceDatasetOperator && (
<div className='px-2 mb-[6px] text-[10px] sm:text-xs font-medium text-gray-500'>{menuItem.name}</div>
<div className='px-2 mb-[6px] sm:text-xs system-xs-medium-uppercase text-text-tertiary'>{menuItem.name}</div>
)}
<div>
{
@@ -168,7 +168,7 @@ export default function AccountSetting({
key={item.key}
className={`
flex items-center h-[37px] mb-[2px] text-sm cursor-pointer rounded-lg
${activeMenu === item.key ? 'font-semibold text-primary-600 bg-primary-50' : 'font-light text-gray-700'}
${activeMenu === item.key ? 'system-sm-semibold text-components-menu-item-text-active bg-state-base-active' : 'system-sm-medium text-components-menu-item-text'}
`}
title={item.name}
onClick={() => setActiveMenu(item.key)}
@@ -185,7 +185,7 @@ export default function AccountSetting({
</div>
</div>
<div ref={scrollRef} className='relative w-[824px] h-[720px] pb-4 overflow-y-auto'>
<div className={cn('sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-white text-base font-medium text-gray-900 z-20', scrolled && scrolledClassName)}>
<div className={cn('sticky top-0 px-6 py-4 flex items-center h-14 mb-4 bg-components-panel-bg title-2xl-semi-bold text-text-primary z-20', scrolled && scrolledClassName)}>
<div className='shrink-0'>{activeItem?.name}</div>
{
activeItem?.description && (
@@ -193,8 +193,8 @@ export default function AccountSetting({
)
}
<div className='grow flex justify-end'>
<div className='flex items-center justify-center -mr-4 w-6 h-6 cursor-pointer' onClick={onCancel}>
<RiCloseLine className='w-4 h-4 text-gray-400' />
<div className='z-[10] flex items-center justify-center -mr-4 p-2 cursor-pointer rounded-[10px] hover:bg-components-button-tertiary-bg' onClick={onCancel}>
<RiCloseLine className='w-5 h-5 text-components-button-tertiary-text' />
</div>
</div>
</div>

2
web/app/components/header/account-setting/language-page/index.tsx
View File

@@ -13,7 +13,7 @@ import { timezones } from '@/utils/timezone'
import { languages } from '@/i18n/language'
const titleClassName = `
mb-2 text-sm font-medium text-gray-900
mb-2 system-sm-semibold text-text-secondary
`
export default function LanguagePage() {

22
web/app/components/header/account-setting/members-page/index.tsx
View File

@@ -85,32 +85,32 @@ const MembersPage = () => {
</div>
</div>
<div className='overflow-visible lg:overflow-visible'>
<div className='flex items-center py-[7px] border-b border-gray-200 min-w-[480px]'>
<div className='grow px-3 text-xs font-medium text-gray-500'>{t('common.members.name')}</div>
<div className='shrink-0 w-[104px] text-xs font-medium text-gray-500'>{t('common.members.lastActive')}</div>
<div className='shrink-0 w-[96px] px-3 text-xs font-medium text-gray-500'>{t('common.members.role')}</div>
<div className='flex items-center py-[7px] border-b border-divider-regular min-w-[480px]'>
<div className='grow px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.name')}</div>
<div className='shrink-0 w-[104px] system-xs-medium-uppercase text-text-tertiary'>{t('common.members.lastActive')}</div>
<div className='shrink-0 w-[96px] px-3 system-xs-medium-uppercase text-text-tertiary'>{t('common.members.role')}</div>
</div>
<div className='min-w-[480px] relative'>
{
accounts.map(account => (
<div key={account.id} className='flex border-b border-gray-100'>
<div key={account.id} className='flex border-b border-divider-subtle'>
<div className='grow flex items-center py-2 px-3'>
<Avatar size={24} className='mr-2' name={account.name} />
<div className=''>
<div className='text-[13px] font-medium text-gray-700 leading-[18px]'>
<div className='text-text-secondary system-sm-medium'>
{account.name}
{account.status === 'pending' && <span className='ml-1 text-xs text-[#DC6803]'>{t('common.members.pending')}</span>}
{userProfile.email === account.email && <span className='text-xs text-gray-500'>{t('common.members.you')}</span>}
{account.status === 'pending' && <span className='ml-1 system-xs-regular text-[#DC6803]'>{t('common.members.pending')}</span>}
{userProfile.email === account.email && <span className='system-xs-regular text-text-tertiary'>{t('common.members.you')}</span>}
</div>
<div className='text-xs text-gray-500 leading-[18px]'>{account.email}</div>
<div className='text-text-tertiary system-xs-regular'>{account.email}</div>
</div>
</div>
<div className='shrink-0 flex items-center w-[104px] py-2 text-[13px] text-gray-700'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
<div className='shrink-0 flex items-center w-[104px] py-2 system-xs-regular text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
<div className='shrink-0 w-[96px] flex items-center'>
{
((isCurrentWorkspaceOwner && account.role !== 'owner') || (isCurrentWorkspaceManager && !['owner', 'admin'].includes(account.role)))
? <Operation member={account} operatorRole={currentWorkspace.role} onOperate={mutate} />
: <div className='px-3 text-[13px] text-gray-700'>{RoleMap[account.role] || RoleMap.normal}</div>
: <div className='px-3 system-xs-regular text-text-secondary'>{RoleMap[account.role] || RoleMap.normal}</div>
}
</div>
</div>