feat: 修改文案大小

This commit is contained in:
2025-08-17 07:11:03 -07:00
parent bf8c01048c
commit fb2afa7eda
4 changed files with 82 additions and 66 deletions
@@ -42,8 +42,8 @@ export default function ChangePassword() {
return (
<Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
<div className={'mb-3'}>
<div className={'flex items-center justify-between font-bold sm:text-xl'}>
<div className={'mb-3 sm:mb-5'}>
<div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
{t('accountSettings')}
<Button
type='submit'
@@ -56,10 +56,14 @@ export default function ChangePassword() {
{t('save')}
</Button>
</div>
<div className={'text-xs font-light sm:text-[15px]'}>{t('description')}</div>
<div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>{t('description')}</div>
</div>
<Form {...form}>
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<form
id='password-form'
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-2.5 sm:space-y-5'
>
<FormField
control={form.control}
name='password'
@@ -68,7 +72,7 @@ export default function ChangePassword() {
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('newPassword')}
@@ -87,7 +91,7 @@ export default function ChangePassword() {
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-base shadow-[inset_0_0_7.6px_0_#00000040] sm:text-xl md:text-xl'
'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('repeatNewPassword')}
@@ -100,13 +104,8 @@ export default function ChangePassword() {
/>
</form>
</Form>
<div className={'mt-8 hidden justify-center sm:flex'}>
<AiroButton
type='submit'
variant={'default'}
form='password-form'
className={'h-full rounded-[50px] px-[55px] py-[9px] text-xl'}
>
<div className={'mt-5 hidden justify-center sm:flex'}>
<AiroButton type='submit' variant={'default'} form='password-form'>
{t('save')}
</AiroButton>
</div>
@@ -60,13 +60,13 @@ export default function NotifySettings() {
return (
<Card className='flex h-full flex-col justify-between rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
<div className={'mb-3'}>
<div className={'flex items-center justify-between font-bold sm:text-xl'}>
<div className={'mb-3 sm:mb-0'}>
<div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
{t('notify.notificationSettings')}
<Button
type='submit'
size='sm'
form='notify-form'
form='password-form'
className={
'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
}
@@ -74,53 +74,54 @@ export default function NotifySettings() {
{t('notify.save')}
</Button>
</div>
<div className={'text-xs font-light sm:text-[15px]'}>{t('notify.description')}</div>
<div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>
{' '}
{t('notify.description')}
</div>
</div>
<div className={'flex flex-1 flex-col justify-end'}>
<Form {...form}>
<form
id='notify-form'
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-2 sm:space-y-2.5'
>
<div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
{ name: 'enable_subscribe_notify', label: 'subscribe' },
{ name: 'enable_trade_notify', label: 'finance' },
].map(({ name, label }) => (
<FormField
key={name}
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormLabel className='text-muted-foreground text-sm text-[#848484]'>
{t(`notify.${label}`)}
</FormLabel>
<FormControl>
<Switch
className={
'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
}
thumbClassName={'border-[#D9D9D9] border'}
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
))}
</div>
</form>
</Form>
</div>
<Form {...form}>
<form
id='notify-form'
onSubmit={form.handleSubmit(onSubmit)}
className='space-y-2 sm:space-y-4'
>
<div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1 sm:gap-4'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
{ name: 'enable_subscribe_notify', label: 'subscribe' },
{ name: 'enable_trade_notify', label: 'finance' },
].map(({ name, label }) => (
<FormField
key={name}
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormLabel className='text-muted-foreground text-sm text-[#848484]'>
{t(`notify.${label}`)}
</FormLabel>
<FormControl>
<Switch
className={
'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
}
thumbClassName={'border-[#D9D9D9] border'}
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
))}
</div>
</form>
</Form>
<div className={'mt-8 hidden justify-center sm:flex'}>
<AiroButton
type='submit'
form='notify-form'
className={'h-full px-[55px] py-[9px] text-xl'}
>
<AiroButton type='submit' form='notify-form'>
{t('notify.save')}
</AiroButton>
</div>
@@ -6,6 +6,9 @@ import { bindOAuth, unbindOAuth, updateBindEmail, updateBindMobile } from '@/ser
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/airo-ui/components/button';
import { Card } from '@workspace/airo-ui/components/card';
import SvgIcon from '@/components/SvgIcon';
import {
Dialog,
DialogContent,
@@ -245,7 +248,7 @@ export default function ThirdPartyAccounts() {
}
>
<div className={'flex items-center justify-between text-base font-bold sm:text-xl'}>
<span>{t('title')}</span>
<span className={'ml-1'}>{t('title')}</span>
<div
className={
'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center font-medium leading-[32px] text-white sm:hidden'
@@ -254,14 +257,17 @@ export default function ThirdPartyAccounts() {
{t('save')}
</div>
</div>
<div className='mb-2 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
<div className='mb-2 ml-1 text-xs text-[#666666] sm:mb-4 sm:mt-1 sm:text-sm'>
{user?.auth_methods?.[0]?.auth_identifier}
</div>
<div className={'mb-1 sm:mb-3'}>{t('emailLabel')}</div>
<div className={'flex items-center gap-2'}>
<div className={'mb-1 ml-4 flex items-center gap-2 sm:mb-3'}>
<SvgIcon name={'email'} />
{t('emailLabel')}
</div>
<div className={'flex items-center gap-6'}>
<div
className={
'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-base !leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)] sm:text-xl'
'line-clamp-1 h-[46px] flex-1 rounded-full bg-[#EAEAEA] px-5 text-base !leading-[46px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'
}
>
{user?.auth_methods?.[0]?.auth_identifier}