songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve layout consistency in settings pages by adjusting grid structures

Browse Source
This commit is contained in:
javayhu 2025-07-12 19:46:27 +08:00
parent 0f79ed14f0
commit 72e0a14fc9
12 changed files with 30 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/[locale]/(protected)/settings/notifications/page.tsx
View File

@ -2,8 +2,10 @@ import { NewsletterFormCard } from '@/components/settings/notification/newslette
export default function NotificationPage() {
return (
<div className="grid gap-8 @lg/main:grid-cols-2">
<NewsletterFormCard />
<div className="flex flex-col gap-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<NewsletterFormCard />
</div>
</div>
);
}

8
src/app/[locale]/(protected)/settings/profile/page.tsx
View File

@ -4,8 +4,12 @@ import { UpdateNameCard } from '@/components/settings/profile/update-name-card';
export default function ProfilePage() {
return (
<div className="flex flex-col gap-8">
<UpdateAvatarCard />
<UpdateNameCard />
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<UpdateAvatarCard />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<UpdateNameCard />
</div>
</div>
);
}

8
src/app/[locale]/(protected)/settings/security/page.tsx
View File

@ -4,8 +4,12 @@ import { PasswordCardWrapper } from '@/components/settings/security/password-car
export default function SecurityPage() {
return (
<div className="flex flex-col gap-8">
<PasswordCardWrapper />
<DeleteAccountCard />
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<PasswordCardWrapper />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<DeleteAccountCard />
</div>
</div>
);
}

24
src/components/settings/billing/billing-card.tsx
View File

@ -90,11 +90,7 @@ export default function BillingCard() {
// Render loading skeleton
if (isPageLoading) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle>{t('currentPlan.title')}</CardTitle>
<CardDescription>{t('currentPlan.description')}</CardDescription>
@ -116,11 +112,7 @@ export default function BillingCard() {
// Render error state
if (loadPaymentError) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle>{t('currentPlan.title')}</CardTitle>
<CardDescription>{t('currentPlan.description')}</CardDescription>
@ -145,11 +137,7 @@ export default function BillingCard() {
// currentPlanFromStore maybe null, so we need to check if it is null
if (!currentPlanFromStore) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle>{t('currentPlan.title')}</CardTitle>
<CardDescription>{t('currentPlan.description')}</CardDescription>
@ -173,11 +161,7 @@ export default function BillingCard() {
// console.log('billing card, currentUser', currentUser);
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle className="text-lg font-semibold">
{t('currentPlan.title')}

18
src/components/settings/billing/credits-balance-card.tsx
View File

@ -58,11 +58,7 @@ export default function CreditsBalanceCard() {
// Render loading skeleton
if (isLoading) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle>{t('title')}</CardTitle>
<CardDescription>{t('description')}</CardDescription>
@ -83,11 +79,7 @@ export default function CreditsBalanceCard() {
// Render error state
if (error) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle>{t('title')}</CardTitle>
<CardDescription>{t('description')}</CardDescription>
@ -107,11 +99,7 @@ export default function CreditsBalanceCard() {
}
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0 flex flex-col')}>
<CardHeader>
<CardTitle className="text-lg font-semibold">{t('title')}</CardTitle>
<CardDescription>{t('description')}</CardDescription>

7
src/components/settings/notification/newsletter-form-card.tsx
View File

@ -165,12 +165,7 @@ export function NewsletterFormCard({ className }: NewsletterFormCardProps) {
};
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0',
className
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-0', className)}>
<CardHeader>
<CardTitle className="text-lg font-semibold">
{t('newsletter.title')}

2
src/components/settings/profile/update-avatar-card.tsx
View File

@ -128,7 +128,7 @@ export function UpdateAvatarCard({ className }: UpdateAvatarCardProps) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden py-0 pt-6 flex flex-col',
'w-full overflow-hidden py-0 pt-6 flex flex-col',
className
)}
>

2
src/components/settings/profile/update-name-card.tsx
View File

@ -110,7 +110,7 @@ export function UpdateNameCard({ className }: UpdateNameCardProps) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col',
'w-full overflow-hidden pt-6 pb-0 flex flex-col',
className
)}
>

2
src/components/settings/security/delete-account-card.tsx
View File

@ -79,7 +79,7 @@ export function DeleteAccountCard() {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl border-destructive/50 overflow-hidden pt-6 pb-0 flex flex-col'
'w-full border-destructive/50 overflow-hidden pt-6 pb-0 flex flex-col'
)}
>
<CardHeader>

6
src/components/settings/security/password-card-wrapper.tsx
View File

@ -80,11 +80,7 @@ export function PasswordCardWrapper() {
function PasswordSkeletonCard() {
const t = useTranslations('Dashboard.settings.security.updatePassword');
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-6 flex flex-col'
)}
>
<Card className={cn('w-full overflow-hidden pt-6 pb-6 flex flex-col')}>
<CardHeader>
<CardTitle className="text-lg font-semibold">{t('title')}</CardTitle>
<CardDescription>{t('description')}</CardDescription>

2
src/components/settings/security/reset-password-card.tsx
View File

@ -55,7 +55,7 @@ export function ResetPasswordCard({ className }: ResetPasswordCardProps) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col',
'w-full overflow-hidden pt-6 pb-0 flex flex-col',
className
)}
>

2
src/components/settings/security/update-password-card.tsx
View File

@ -114,7 +114,7 @@ export function UpdatePasswordCard({ className }: UpdatePasswordCardProps) {
return (
<Card
className={cn(
'w-full max-w-lg md:max-w-xl overflow-hidden pt-6 pb-0 flex flex-col',
'w-full overflow-hidden pt-6 pb-0 flex flex-col',
className
)}
>