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
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m47s
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user