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

Feat: settings dark mode (#15184)

Browse Source
This commit is contained in:
KVOJJJin
2025-03-07 11:56:20 +08:00
committed by GitHub
parent 69746f2f0b
commit f588ccff72
34 changed files with 450 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/app/components/custom/custom-page/index.tsx
View File

@@ -1,44 +1,36 @@
import { useTranslation } from 'react-i18next'
import CustomWebAppBrand from '../custom-web-app-brand'
import s from '../style.module.css'
import GridMask from '@/app/components/base/grid-mask'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import { contactSalesUrl } from '@/app/components/billing/config'
import { useModalContext } from '@/context/modal-context'
const CustomPage = () => {
const { t } = useTranslation()
const { plan, enableBilling } = useProviderContext()
const { setShowPricingModal } = useModalContext()
const showBillingTip = enableBilling && plan.type === Plan.sandbox
const showContact = enableBilling && (plan.type === Plan.professional || plan.type === Plan.team)
return (
<div className='flex flex-col'>
{
showBillingTip && (
<GridMask canvasClassName='!rounded-xl'>
<div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
<div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
<div>{t('custom.upgradeTip.prefix')}</div>
<div>{t('custom.upgradeTip.suffix')}</div>
</div>
<UpgradeBtn />
</div>
</GridMask>
)
}
<CustomWebAppBrand />
{
showContact && (
<div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
{t('custom.customize.prefix')}
<a className='text-[#155EEF]' href={contactSalesUrl} target='_blank' rel='noopener noreferrer'>{t('custom.customize.contactUs')}</a>
{t('custom.customize.suffix')}
{showBillingTip && (
<div className='flex justify-between mb-1 p-4 pl-6 bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 shadow-lg backdrop-blur-sm rounded-xl'>
<div className='space-y-1 text-text-primary-on-surface'>
<div className='title-xl-semi-bold'>{t('custom.upgradeTip.title')}</div>
<div className='system-sm-regular'>{t('custom.upgradeTip.des')}</div>
</div>
)
}
<div className='w-[120px] h-10 flex items-center justify-center bg-white rounded-3xl shadow-xs system-md-semibold text-text-accent cursor-pointer hover:opacity-95' onClick={() => setShowPricingModal()}>{t('billing.upgradeBtn.encourageShort')}</div>
</div>
)}
<CustomWebAppBrand />
{showContact && (
<div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-text-quaternary'>
{t('custom.customize.prefix')}
<a className='text-text-accent' href={contactSalesUrl} target='_blank' rel='noopener noreferrer'>{t('custom.customize.contactUs')}</a>
{t('custom.customize.suffix')}
</div>
)}
</div>
)
}