Feat: account page dark mode (#11977)

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

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>