admin/family_wishlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): move repeated Tailwind chains into BEM classes

Browse Source
This commit is contained in:
Vaka.pro
2026-04-27 20:42:21 +03:00
parent 17d59c3639
commit d46d4c4487
14 changed files with 273 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/frontend/src/pages/ProfileSettingsPage.tsx
View File

@@ -122,9 +122,9 @@ export function ProfileSettingsPage() {
return (
<div className="grid max-w-2xl gap-6">
<section>
<h1 className="font-display text-3xl">{t('profile.title')}</h1>
<p className="text-sm text-muted">
<section className="page-section">
<h1 className="page-section__title">{t('profile.title')}</h1>
<p className="page-section__text">
{t('profile.publicPage')}
<code className="rounded bg-ink/5 px-1.5 py-0.5">/u/{data?.slug ?? '...'}</code>.
</p>
@@ -133,18 +133,18 @@ export function ProfileSettingsPage() {
{isLoading ? (
<div className="text-muted">{t('common.loading')}</div>
) : (
<form className="grid gap-4 rounded-xl border border-border bg-surface p-6 shadow-card" onSubmit={submit}>
<section className="flex flex-wrap items-center gap-4 rounded-md border border-border bg-surface-muted p-4">
<span className="inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-full bg-primary text-primary-foreground">
<form className="profile-form" onSubmit={submit}>
<section className="profile-form__avatar-panel">
<span className="profile-form__avatar-preview">
{avatarPreview ? (
<img src={avatarPreview} alt="" className="h-16 w-16 object-cover" />
<img src={avatarPreview} alt="" className="profile-form__avatar-image" />
) : (
<Gift className="h-6 w-6" />
)}
</span>
<div className="min-w-0 flex-1">
<h2 className="text-sm font-semibold">{t('profile.avatar')}</h2>
<p className="text-xs text-muted">{t('profile.avatarHint')}</p>
<div className="profile-form__avatar-copy">
<h2 className="profile-form__avatar-title">{t('profile.avatar')}</h2>
<p className="profile-form__avatar-hint">{t('profile.avatarHint')}</p>
</div>
<input
ref={fileInputRef}
@@ -199,7 +199,7 @@ export function ProfileSettingsPage() {
</span>
)}
</div>
<div className="flex items-center justify-end gap-2">
<div className="profile-form__actions">
<Button type="submit" disabled={!isDirty || isSubmitting}>
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
{t('common.saveChanges')}