Feat: account page dark mode (#11977)
This commit is contained in:
Yi Xiao
GitHub
parent
39df994ff9
commit
74b1b60125
19 changed files with 165 additions and 123 deletions
|
|
@ -18,10 +18,10 @@ import { IS_CE_EDITION } from '@/config'
|
|||
import Input from '@/app/components/base/input'
|
||||
|
||||
const titleClassName = `
|
||||
text-sm font-medium text-gray-900
|
||||
system-sm-semibold text-text-secondary
|
||||
`
|
||||
const descriptionClassName = `
|
||||
mt-1 text-xs font-normal text-gray-500
|
||||
mt-1 body-xs-regular text-text-tertiary
|
||||
`
|
||||
|
||||
const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
|
||||
|
|
@ -122,7 +122,7 @@ export default function AccountPage() {
|
|||
<div className='mr-3'>
|
||||
<AppIcon size='tiny' />
|
||||
</div>
|
||||
<div className='mt-[3px] text-xs font-medium text-gray-700 leading-[18px]'>{item.name}</div>
|
||||
<div className='mt-[3px] system-sm-medium text-text-secondary'>{item.name}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ export default function AccountPage() {
|
|||
return (
|
||||
<>
|
||||
<div className='pt-2 pb-3'>
|
||||
<h4 className='title-2xl-semi-bold text-primary'>{t('common.account.myAccount')}</h4>
|
||||
<h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
|
||||
</div>
|
||||
<div className='mb-8 p-6 rounded-xl flex items-center bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1'>
|
||||
<Avatar name={userProfile.name} size={64} />
|
||||
|
|
@ -142,10 +142,10 @@ export default function AccountPage() {
|
|||
<div className='mb-8'>
|
||||
<div className={titleClassName}>{t('common.account.name')}</div>
|
||||
<div className='flex items-center justify-between gap-2 w-full mt-2'>
|
||||
<div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
|
||||
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
|
||||
<span className='pl-1'>{userProfile.name}</span>
|
||||
</div>
|
||||
<div className=' bg-gray-100 rounded-md py-2 px-3 cursor-pointer system-sm-medium text-components-input-text-filled' onClick={handleEditName}>
|
||||
<div className='bg-components-button-tertiary-bg rounded-lg py-2 px-3 cursor-pointer system-sm-medium text-components-button-tertiary-text' onClick={handleEditName}>
|
||||
{t('common.operation.edit')}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,7 +153,7 @@ export default function AccountPage() {
|
|||
<div className='mb-8'>
|
||||
<div className={titleClassName}>{t('common.account.email')}</div>
|
||||
<div className='flex items-center justify-between gap-2 w-full mt-2'>
|
||||
<div className='flex-1 bg-gray-100 rounded-md p-2 system-sm-regular text-components-input-text-filled '>
|
||||
<div className='flex-1 bg-components-input-bg-normal rounded-lg p-2 system-sm-regular text-components-input-text-filled '>
|
||||
<span className='pl-1'>{userProfile.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -162,14 +162,14 @@ export default function AccountPage() {
|
|||
systemFeatures.enable_email_password_login && (
|
||||
<div className='mb-8 flex justify-between gap-2'>
|
||||
<div>
|
||||
<div className='mb-1 text-sm font-medium text-gray-900'>{t('common.account.password')}</div>
|
||||
<div className='mb-2 text-xs text-gray-500'>{t('common.account.passwordTip')}</div>
|
||||
<div className='mb-1 system-sm-semibold text-text-secondary'>{t('common.account.password')}</div>
|
||||
<div className='mb-2 body-xs-regular text-text-tertiary'>{t('common.account.passwordTip')}</div>
|
||||
</div>
|
||||
<Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='mb-6 border-[0.5px] border-gray-100' />
|
||||
<div className='mb-6 border-[1px] border-divider-subtle' />
|
||||
<div className='mb-8'>
|
||||
<div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
|
||||
<div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
|
||||
|
|
@ -181,7 +181,7 @@ export default function AccountPage() {
|
|||
wrapperClassName='mt-2'
|
||||
/>
|
||||
)}
|
||||
{!IS_CE_EDITION && <Button className='mt-2 text-[#D92D20]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
|
||||
{!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
|
||||
</div>
|
||||
{
|
||||
editNameModalVisible && (
|
||||
|
|
@ -190,7 +190,7 @@ export default function AccountPage() {
|
|||
onClose={() => setEditNameModalVisible(false)}
|
||||
className={s.modal}
|
||||
>
|
||||
<div className='mb-6 text-lg font-medium text-gray-900'>{t('common.account.editName')}</div>
|
||||
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{t('common.account.editName')}</div>
|
||||
<div className={titleClassName}>{t('common.account.name')}</div>
|
||||
<Input className='mt-2'
|
||||
value={editName}
|
||||
|
|
@ -219,7 +219,7 @@ export default function AccountPage() {
|
|||
}}
|
||||
className={s.modal}
|
||||
>
|
||||
<div className='mb-6 text-lg font-medium text-gray-900'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
|
||||
<div className='mb-6 title-2xl-semi-bold text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
|
||||
{userProfile.is_password_set && (
|
||||
<>
|
||||
<div className={titleClassName}>{t('common.account.currentPassword')}</div>
|
||||
|
|
@ -242,7 +242,7 @@ export default function AccountPage() {
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className='mt-8 text-sm font-medium text-gray-900'>
|
||||
<div className='mt-8 system-sm-semibold text-text-secondary'>
|
||||
{userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
|
||||
</div>
|
||||
<div className='relative mt-2'>
|
||||
|
|
@ -261,7 +261,7 @@ export default function AccountPage() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-8 text-sm font-medium text-gray-900'>{t('common.account.confirmPassword')}</div>
|
||||
<div className='mt-8 system-sm-semibold text-text-secondary'>{t('common.account.confirmPassword')}</div>
|
||||
<div className='relative mt-2'>
|
||||
<Input
|
||||
type={showConfirmPassword ? 'text' : 'password'}
|
||||
|
|
@ -305,13 +305,13 @@ export default function AccountPage() {
|
|||
title={t('common.account.delete')}
|
||||
content={
|
||||
<>
|
||||
<div className='my-1 text-[#D92D20] text-sm leading-5'>
|
||||
<div className='my-1 text-text-destructive body-md-medium'>
|
||||
{t('common.account.deleteTip')}
|
||||
</div>
|
||||
<div className='mt-3 text-sm leading-5'>
|
||||
<span>{t('common.account.deleteConfirmTip')}</span>
|
||||
<a
|
||||
className='text-primary-600 cursor'
|
||||
className='text-text-accent cursor'
|
||||
href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`}
|
||||
target='_blank'
|
||||
rel='noreferrer noopener'
|
||||
|
|
@ -323,7 +323,7 @@ export default function AccountPage() {
|
|||
support@dify.ai
|
||||
</a>
|
||||
</div>
|
||||
<div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
|
||||
<div className='my-2 px-3 py-2 rounded-lg bg-components-input-bg-active border border-components-input-border-active system-sm-regular text-components-input-text-filled'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
|
||||
</>
|
||||
}
|
||||
confirmText={t('common.operation.ok') as string}
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ export default function AppSelector() {
|
|||
className={`
|
||||
inline-flex items-center
|
||||
rounded-[20px] p-1x text-sm
|
||||
text-gray-700 hover:bg-gray-200
|
||||
text-text-primary
|
||||
mobile:px-1
|
||||
${open && 'bg-gray-200'}
|
||||
${open && 'bg-components-panel-bg-blur'}
|
||||
`}
|
||||
>
|
||||
<Avatar name={userProfile.name} size={32} />
|
||||
|
|
@ -60,7 +60,7 @@ export default function AppSelector() {
|
|||
<Menu.Items
|
||||
className="
|
||||
absolute -right-2 -top-1 w-60 max-w-80
|
||||
divide-y divide-gray-100 origin-top-right rounded-lg bg-white
|
||||
divide-y divide-divider-subtle origin-top-right rounded-lg bg-components-panel-bg-blur
|
||||
shadow-lg
|
||||
"
|
||||
>
|
||||
|
|
@ -78,10 +78,10 @@ export default function AppSelector() {
|
|||
<Menu.Item>
|
||||
<div className='p-1' onClick={() => handleLogout()}>
|
||||
<div
|
||||
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-gray-50'
|
||||
className='flex items-center justify-start h-9 px-3 rounded-lg cursor-pointer group hover:bg-state-base-hover'
|
||||
>
|
||||
<LogOut01 className='w-4 h-4 text-gray-500 flex mr-1' />
|
||||
<div className='font-normal text-[14px] text-gray-700'>{t('common.userProfile.logout')}</div>
|
||||
<LogOut01 className='w-4 h-4 text-text-tertiary flex mr-1' />
|
||||
<div className='font-normal text-[14px] text-text-secondary'>{t('common.userProfile.logout')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Menu.Item>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
|
|||
<HeaderWrapper>
|
||||
<Header />
|
||||
</HeaderWrapper>
|
||||
<div className='relative flex flex-col overflow-y-auto bg-white shrink-0 h-0 grow'>
|
||||
<div className='relative flex flex-col overflow-y-auto bg-components-panel-bg shrink-0 h-0 grow'>
|
||||
{children}
|
||||
</div>
|
||||
</ModalContextProvider>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue