style: use css class name instead of multi tailwind varibles

This commit is contained in:
NFish 2024-09-12 16:24:27 +08:00
parent 8526c73a85
commit 0483cc8d62
12 changed files with 82 additions and 82 deletions

View File

@ -31,11 +31,11 @@ export default function Countdown({ onResend }: CountdownProps) {
localStorage.setItem(COUNT_DOWN_KEY, `${time}`)
}, [time])
return <p className='text-text-tertiary text-xs'>
return <p className='system-xs-regular text-text-tertiary'>
<span>{t('login.checkCode.didNotReceiveCode')}</span>
{time > 0 && <span>{Math.round(time / 1000)}s</span>}
{
time <= 0 && <span className='text-text-accent-secondary cursor-pointer' onClick={resend}>{t('login.checkCode.resend')}</span>
time <= 0 && <span className='system-xs-medium text-text-accent-secondary cursor-pointer' onClick={resend}>{t('login.checkCode.resend')}</span>
}
</p>
}

View File

@ -59,11 +59,11 @@ export default function CheckCode() {
return <div className='flex flex-col gap-3'>
<div className='bg-background-default-dodge text-text-accent-light-mode-only border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiMailSendFill className='w-8 h-8 text-2xl' />
<RiMailSendFill className='w-6 h-6 text-2xl' />
</div>
<div className='pt-3 pb-4'>
<h2 className='text-2xl font-semibold'>{t('login.checkCode.checkYourEmail')}</h2>
<p className='text-text-secondary text-sm mt-2 leading-5'>
<div className='pt-2 pb-4'>
<h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
<p className='mt-2 body-md-regular text-text-secondary'>
<span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
<br />
{t('login.checkCode.validTime')}
@ -71,19 +71,19 @@ export default function CheckCode() {
</div>
<form action="">
<label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
<label htmlFor="code" className='system-md-semibold text-text-secondary mb-1'>{t('login.checkCode.verificationCode')}</label>
<Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
<Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
<Countdown onResend={resendCode} />
</form>
<div className='py-2'>
<div className='bg-gradient-to-r from-white/[0.01] via-[#101828]/8 to-white/[0.01] h-px'></div>
<div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
</div>
<Link href='/signin' className='flex items-center justify-center text-xs h-9 text-text-tertiary'>
<Link href='/signin' className='flex items-center justify-center h-9 text-text-tertiary'>
<div className='inline-block p-1 rounded-full bg-background-default-dimm'>
<RiArrowLeftLine size={12} />
</div>
<span className='ml-2'>{t('login.checkCode.useAnotherMethod')}</span>
<span className='ml-2 system-xs-regular'>{t('login.checkCode.useAnotherMethod')}</span>
</Link>
</div>
}

View File

@ -30,7 +30,7 @@ export default async function SignInLayout({ children }: any) {
{children}
</div>
</div>
<div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
<div className='px-8 py-6 system-xs-regular text-text-tertiary'>
© {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
</div>
</div>

View File

@ -51,19 +51,19 @@ export default function CheckCode() {
}
return <div className='flex flex-col gap-3'>
<div className='bg-background-default-dodge text-text-accent-light-mode-only border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiLockPasswordLine className='w-8 h-8 text-2xl' />
<div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiLockPasswordLine className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
</div>
<div className='pt-3 pb-4'>
<h2 className='text-2xl font-semibold'>{t('login.resetPassword')}</h2>
<p className='text-text-secondary text-sm mt-2 leading-5'>
<div className='pt-2 pb-4'>
<h2 className='title-4xl-semi-bold text-text-primary'>{t('login.resetPassword')}</h2>
<p className='body-md-regular mt-2 text-text-secondary'>
{t('login.resetPasswordDesc')}
</p>
</div>
<form onSubmit={() => { }}>
<div className='mb-2'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<label htmlFor="email" className='my-2 system-md-semibold text-text-secondary'>{t('login.email')}</label>
<div className='mt-1'>
<Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
</div>
@ -73,13 +73,13 @@ export default function CheckCode() {
</div>
</form>
<div className='py-2'>
<div className='bg-gradient-to-r from-white/[0.01] via-[#101828]/8 to-white/[0.01] h-px'></div>
<div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
</div>
<Link href='/signin' className='flex items-center justify-center text-xs h-9 text-text-tertiary'>
<Link href='/signin' className='flex items-center justify-center h-9 text-text-tertiary'>
<div className='inline-block p-1 rounded-full bg-background-default-dimm'>
<RiArrowLeftLine size={12} />
</div>
<span className='ml-2'>{t('login.backToLogin')}</span>
<span className='ml-2 system-xs-regular'>{t('login.backToLogin')}</span>
</Link>
</div>
}

View File

@ -91,10 +91,10 @@ const ChangePasswordForm = () => {
{!showSuccess && (
<div className='flex flex-col md:w-[400px]'>
<div className="w-full mx-auto">
<h2 className="text-2xl font-bold text-text-secondary">
<h2 className="title-4xl-semi-bold text-text-primary">
{t('login.resetPassword')}
</h2>
<p className='mt-1 text-sm text-text-tertiary'>
<p className='mt-2 body-md-regular text-text-secondary'>
{t('login.changePasswordTip')}
</p>
</div>
@ -103,7 +103,7 @@ const ChangePasswordForm = () => {
<div className="bg-white">
{/* Password */}
<div className='mb-5'>
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
{t('common.account.newPassword')}
</label>
<Input
@ -114,11 +114,11 @@ const ChangePasswordForm = () => {
placeholder={t('login.passwordPlaceholder') || ''}
className='mt-1'
/>
<div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
<div className='mt-1 body-xs-regular text-text-secondary'>{t('login.error.passwordInvalid')}</div>
</div>
{/* Confirm Password */}
<div className='mb-5'>
<label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
{t('common.account.confirmPassword')}
</label>
<Input
@ -147,14 +147,14 @@ const ChangePasswordForm = () => {
<div className="flex flex-col md:w-[400px]">
<div className="w-full mx-auto">
<div className="mb-3 flex justify-center items-center w-14 h-14 rounded-2xl border border-components-panel-border-subtle shadow-lg font-bold">
<RiCheckboxCircleFill className='w-8 h-8 text-text-success' />
<RiCheckboxCircleFill className='w-6 h-6 text-text-success' />
</div>
<h2 className="text-2xl font-bold text-text-primary">
<h2 className="title-4xl-semi-bold text-text-primary">
{t('login.passwordChangedTip')}
</h2>
</div>
<div className="w-full mx-auto mt-6">
<Button variant='primary' className='w-full !text-sm' onClick={() => {
<Button variant='primary' className='w-full' onClick={() => {
setLeftTime(undefined)
router.replace(getSignInUrl())
}}>{t('login.passwordChanged')} ({Math.round(countdown / 1000)}) </Button>

View File

@ -58,12 +58,12 @@ export default function CheckCode() {
}
return <div className='flex flex-col gap-3'>
<div className='bg-background-default-dodge text-text-accent-light-mode-only border-[0.5px] shadow inline-flex w-14 h-14 justify-center items-center rounded-2xl text-2xl'>
<RiMailSendFill />
<div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiMailSendFill className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
</div>
<div className='pt-3 pb-4'>
<h2 className='text-2xl font-semibold'>{t('login.checkCode.checkYourEmail')}</h2>
<p className='text-text-secondary text-sm mt-2 leading-5'>
<div className='pt-2 pb-4'>
<h2 className='title-4xl-semi-bold text-text-primary'>{t('login.checkCode.checkYourEmail')}</h2>
<p className='body-md-regular mt-2 text-text-secondary'>
<span dangerouslySetInnerHTML={{ __html: t('login.checkCode.tips', { email }) as string }}></span>
<br />
{t('login.checkCode.validTime')}
@ -71,19 +71,19 @@ export default function CheckCode() {
</div>
<form action="">
<label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
<label htmlFor="code" className='system-md-semibold mb-1 text-text-secondary'>{t('login.checkCode.verificationCode')}</label>
<Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
<Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
<Countdown onResend={resendCode} />
</form>
<div className='py-2'>
<div className='bg-gradient-to-r from-white/[0.01] via-[#101828]/8 to-white/[0.01] h-px'></div>
<div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px'></div>
</div>
<Link href='/signin' className='flex items-center justify-center text-xs h-9 text-text-tertiary'>
<Link href='/signin' className='flex items-center justify-center h-9 text-text-tertiary'>
<div className='inline-block p-1 rounded-full bg-background-default-dimm'>
<RiArrowLeftLine size={12} />
</div>
<span className='ml-2'>{t('login.checkCode.useAnotherMethod')}</span>
<span className='ml-2 system-xs-regular'>{t('login.checkCode.useAnotherMethod')}</span>
</Link>
</div>
}

View File

@ -54,7 +54,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
return (<form onSubmit={() => { }}>
<div className='mb-2'>
<label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
<label htmlFor="email" className='my-2 system-md-semibold text-text-secondary'>{t('login.email')}</label>
<div className='mt-1'>
<Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
</div>

View File

@ -69,7 +69,7 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
return <form onSubmit={() => { }}>
<div className='mb-3'>
<label htmlFor="email" className="my-2 block text-sm font-medium text-text-secondary">
<label htmlFor="email" className="my-2 system-md-semibold text-text-secondary">
{t('login.email')}
</label>
<div className="mt-1">
@ -86,9 +86,9 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
</div>
<div className='mb-3'>
<label htmlFor="password" className="my-2 flex items-center justify-between text-sm">
<span className='font-medium text-text-secondary'>{t('login.password')}</span>
<Link href={`/reset-password?${searchParams.toString()}`} className='text-components-button-secondary-accent-text text-xs'>
<label htmlFor="password" className="my-2 flex items-center justify-between">
<span className='system-md-semibold text-text-secondary'>{t('login.password')}</span>
<Link href={`/reset-password?${searchParams.toString()}`} className='system-xs-regular text-components-button-secondary-accent-text'>
{t('login.forget')}
</Link>
</label>

View File

@ -64,11 +64,11 @@ export default function InviteSettingsPage() {
if (!checkRes)
return <Loading />
if (!checkRes.is_valid) {
if (checkRes.is_valid) {
return <div className="flex flex-col md:w-[400px]">
<div className="w-full mx-auto">
<div className="mb-3 flex justify-center items-center w-[56px] h-[56px] p-5 rounded-2xl border border-components-panel-border-subtle shadow-lg text-3xl font-bold">🤷</div>
<h2 className="text-3xl font-bold text-text-primary">{t('login.invalid')}</h2>
<div className="mb-3 flex justify-center items-center w-14 h-14 rounded-2xl border border-components-panel-border-subtle shadow-lg text-2xl font-bold">🤷</div>
<h2 className="title-4xl-semi-bold">{t('login.invalid')}</h2>
</div>
<div className="w-full mx-auto mt-6">
<Button variant='primary' className='w-full !text-sm'>
@ -79,19 +79,19 @@ export default function InviteSettingsPage() {
}
return <div className='flex flex-col gap-3'>
<div className='bg-background-default-dodge text-text-accent-light-mode-only border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiAccountCircleLine className='w-8 h-8 text-2xl' />
<div className='bg-background-default-dodge border border-components-panel-border-subtle shadow-lg inline-flex w-14 h-14 justify-center items-center rounded-2xl'>
<RiAccountCircleLine className='w-6 h-6 text-2xl text-text-accent-light-mode-only' />
</div>
<div className='pt-3 pb-4'>
<h2 className='text-2xl font-semibold'>{t('login.setYourAccount')}</h2>
<div className='pt-2 pb-4'>
<h2 className='title-4xl-semi-bold'>{t('login.setYourAccount')}</h2>
</div>
<form action=''>
<div className='mb-5'>
<label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label htmlFor="name" className="my-2 system-md-semibold">
{t('login.name')}
</label>
<div className="mt-1 relative rounded-md shadow-sm">
<div className="mt-1">
<Input
id="name"
type="text"
@ -102,10 +102,10 @@ export default function InviteSettingsPage() {
</div>
</div>
<div className='mb-5'>
<label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label htmlFor="name" className="my-2 system-md-semibold">
{t('login.interfaceLanguage')}
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="mt-1">
<SimpleSelect
defaultValue={LanguagesSupported[0]}
items={languages.filter(item => item.supported)}
@ -117,10 +117,10 @@ export default function InviteSettingsPage() {
</div>
{/* timezone */}
<div className='mb-5'>
<label htmlFor="timezone" className="block text-sm font-medium text-text-secondary">
<label htmlFor="timezone" className="system-md-semibold">
{t('login.timezone')}
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="mt-1">
<SimpleSelect
defaultValue={timezone}
items={timezones}
@ -133,18 +133,18 @@ export default function InviteSettingsPage() {
<div>
<Button
variant='primary'
className='w-full !text-sm'
className='w-full'
onClick={handleActivate}
>
{`${t('login.join')} ${checkRes?.data?.workspace_name}`}
</Button>
</div>
</form>
<div className="block w-hull mt-2 text-xs text-text-secondary">
<div className="block w-hull mt-2 system-xs-regular">
{t('login.license.tip')}
&nbsp;
<Link
className='text-text-accent-secondary'
className='system-xs-medium text-text-accent-secondary'
target='_blank' rel='noopener noreferrer'
href={`https://docs.dify.ai/${language !== LanguagesSupported[1] ? 'user-agreement' : `v/${locale.toLowerCase()}/policies`}/open-source`}
>{t('login.license.link')}</Link>

View File

@ -45,7 +45,7 @@ export default async function SignInLayout({ children }: any) {
{children}
</div>
</div>
<div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
<div className='px-8 py-6 system-xs-regular text-text-tertiary'>
© {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
</div>
</div>

View File

@ -78,12 +78,12 @@ const NormalForm = () => {
<div className="w-full mx-auto mt-8">
{isInviteLink
? <div className="w-full mx-auto">
<h2 className="text-2xl font-bold text-text-primary">{t('login.join')}{workspaceName}</h2>
<p className='mt-1 text-sm text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
<h2 className="title-4xl-semi-bold text-text-primary">{t('login.join')}{workspaceName}</h2>
<p className='mt-2 body-md-regular text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
</div>
: <div className="w-full mx-auto">
<h2 className="text-2xl font-bold text-text-primary">{t('login.pageTitle')}</h2>
<p className='mt-1 text-sm text-text-tertiary'>{t('login.welcome')}</p>
<h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
<p className='mt-2 body-md-regular text-text-tertiary'>{t('login.welcome')}</p>
</div>}
<div className="bg-white ">
<div className="flex flex-col gap-3 mt-6">
@ -95,10 +95,10 @@ const NormalForm = () => {
{showORLine && <div className="relative mt-6">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className='bg-gradient-to-r from-white/[0.01] via-[#101828]/8 to-white/[0.01] h-px w-full'></div>
<div className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full'></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 text-text-tertiary bg-white">{t('login.or')}</span>
<div className="relative flex justify-center">
<span className="px-2 text-text-tertiary system-xs-medium-uppercase bg-white">{t('login.or')}</span>
</div>
</div>}
{
@ -106,38 +106,38 @@ const NormalForm = () => {
{systemFeatures.enable_email_code_login && authType === 'code' && <>
<MailAndCodeAuth isInvite={isInviteLink} />
{systemFeatures.enable_email_password_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('password') }}>
<span className='text-xs text-components-button-secondary-accent-text'>{t('login.usePassword')}</span>
<span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.usePassword')}</span>
</div>}
</>}
{systemFeatures.enable_email_password_login && authType === 'password' && <>
<MailAndPasswordAuth isInvite={isInviteLink} />
{systemFeatures.enable_email_code_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('code') }}>
<span className='text-xs text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
<span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
</div>}
</>}
</>
}
<div className="w-hull text-center block mt-2 text-xs text-text-tertiary">
<div className="w-hull text-center block mt-2 system-xs-regular text-text-tertiary">
{t('login.tosDesc')}
&nbsp;
<Link
className='text-text-secondary'
className='system-xs-medium text-text-secondary'
target='_blank' rel='noopener noreferrer'
href='https://dify.ai/terms'
>{t('login.tos')}</Link>
&nbsp;&&nbsp;
<Link
className='text-text-secondary'
className='system-xs-medium text-text-secondary'
target='_blank' rel='noopener noreferrer'
href='https://dify.ai/privacy'
>{t('login.pp')}</Link>
</div>
{IS_CE_EDITION && <div className="w-hull text-center block mt-2 text-xs text-text-tertiary">
{IS_CE_EDITION && <div className="w-hull text-center block mt-2 system-xs-regular text-text-tertiary">
{t('login.goToInit')}
&nbsp;
<Link
className='text-text-secondary'
className='system-xs-medium text-text-secondary'
href='/install'
>{t('login.setAdminAccount')}</Link>
</div>}

View File

@ -76,14 +76,14 @@ const OneMoreStep = () => {
return (
<>
<div className="w-full mx-auto">
<h2 className="text-2xl font-bold text-text-secondary">{t('login.oneMoreStep')}</h2>
<p className='mt-1 text-sm text-text-tertiary'>{t('login.createSample')}</p>
<h2 className="title-4xl-semi-bold text-text-secondary">{t('login.oneMoreStep')}</h2>
<p className='mt-1 body-md-regular text-text-tertiary'>{t('login.createSample')}</p>
</div>
<div className="w-full mx-auto mt-6">
<div className="bg-white">
<div className="mb-5">
<label className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label className="my-2 flex items-center justify-between system-md-semibold text-text-secondary">
{t('login.invitationCode')}
<Tooltip
popupContent={
@ -112,10 +112,10 @@ const OneMoreStep = () => {
</div>
</div>
<div className='mb-5'>
<label htmlFor="name" className="my-2 flex items-center justify-between text-sm font-medium text-text-secondary">
<label htmlFor="name" className="my-2 system-md-semibold text-text-secondary">
{t('login.interfaceLanguage')}
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="mt-1">
<SimpleSelect
defaultValue={LanguagesSupported[0]}
items={languages.filter(item => item.supported)}
@ -126,10 +126,10 @@ const OneMoreStep = () => {
</div>
</div>
<div className='mb-4'>
<label htmlFor="timezone" className="block text-sm font-medium text-text-tertiary">
<label htmlFor="timezone" className="system-md-semibold text-text-tertiary">
{t('login.timezone')}
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="mt-1">
<SimpleSelect
defaultValue={state.timezone}
items={timezones}
@ -151,11 +151,11 @@ const OneMoreStep = () => {
{t('login.go')}
</Button>
</div>
<div className="block w-hull mt-2 text-xs text-text-tertiary">
<div className="block w-hull mt-2 system-xs-regular text-text-tertiary">
{t('login.license.tip')}
&nbsp;
<Link
className='text-text-accent-secondary'
className='system-xs-medium text-text-accent-secondary'
target='_blank' rel='noopener noreferrer'
href={'https://docs.dify.ai/user-agreement/open-source'}
>{t('login.license.link')}</Link>