style: use same serif/typography font styles on profile page as translate page
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m47s

This commit is contained in:
2026-05-31 23:33:32 +02:00
parent 32d75f8a84
commit e9ac30ed1d

View File

@@ -57,6 +57,18 @@ const UI_LANGUAGES: { value: Locale; label: string; flag: string }[] = [
{ value: 'fa', label: 'فارسی', flag: '🇮🇷' }, { value: 'fa', label: 'فارسی', flag: '🇮🇷' },
]; ];
function formatTitleWithItalic(title: string) {
const words = title.split(' ');
if (words.length > 1) {
return (
<>
{words.slice(0, -1).join(' ')} <span className="italic">{words[words.length - 1]}</span>
</>
);
}
return title;
}
/* ── Main component ───────────────────────────────────────────── */ /* ── Main component ───────────────────────────────────────────── */
export default function ProfilePage() { export default function ProfilePage() {
const router = useRouter(); const router = useRouter();
@@ -171,10 +183,10 @@ export default function ProfilePage() {
{/* ── Editorial Header ───────────────────────────────────── */} {/* ── Editorial Header ───────────────────────────────────── */}
<div className="mb-4"> <div className="mb-4">
<span className="accent-pill mb-4 block w-fit">{t('profile.header.title')}</span> <span className="accent-pill mb-4 block w-fit">{t('profile.header.title')}</span>
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white"> <h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
{t('profile.header.title')} {formatTitleWithItalic(t('profile.header.title'))}
</h1> </h1>
<p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('profile.header.subtitle')}</p> <p className="text-brand-dark/50 dark:text-white/50 text-sm font-light leading-relaxed">{t('profile.header.subtitle')}</p>
</div> </div>
{/* Status message */} {/* Status message */}
@@ -222,7 +234,7 @@ export default function ProfilePage() {
</div> </div>
<div className="flex-1 text-center sm:text-left"> <div className="flex-1 text-center sm:text-left">
<div className="flex items-center gap-4 mb-3 flex-wrap justify-center sm:justify-start"> <div className="flex items-center gap-4 mb-3 flex-wrap justify-center sm:justify-start">
<h2 className="text-2xl lg:text-3xl font-black uppercase tracking-tight text-brand-dark dark:text-white"> <h2 className="text-2xl lg:text-3xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{user?.name || t('profile.account.user')} {user?.name || t('profile.account.user')}
</h2> </h2>
<span className="accent-pill !px-3 !py-1 text-[9px] flex items-center gap-1.5"> <span className="accent-pill !px-3 !py-1 text-[9px] flex items-center gap-1.5">
@@ -257,7 +269,7 @@ export default function ProfilePage() {
</div> </div>
<div> <div>
<div className="flex items-center gap-3 flex-wrap"> <div className="flex items-center gap-3 flex-wrap">
<h3 className="text-2xl font-black uppercase tracking-tight text-white"> <h3 className="text-2xl font-serif font-medium text-white tracking-tight">
{t('profile.plan.label')} {planLabel} {t('profile.plan.label')} {planLabel}
</h3> </h3>
<span className={cn( <span className={cn(
@@ -491,7 +503,7 @@ export default function ProfilePage() {
<div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent"> <div className="w-12 h-12 bg-brand-muted dark:bg-white/10 rounded-2xl flex items-center justify-center text-brand-accent">
<Globe size={24} /> <Globe size={24} />
</div> </div>
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white"> <h3 className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('profile.prefs.interfaceLang')} {t('profile.prefs.interfaceLang')}
</h3> </h3>
</div> </div>
@@ -523,7 +535,7 @@ export default function ProfilePage() {
<FileText size={28} /> <FileText size={28} />
</div> </div>
<div> <div>
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white"> <h3 className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('profile.prefs.defaultTargetLang')} {t('profile.prefs.defaultTargetLang')}
</h3> </h3>
<p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed"> <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
@@ -559,7 +571,7 @@ export default function ProfilePage() {
<Palette size={28} /> <Palette size={28} />
</div> </div>
<div> <div>
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white"> <h3 className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('profile.prefs.theme')} {t('profile.prefs.theme')}
</h3> </h3>
<p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed"> <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">
@@ -577,7 +589,7 @@ export default function ProfilePage() {
<Trash2 size={28} /> <Trash2 size={28} />
</div> </div>
<div> <div>
<h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark dark:text-white"> <h3 className="text-2xl font-serif font-medium text-brand-dark dark:text-white tracking-tight">
{t('profile.prefs.cache')} {t('profile.prefs.cache')}
</h3> </h3>
<p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed"> <p className="text-brand-dark/30 dark:text-white/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">