Nicolas
7abe030bb9
- pages/settings/AccountSettingsPage: identité + suppression de compte (confirmation en deux temps, mot de passe requis) - pages/settings/PreferencesPage: régime + allergies/intolérances, sorti de HouseholdPage (attribut du profil, pas du foyer) - pages/settings/HouseholdSettingsPage: sans foyer → créer/rejoindre ; avec foyer → renommer (hot-save), code d'invitation, membres, retirer un membre / supprimer le foyer (admin) ou le quitter - HouseholdPage.tsx/.scss supprimés (contenu réparti ci-dessus) - apiClient: createHouse/joinHouse/leaveHouse/deleteHouse/ removeHouseMember/deleteAccount - AuthContext: deleteAccount() - i18n: namespaces account/preferences réorganisés, household réduit au foyer, common.saving/saved factorisées
151 lines
3.6 KiB
SCSS
151 lines
3.6 KiB
SCSS
// =============================================================================
|
|
// Styles shared by the three settings pages (AccountSettingsPage,
|
|
// PreferencesPage, HouseholdSettingsPage) — colocated under pages/settings/
|
|
// since nothing outside that folder uses these classes. Field/label/input
|
|
// styling itself still comes from features/profile/profile-forms.scss
|
|
// (shared with the onboarding wizard); this file only covers page layout —
|
|
// direct continuation of what used to be HouseholdPage.scss before the
|
|
// household/regime/allergies page was split in three.
|
|
// =============================================================================
|
|
|
|
.settings-page {
|
|
&__status {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
&__status--error {
|
|
color: var(--color-error);
|
|
}
|
|
}
|
|
|
|
// Each setting lives in its own card, same surface treatment used
|
|
// elsewhere (see .planning-table in HomePage.scss) — reads as a distinct,
|
|
// self-contained unit rather than one long form.
|
|
.settings-page__section {
|
|
max-width: 32rem;
|
|
margin-top: var(--space-lg);
|
|
padding: var(--space-lg);
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.settings-page__section-title {
|
|
margin: 0 0 var(--space-sm);
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.settings-page__saving,
|
|
.settings-page__saved {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.settings-page__saving {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.settings-page__saved {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.settings-page__actions {
|
|
display: flex;
|
|
gap: var(--space-sm);
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.settings-page button {
|
|
padding: 0.5rem var(--space-md);
|
|
font-family: var(--font-body);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-base);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
|
|
&:hover:not(:disabled) {
|
|
background: var(--color-surface-alt);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.settings-page__hint {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.settings-page__invite-section {
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
// Household member list.
|
|
.settings-page__members {
|
|
list-style: none;
|
|
margin: var(--space-sm) 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.settings-page__member {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-xs) 0;
|
|
}
|
|
|
|
.settings-page__member-badge {
|
|
margin-left: var(--space-xs);
|
|
padding: 0.1rem 0.4rem;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
background: var(--color-surface-alt);
|
|
border-radius: var(--radius-base);
|
|
}
|
|
|
|
// Invite code — meant to be read/copied, so it's set in a monospace font
|
|
// and never wraps mid-code.
|
|
.settings-page__invite-code {
|
|
font-family: monospace;
|
|
font-size: var(--font-size-md);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
// Destructive actions (delete household/account, remove a member) get a
|
|
// visually distinct, consistent "danger" treatment wherever they appear.
|
|
.settings-page__danger-zone {
|
|
margin-top: var(--space-lg);
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.settings-page__danger-button {
|
|
color: #fff;
|
|
background: var(--color-error);
|
|
border-color: var(--color-error);
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
button.settings-page__link-button {
|
|
padding: 0;
|
|
font: inherit;
|
|
color: var(--color-primary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|