add global btn and page layout stylings
This commit is contained in:
parent
8960ffd844
commit
365fcf0cae
@ -22,14 +22,23 @@ function CartToast() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="cart-toast">
|
||||
<button className="cart-toast-close" type="button" onClick={dismissToast}>
|
||||
x
|
||||
<div className="cart-toast" role="status" aria-live="polite">
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm cart-toast-close"
|
||||
onClick={dismissToast}
|
||||
aria-label="Hinweis schliessen"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<strong>{cartToast.title}</strong>
|
||||
<p>{cartToast.message}</p>
|
||||
{cartToast.actionLabel && (
|
||||
<button type="button" onClick={runAction}>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--sm"
|
||||
onClick={runAction}
|
||||
>
|
||||
{cartToast.actionLabel}
|
||||
</button>
|
||||
)}
|
||||
|
||||
@ -362,67 +362,9 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.purchase-discovery-note a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0 1rem;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--theme-accent-fill);
|
||||
color: var(--theme-accent-contrast);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-size: var(--text-sm);
|
||||
transition:
|
||||
transform var(--duration-med) var(--ease-out),
|
||||
box-shadow var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.purchase-discovery-note a:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.buy-button,
|
||||
.restock-button,
|
||||
.detail-bottom-actions button,
|
||||
.review-toggle,
|
||||
.review-write-button {
|
||||
min-height: 48px;
|
||||
border: 1px solid var(--theme-border);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
transition:
|
||||
transform var(--duration-med) var(--ease-out),
|
||||
border-color var(--duration-med) var(--ease-out),
|
||||
background-color var(--duration-med) var(--ease-out),
|
||||
box-shadow var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.buy-button {
|
||||
border-color: var(--theme-accent-fill);
|
||||
background: var(--theme-accent-fill);
|
||||
color: var(--theme-accent-contrast);
|
||||
}
|
||||
|
||||
.restock-button {
|
||||
background: transparent;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.buy-button:hover,
|
||||
.restock-button:hover,
|
||||
.detail-bottom-actions button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
}
|
||||
|
||||
.restock-button:hover {
|
||||
border-color: rgba(var(--theme-accent-rgb) / 0.68);
|
||||
}
|
||||
/* Buy / restock / discovery / review CTAs use the global .atmos-btn system
|
||||
(see src/style/buttons.css). The .restock-button class is kept on the
|
||||
element only as a hook for the mobile breakpoint that hides it. */
|
||||
|
||||
.product-story-grid,
|
||||
.product-meta-section {
|
||||
@ -834,21 +776,7 @@
|
||||
margin-top: var(--gap-sm);
|
||||
}
|
||||
|
||||
.review-toggle {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--gap-sm);
|
||||
padding: 0.9rem 1rem;
|
||||
background: transparent;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.review-toggle:hover {
|
||||
border-color: rgba(var(--theme-accent-rgb) / 0.6);
|
||||
}
|
||||
|
||||
/* .review-toggle is rendered as `.atmos-btn--outline --block --split`. */
|
||||
.review-toggle-icon {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
@ -896,12 +824,6 @@
|
||||
background: var(--theme-accent);
|
||||
}
|
||||
|
||||
.review-write-button {
|
||||
background: var(--theme-paper);
|
||||
color: var(--theme-text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.detail-bottom-cta {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
@ -926,29 +848,9 @@
|
||||
}
|
||||
|
||||
.detail-bottom-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--gap-xs);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.detail-bottom-actions button {
|
||||
padding: 0 clamp(1rem, 2vw, 1.35rem);
|
||||
border: 0;
|
||||
border-radius: var(--radius-lg);
|
||||
background: #fff;
|
||||
color: var(--theme-accent-fill-strong);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.detail-bottom-actions button:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.recommendation-heading {
|
||||
display: block;
|
||||
max-width: 74rem;
|
||||
@ -1250,7 +1152,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.buy-button,
|
||||
.purchase-actions .atmos-btn,
|
||||
.restock-button {
|
||||
min-height: 38px;
|
||||
font-size: 0.72rem;
|
||||
@ -1273,11 +1175,6 @@
|
||||
width: min(100%, 24rem);
|
||||
}
|
||||
|
||||
.buy-button,
|
||||
.restock-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.review-score-block {
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
@ -119,7 +119,7 @@ function ProductPurchasePanel({
|
||||
|
||||
<div className="purchase-actions">
|
||||
<button
|
||||
className="buy-button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--uppercase"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
addToCart(
|
||||
@ -133,7 +133,7 @@ function ProductPurchasePanel({
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="restock-button"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--uppercase atmos-btn--sm restock-button"
|
||||
type="button"
|
||||
onClick={() => subscribeToProduct(selectedProductId, "restock").catch(() => {})}
|
||||
>
|
||||
@ -155,7 +155,12 @@ function ProductPurchasePanel({
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Link to="/discovery-set">Zum Set</Link>
|
||||
<Link
|
||||
to="/discovery-set"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--sm"
|
||||
>
|
||||
Zum Set
|
||||
</Link>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
@ -429,7 +434,7 @@ function ProductReviews({
|
||||
<div className={`review-panel ${showReviewDetails ? "is-open" : ""}`} data-reveal="fade">
|
||||
<button
|
||||
type="button"
|
||||
className="review-toggle"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--split atmos-btn--uppercase review-toggle"
|
||||
onClick={() => setShowReviewDetails((prev) => !prev)}
|
||||
aria-expanded={showReviewDetails}
|
||||
>
|
||||
@ -454,7 +459,11 @@ function ProductReviews({
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button type="button" className="review-write-button" disabled>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--block atmos-btn--uppercase"
|
||||
disabled
|
||||
>
|
||||
Bewertung schreiben
|
||||
</button>
|
||||
</div>
|
||||
@ -466,7 +475,7 @@ function ProductReviews({
|
||||
|
||||
function ProductTestingCTA({ perfume, addToCart }) {
|
||||
return (
|
||||
<section className="detail-bottom-cta" data-reveal-group>
|
||||
<section className="detail-bottom-cta" data-reveal-group data-on-accent>
|
||||
<div>
|
||||
<span className="eyebrow" data-reveal="fade">Lieber erst testen?</span>
|
||||
<h2 data-reveal="lines">Sample oder Discovery Set.</h2>
|
||||
@ -477,22 +486,24 @@ function ProductTestingCTA({ perfume, addToCart }) {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="detail-bottom-actions" data-reveal="fade">
|
||||
<div className="detail-bottom-actions atmos-btn-row atmos-btn-row--responsive" data-reveal="fade">
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary"
|
||||
onClick={() =>
|
||||
addToCart(`${perfume.slug}-sample`, 1, `${perfume.name} Sample added.`).catch(
|
||||
() => {}
|
||||
)
|
||||
}
|
||||
>
|
||||
Sample bestellen - {perfume.prices.sample}
|
||||
Sample bestellen — {perfume.prices.sample}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--secondary"
|
||||
onClick={() => addToCart("discovery-set", 1, "Discovery Set added.").catch(() => {})}
|
||||
>
|
||||
Discovery Set - CHF 48
|
||||
Discovery Set — CHF 48
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,8 +5,8 @@ import { useShop } from "../shop/useShop";
|
||||
import "./ShopDrawer.css";
|
||||
|
||||
const paymentMethods = [
|
||||
{ key: "Bill", badge: "BILL", label: "Bill" },
|
||||
{ key: "Card", badge: "CARD", label: "Card" },
|
||||
{ key: "Bill", badge: "BILL", label: "Rechnung" },
|
||||
{ key: "Card", badge: "CARD", label: "Karte" },
|
||||
{ key: "Twint", badge: "TW", label: "Twint" },
|
||||
{ key: "PayPal", badge: "PP", label: "PayPal" },
|
||||
];
|
||||
@ -38,7 +38,7 @@ function Field({
|
||||
const fieldId = id || `shop-field-${fieldName}-${generatedId}`;
|
||||
|
||||
return (
|
||||
<label className="shop-field" htmlFor={fieldId}>
|
||||
<label className="drawer-field" htmlFor={fieldId}>
|
||||
<span>{label}</span>
|
||||
<input
|
||||
id={fieldId}
|
||||
@ -76,10 +76,14 @@ function AuthPanel() {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="drawer-section auth-panel" onSubmit={submit}>
|
||||
<span className="drawer-kicker">{mode === "login" ? "LOGIN" : "REGISTER"}</span>
|
||||
<h2>{mode === "login" ? "Welcome back." : "Create your atmos account."}</h2>
|
||||
<form className="drawer-stack" onSubmit={submit}>
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-eyebrow">{mode === "login" ? "Login" : "Registrieren"}</span>
|
||||
<h2 className="drawer-heading">
|
||||
{mode === "login" ? "Willkommen zurück." : "Konto erstellen."}
|
||||
</h2>
|
||||
|
||||
<div className="drawer-form">
|
||||
{mode === "register" && (
|
||||
<div className="drawer-grid drawer-grid--two">
|
||||
<Field
|
||||
@ -90,7 +94,7 @@ function AuthPanel() {
|
||||
onChange={(value) => update("first_name", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Surname"
|
||||
label="Nachname"
|
||||
name="surname"
|
||||
value={form.surname}
|
||||
autoComplete="family-name"
|
||||
@ -101,7 +105,7 @@ function AuthPanel() {
|
||||
|
||||
<Field
|
||||
id="auth-email"
|
||||
label="Email address"
|
||||
label="E-Mail"
|
||||
name="email"
|
||||
type="email"
|
||||
value={form.email}
|
||||
@ -111,7 +115,7 @@ function AuthPanel() {
|
||||
/>
|
||||
<Field
|
||||
id="auth-password"
|
||||
label="Password"
|
||||
label="Passwort"
|
||||
name="password"
|
||||
type="password"
|
||||
value={form.password}
|
||||
@ -121,17 +125,23 @@ function AuthPanel() {
|
||||
|
||||
{error && <p className="drawer-error">{error}</p>}
|
||||
|
||||
<button className="drawer-primary" type="submit" disabled={busy}>
|
||||
{mode === "login" ? "Login" : "Register"}
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block"
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
>
|
||||
{mode === "login" ? "Login" : "Registrieren"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="drawer-secondary"
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--block atmos-btn--sm"
|
||||
type="button"
|
||||
onClick={() => setMode((current) => (current === "login" ? "register" : "login"))}
|
||||
>
|
||||
{mode === "login" ? "Create account" : "Use existing account"}
|
||||
{mode === "login" ? "Konto erstellen" : "Bestehenden Account nutzen"}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -165,30 +175,32 @@ function CartPanel() {
|
||||
return (
|
||||
<form className="drawer-stack" onSubmit={submit}>
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">CART</span>
|
||||
<span className="drawer-eyebrow">Warenkorb</span>
|
||||
{cart.items.length === 0 ? (
|
||||
<p className="drawer-muted">Your cart is empty.</p>
|
||||
<p className="drawer-muted">Dein Warenkorb ist leer.</p>
|
||||
) : (
|
||||
<div className="cart-items">
|
||||
{cart.items.map((item) => (
|
||||
<article className="cart-item" key={item.product_id}>
|
||||
<div>
|
||||
<div className="cart-item-info">
|
||||
<h3>{item.product.name}</h3>
|
||||
<p>
|
||||
{item.product.size_label} · {formatChf(item.product.price_cents)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="cart-controls">
|
||||
<div className="cart-controls" role="group" aria-label="Menge anpassen">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menge verringern"
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
|
||||
>
|
||||
-
|
||||
−
|
||||
</button>
|
||||
<span>{item.quantity}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Menge erhöhen"
|
||||
onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
|
||||
>
|
||||
+
|
||||
@ -196,11 +208,11 @@ function CartPanel() {
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="cart-remove"
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--sm"
|
||||
type="button"
|
||||
onClick={() => removeCartItem(item.product_id)}
|
||||
>
|
||||
Remove
|
||||
Entfernen
|
||||
</button>
|
||||
</article>
|
||||
))}
|
||||
@ -209,56 +221,77 @@ function CartPanel() {
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">SHIPPING</span>
|
||||
<span className="drawer-eyebrow">Versand</span>
|
||||
<div className="drawer-grid drawer-grid--two">
|
||||
<Field label="Street Name" value={address.street_name} onChange={(value) => updateAddress("street_name", value)} />
|
||||
<Field label="House Number" value={address.house_number} onChange={(value) => updateAddress("house_number", value)} />
|
||||
<Field label="ZIP Code" value={address.zip_code} onChange={(value) => updateAddress("zip_code", value)} />
|
||||
<Field label="City" value={address.city} onChange={(value) => updateAddress("city", value)} />
|
||||
<Field
|
||||
label="Strasse"
|
||||
value={address.street_name}
|
||||
onChange={(value) => updateAddress("street_name", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Nr."
|
||||
value={address.house_number}
|
||||
onChange={(value) => updateAddress("house_number", value)}
|
||||
/>
|
||||
<Field
|
||||
label="PLZ"
|
||||
value={address.zip_code}
|
||||
onChange={(value) => updateAddress("zip_code", value)}
|
||||
/>
|
||||
<Field
|
||||
label="Ort"
|
||||
value={address.city}
|
||||
onChange={(value) => updateAddress("city", value)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">PAYMENT</span>
|
||||
<div className="payment-grid">
|
||||
{paymentMethods.map((method) => (
|
||||
<span className="drawer-eyebrow">Zahlung</span>
|
||||
<div className="payment-grid" role="radiogroup" aria-label="Zahlungsmethode">
|
||||
{paymentMethods.map((method) => {
|
||||
const active = paymentMethod === method.key;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`payment-card ${paymentMethod === method.key ? "active" : ""}`}
|
||||
role="radio"
|
||||
aria-checked={active}
|
||||
className={`payment-card ${active ? "is-active" : ""}`}
|
||||
key={method.key}
|
||||
onClick={() => setPaymentMethod(method.key)}
|
||||
>
|
||||
<span>{method.badge}</span>
|
||||
<span className="payment-card__badge">{method.badge}</span>
|
||||
<strong>{method.label}</strong>
|
||||
</button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="drawer-section totals-box">
|
||||
<div>
|
||||
<section className="drawer-section drawer-totals">
|
||||
<div className="drawer-totals__row">
|
||||
<span>Subtotal</span>
|
||||
<strong>{formatChf(cart.subtotal_cents)}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<div className="drawer-totals__row">
|
||||
<span>Rabatte</span>
|
||||
<strong>-{formatChf(cart.discount_cents)}</strong>
|
||||
<strong>−{formatChf(cart.discount_cents)}</strong>
|
||||
</div>
|
||||
{cart.discounts?.length > 0 && (
|
||||
<div className="discount-explainer">
|
||||
<span>Applied automatically</span>
|
||||
<div className="drawer-totals__explainer">
|
||||
<span className="drawer-eyebrow">Automatisch angewendet</span>
|
||||
{cart.discounts.map((discount) => (
|
||||
<p key={`${discount.type}-${discount.creditId}`}>
|
||||
<strong>{formatChf(discount.amount_cents)}</strong>
|
||||
{" - "}
|
||||
{" — "}
|
||||
{discount.type === "discovery"
|
||||
? "Discovery Set credit for a full-size bottle"
|
||||
: `Sample credit for ${discount.slug}`}
|
||||
? "Discovery Set Credit für eine Full Size"
|
||||
: `Sample Credit für ${discount.slug}`}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="total-row">
|
||||
<div className="drawer-totals__row drawer-totals__row--total">
|
||||
<span>Total</span>
|
||||
<strong>{formatChf(cart.total_cents)}</strong>
|
||||
</div>
|
||||
@ -266,8 +299,12 @@ function CartPanel() {
|
||||
|
||||
{error && <p className="drawer-error">{error}</p>}
|
||||
|
||||
<button className="drawer-primary" type="submit" disabled={busy || cart.items.length === 0}>
|
||||
Checkout
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--lg"
|
||||
type="submit"
|
||||
disabled={busy || cart.items.length === 0}
|
||||
>
|
||||
Jetzt bezahlen
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
@ -275,9 +312,9 @@ function CartPanel() {
|
||||
|
||||
function RequirementRow({ label, met, children }) {
|
||||
return (
|
||||
<div className="requirement-row">
|
||||
<div className={`drawer-requirement ${met ? "is-met" : ""}`}>
|
||||
<span>{label}</span>
|
||||
<strong className={met ? "met" : ""}>{children || (met ? "met" : "open")}</strong>
|
||||
<strong>{children || (met ? "Erfüllt" : "Offen")}</strong>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -330,69 +367,84 @@ function ProfilePanel() {
|
||||
|
||||
return (
|
||||
<div className="drawer-stack">
|
||||
<section className="drawer-section profile-head">
|
||||
<span className="drawer-kicker">PROFILE</span>
|
||||
<h2>Hi, {user.first_name}</h2>
|
||||
<button className="drawer-secondary" type="button" onClick={logout}>
|
||||
<section className="drawer-section drawer-profile-head">
|
||||
<div>
|
||||
<span className="drawer-eyebrow">Profil</span>
|
||||
<h2 className="drawer-heading">Hi, {user.first_name}.</h2>
|
||||
</div>
|
||||
<button
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--sm"
|
||||
type="button"
|
||||
onClick={logout}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<div className="profile-section-header">
|
||||
<span className="drawer-kicker">PROFILE INFORMATION</span>
|
||||
<header className="drawer-section-head">
|
||||
<span className="drawer-eyebrow">Profil-Informationen</span>
|
||||
{!editing && (
|
||||
<button className="drawer-secondary" type="button" onClick={() => setEditing(true)}>
|
||||
Profil bearbeiten
|
||||
<button
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--sm"
|
||||
type="button"
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
Bearbeiten
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{editing ? (
|
||||
<>
|
||||
<div className="drawer-grid drawer-grid--two">
|
||||
<Field label="Name" value={form.first_name || ""} onChange={(value) => update("first_name", value)} />
|
||||
<Field label="Surname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
|
||||
<Field label="Street Name" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
|
||||
<Field label="House Number" value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
|
||||
<Field label="ZIP Code" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
|
||||
<Field label="City" value={form.city || ""} onChange={(value) => update("city", value)} />
|
||||
<Field label="Birthdate" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
|
||||
<Field label="Nachname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
|
||||
<Field label="Strasse" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
|
||||
<Field label="Nr." value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
|
||||
<Field label="PLZ" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
|
||||
<Field label="Ort" value={form.city || ""} onChange={(value) => update("city", value)} />
|
||||
<Field label="Geburtsdatum" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
|
||||
</div>
|
||||
<div className="drawer-actions">
|
||||
<button className="drawer-primary" type="button" disabled={busy} onClick={save}>
|
||||
Save profile
|
||||
<div className="atmos-btn-row">
|
||||
<button
|
||||
className="atmos-btn atmos-btn--primary"
|
||||
type="button"
|
||||
disabled={busy}
|
||||
onClick={save}
|
||||
>
|
||||
Profil speichern
|
||||
</button>
|
||||
<button
|
||||
className="drawer-secondary"
|
||||
className="atmos-btn atmos-btn--outline"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setForm(user);
|
||||
setEditing(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="profile-read-grid">
|
||||
<ReadBlock label="Name" value={user.first_name} />
|
||||
<ReadBlock label="Surname" value={user.surname} />
|
||||
<ReadBlock label="Street Name" value={user.street_name || "-"} />
|
||||
<ReadBlock label="House Number" value={user.house_number || "-"} />
|
||||
<ReadBlock label="ZIP Code" value={user.zip_code || "-"} />
|
||||
<ReadBlock label="City" value={user.city || "-"} />
|
||||
<ReadBlock label="Birthdate" value={user.birthdate || "-"} />
|
||||
<ReadBlock label="Nachname" value={user.surname} />
|
||||
<ReadBlock label="Strasse" value={user.street_name || "—"} />
|
||||
<ReadBlock label="Nr." value={user.house_number || "—"} />
|
||||
<ReadBlock label="PLZ" value={user.zip_code || "—"} />
|
||||
<ReadBlock label="Ort" value={user.city || "—"} />
|
||||
<ReadBlock label="Geburtsdatum" value={user.birthdate || "—"} />
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">DISCOUNT STATUS</span>
|
||||
<div className="status-box">{user.discoveryStatus}</div>
|
||||
<span className="drawer-eyebrow">Discount Status</span>
|
||||
<div className="drawer-status-box">{user.discoveryStatus}</div>
|
||||
{user.sampleCredits?.length > 0 && (
|
||||
<div className="sample-credit-list">
|
||||
<div className="drawer-credit-list">
|
||||
{user.sampleCredits.map((credit) => (
|
||||
<span key={`${credit.slug}-${credit.created_at}`}>
|
||||
{credit.slug}: {credit.status}
|
||||
@ -403,37 +455,42 @@ function ProfilePanel() {
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">DROP / RESTOCK PREFERENCES</span>
|
||||
<div className="toggle-grid">
|
||||
{notificationLabels.map(([key, label]) => (
|
||||
<span className="drawer-eyebrow">Drop / Restock Preferences</span>
|
||||
<div className="drawer-toggle-grid">
|
||||
{notificationLabels.map(([key, label]) => {
|
||||
const active = !!notifications[key];
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
className={`pref-toggle ${notifications[key] ? "active" : ""}`}
|
||||
aria-pressed={active}
|
||||
className={`drawer-toggle ${active ? "is-active" : ""}`}
|
||||
onClick={() => togglePreference(key)}
|
||||
>
|
||||
<span>{label}</span>
|
||||
<strong>{notifications[key] ? "Active" : "Inactive"}</strong>
|
||||
<strong>{active ? "Active" : "Inactive"}</strong>
|
||||
</button>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="subscription-list">
|
||||
<span className="subscription-list-title">Subscribed Restocks</span>
|
||||
<div className="drawer-subscription-list">
|
||||
<span className="drawer-eyebrow">Abonnierte Restocks</span>
|
||||
{restockSubscriptions.length === 0 ? (
|
||||
<p className="drawer-muted">No product-specific restock updates yet.</p>
|
||||
<p className="drawer-muted">Noch keine produktbezogenen Restock-Updates.</p>
|
||||
) : (
|
||||
restockSubscriptions.map((subscription) => (
|
||||
<article className="subscription-row" key={subscription.id}>
|
||||
<article className="drawer-subscription-row" key={subscription.id}>
|
||||
<div>
|
||||
<strong>{subscription.name}</strong>
|
||||
<span>{subscription.size_label}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--ghost atmos-btn--sm"
|
||||
onClick={() => removeProductSubscription(subscription.id).catch(() => {})}
|
||||
>
|
||||
Delete
|
||||
Entfernen
|
||||
</button>
|
||||
</article>
|
||||
))
|
||||
@ -442,20 +499,22 @@ function ProfilePanel() {
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">SMALL BATCH ACCESS</span>
|
||||
<div className="status-box">{loyalty.unlocked ? "Unlocked" : "Locked"}</div>
|
||||
<div className="requirements">
|
||||
<span className="drawer-eyebrow">Small Batch Access</span>
|
||||
<div className="drawer-status-box">
|
||||
{loyalty.unlocked ? "Freigeschaltet" : "Noch gesperrt"}
|
||||
</div>
|
||||
<div className="drawer-requirements">
|
||||
<RequirementRow label="Discovery Set" met={loyalty.hasDiscoverySet} />
|
||||
<RequirementRow label="Full Size" met={loyalty.hasFullSize} />
|
||||
<RequirementRow label="Purchases" met={loyalty.purchases >= 3}>
|
||||
{loyalty.purchases}/3 Purchases
|
||||
<RequirementRow label="Bestellungen" met={loyalty.purchases >= 3}>
|
||||
{loyalty.purchases}/3
|
||||
</RequirementRow>
|
||||
<RequirementRow label="Spend" met={loyalty.spent_cents > 50000}>
|
||||
<RequirementRow label="Umsatz" met={loyalty.spent_cents > 50000}>
|
||||
{formatChf(loyalty.spent_cents)} / CHF 500+
|
||||
</RequirementRow>
|
||||
</div>
|
||||
<Link
|
||||
className="drawer-primary drawer-link-primary"
|
||||
className="atmos-btn atmos-btn--secondary atmos-btn--block"
|
||||
to="/small-batch"
|
||||
onClick={closePanel}
|
||||
>
|
||||
@ -464,19 +523,19 @@ function ProfilePanel() {
|
||||
</section>
|
||||
|
||||
<section className="drawer-section">
|
||||
<span className="drawer-kicker">PURCHASES</span>
|
||||
<span className="drawer-eyebrow">Bestellungen</span>
|
||||
{orders.length === 0 ? (
|
||||
<p className="drawer-muted">No orders yet.</p>
|
||||
<p className="drawer-muted">Noch keine Bestellungen.</p>
|
||||
) : (
|
||||
<div className="order-list">
|
||||
<div className="drawer-order-list">
|
||||
{orders.map((order) => (
|
||||
<article className="order-card" key={order.id}>
|
||||
<div>
|
||||
<strong>Order #{order.id}</strong>
|
||||
<article className="drawer-order-card" key={order.id}>
|
||||
<header>
|
||||
<strong>Bestellung #{order.id}</strong>
|
||||
<span>{new Date(order.created_at).toLocaleDateString("de-CH")}</span>
|
||||
</div>
|
||||
<p>{order.items.map((item) => `${item.quantity} x ${item.product.name}`).join(", ")}</p>
|
||||
<strong>{formatChf(order.total_cents)}</strong>
|
||||
</header>
|
||||
<p>{order.items.map((item) => `${item.quantity} × ${item.product.name}`).join(", ")}</p>
|
||||
<strong className="drawer-order-card__total">{formatChf(order.total_cents)}</strong>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
@ -490,7 +549,7 @@ function ProfilePanel() {
|
||||
|
||||
function ReadBlock({ label, value }) {
|
||||
return (
|
||||
<div className="read-block">
|
||||
<div className="drawer-read-block">
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
@ -500,23 +559,30 @@ function ReadBlock({ label, value }) {
|
||||
function ShopDrawer() {
|
||||
const { closePanel, panelOpen, panelType, user } = useShop();
|
||||
|
||||
const drawerLabel = !user ? "Account" : panelType === "cart" ? "Warenkorb" : "Profil";
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`drawer-backdrop ${panelOpen ? "open" : ""}`}
|
||||
className={`drawer-backdrop ${panelOpen ? "is-open" : ""}`}
|
||||
onClick={closePanel}
|
||||
/>
|
||||
<aside
|
||||
className={`shop-drawer ${panelOpen ? "open" : ""}`}
|
||||
className={`shop-drawer ${panelOpen ? "is-open" : ""}`}
|
||||
aria-hidden={!panelOpen}
|
||||
data-lenis-prevent
|
||||
>
|
||||
<div className="drawer-top">
|
||||
<span>{!user ? "ACCOUNT" : panelType === "cart" ? "CART" : "PROFILE"}</span>
|
||||
<button type="button" onClick={closePanel} aria-label="Close panel">
|
||||
x
|
||||
<header className="drawer-top">
|
||||
<span className="drawer-eyebrow">{drawerLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm"
|
||||
onClick={closePanel}
|
||||
aria-label="Panel schliessen"
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{!user ? <AuthPanel /> : panelType === "cart" ? <CartPanel /> : <ProfilePanel />}
|
||||
</aside>
|
||||
</>
|
||||
|
||||
@ -76,10 +76,10 @@ function HeroSection({
|
||||
</h1>
|
||||
|
||||
<div className="hero-actions" ref={setActionsRef}>
|
||||
<a href="#dufte" className="btn btn-primary">
|
||||
<a href="#dufte" className="atmos-btn atmos-btn--primary">
|
||||
{"Aktuelle D\u00FCfte"}
|
||||
</a>
|
||||
<Link to="/discovery-set" className="btn btn-secondary">
|
||||
<Link to="/discovery-set" className="atmos-btn atmos-btn--secondary">
|
||||
Discovery Set
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -170,39 +170,7 @@
|
||||
gap: var(--gap-xs);
|
||||
}
|
||||
|
||||
.discovery-primary-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 0.8rem 1.35rem;
|
||||
border: 1px solid var(--theme-accent-fill);
|
||||
border-radius: 0;
|
||||
background: var(--theme-accent-fill);
|
||||
color: var(--theme-accent-contrast);
|
||||
cursor: pointer;
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.12em;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
transition:
|
||||
transform var(--duration-med) var(--ease-out),
|
||||
border-color var(--duration-med) var(--ease-out),
|
||||
box-shadow var(--duration-med) var(--ease-out),
|
||||
background-color var(--duration-med) var(--ease-out);
|
||||
}
|
||||
|
||||
.discovery-primary-btn:hover,
|
||||
.discovery-primary-btn:focus-visible {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
}
|
||||
|
||||
.discovery-primary-btn:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
/* Discovery CTAs use the global .atmos-btn system (see src/style/buttons.css). */
|
||||
|
||||
.discovery-panel-actions p {
|
||||
margin: 0;
|
||||
@ -556,10 +524,8 @@
|
||||
min-width: min(100%, 22rem);
|
||||
}
|
||||
|
||||
.discovery-final-actions .discovery-primary-btn {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
background: #262626;
|
||||
}
|
||||
/* On the accent-filled final CTA, the `data-on-accent` wrapper auto-flips
|
||||
.atmos-btn--primary to a white pill — no override needed here. */
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.discovery-story-grid,
|
||||
@ -743,20 +709,12 @@
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.discovery-primary-btn {
|
||||
min-height: 48px;
|
||||
padding-inline: 1rem;
|
||||
font-size: 0.76rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.discovery-product-card {
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.discovery-primary-btn,
|
||||
.discovery-product-card,
|
||||
.discovery-product-image img {
|
||||
transition: none;
|
||||
|
||||
@ -81,7 +81,11 @@ function DiscoveryOrderPanel({ onBuy }) {
|
||||
</div>
|
||||
|
||||
<div className="discovery-panel-actions">
|
||||
<button type="button" className="discovery-primary-btn" onClick={onBuy}>
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--uppercase"
|
||||
onClick={onBuy}
|
||||
>
|
||||
Kaufen
|
||||
</button>
|
||||
<p>Nur das erste Set erstellt einen einmaligen CHF 48 Full-Size-Rabatt.</p>
|
||||
@ -265,7 +269,7 @@ function DiscoveryComparisonSection() {
|
||||
|
||||
function DiscoveryFinalCta({ onBuy }) {
|
||||
return (
|
||||
<section className="discovery-final-cta" data-reveal-group>
|
||||
<section className="discovery-final-cta" data-reveal-group data-on-accent>
|
||||
<div>
|
||||
<span className="discovery-label" data-reveal="fade">
|
||||
Discovery Set
|
||||
@ -277,8 +281,12 @@ function DiscoveryFinalCta({ onBuy }) {
|
||||
</div>
|
||||
|
||||
<div className="discovery-final-actions" data-reveal="fade">
|
||||
<button type="button" className="discovery-primary-btn" onClick={onBuy}>
|
||||
Kaufen
|
||||
<button
|
||||
type="button"
|
||||
className="atmos-btn atmos-btn--primary atmos-btn--uppercase"
|
||||
onClick={onBuy}
|
||||
>
|
||||
Discovery Set bestellen
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -161,47 +161,7 @@ body.theme-light .hero-wordmark__image {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.discovery-btn {
|
||||
min-height: 48px;
|
||||
border: none;
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0 clamp(1rem, 2vw, 1.35rem);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform var(--duration-med) var(--ease-out),
|
||||
opacity var(--duration-med) var(--ease-out),
|
||||
box-shadow var(--duration-med) var(--ease-out),
|
||||
background-color var(--duration-med) var(--ease-out),
|
||||
border-color var(--duration-med) var(--ease-out);
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.discovery-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn:active,
|
||||
.discovery-btn:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--theme-accent-fill);
|
||||
color: var(--theme-accent-contrast);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: color-mix(in srgb, var(--theme-surface) 72%, transparent);
|
||||
color: var(--theme-text);
|
||||
border: 1px solid var(--theme-border-strong);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
/* Hero CTAs use the global .atmos-btn system (see src/style/buttons.css). */
|
||||
|
||||
.hero-scroll {
|
||||
position: absolute;
|
||||
@ -587,11 +547,8 @@ body.theme-light .hero-wordmark__image {
|
||||
line-height: 1.62;
|
||||
}
|
||||
|
||||
.discovery-btn {
|
||||
.discovery-copy .atmos-btn {
|
||||
margin-top: clamp(1.3rem, 3vw, 2.1rem);
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
}
|
||||
|
||||
.discovery-banner {
|
||||
@ -719,7 +676,7 @@ body.theme-light .hero-wordmark__image {
|
||||
margin-top: 1.1rem;
|
||||
}
|
||||
|
||||
.hero-actions .btn {
|
||||
.hero-actions .atmos-btn {
|
||||
min-height: 44px;
|
||||
padding-inline: 0.95rem;
|
||||
font-size: 0.78rem;
|
||||
|
||||
@ -554,7 +554,11 @@ function LandingPage() {
|
||||
<br />
|
||||
Verstehen, was funktioniert.
|
||||
</p>
|
||||
<Link to="/discovery-set" className="discovery-btn" data-reveal="fade">
|
||||
<Link
|
||||
to="/discovery-set"
|
||||
className="atmos-btn atmos-btn--invert"
|
||||
data-reveal="fade"
|
||||
>
|
||||
Discovery Set bestellen
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -136,7 +136,7 @@ function SmallBatchPage() {
|
||||
{state.error && <p className="small-message">{state.error}</p>}
|
||||
{state.loading && <p className="small-message">Loading access…</p>}
|
||||
|
||||
{loyalty.unlocked && state.releases.length > 0 && (
|
||||
{loyalty.unlocked && (
|
||||
<section
|
||||
className="release-grid"
|
||||
data-reveal-group
|
||||
|
||||
@ -273,6 +273,13 @@
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
|
||||
/* Content distributed across the button (label left, icon right). */
|
||||
.atmos-btn--split {
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
padding-inline: clamp(0.85rem, 1.6vw, 1.1rem);
|
||||
}
|
||||
|
||||
/* Group helper — consistent spacing wherever buttons cluster. */
|
||||
.atmos-btn-row {
|
||||
display: flex;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user