lukasandClaude Sonnet 5
79bd64ce8c
- Wire up Better Auth (email/password + Google/Apple SSO) with a sign-in/sign-up UI, header account menu, and a basket that follows the signed-in-or-guest state. - Give the order status page a vertical timeline per preparation step (with a distinct customer-facing name separate from the machine tag, a done/in-progress/queued/pending look, and a sonar-ping highlight on the active step), a formatted ETA (relative under 3h, absolute clock time beyond that), and Buy again / Get help / Cancel actions. - Expand Pizza's recipe into 6 steps across a shared prep station and the existing oven/assembly stations, with matching schema, seed, and domain changes plus updated/added test coverage. - Add an Orders list (account orders via session, guest orders via a locally remembered access-token list) with a shared getOrdersForCustomer domain summary, and remember a guest's name/contact after their first order so checkout doesn't ask again. - Improve page transitions with the View Transitions API: a shared element morph between an order card and its detail page, a stable (non-jumping) header across navigations, and reduced-motion handling. - Add a Ghost Kitchen wordmark (Space Grotesk, faded "Ghost", ghost icon standing in for the "o") and shrink the basket icon to match the rest of the header controls. - Add a run-ghost-kitchen agent skill documenting local setup, the dev-server driver, and the gotchas hit along the way. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
51 lines
788 B
SCSS
51 lines
788 B
SCSS
@use '../styles/variables' as *;
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-2;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $space-1;
|
|
font-size: 0.85rem;
|
|
color: $color-text-muted;
|
|
|
|
input {
|
|
padding: $space-2;
|
|
border: 1px solid $color-border;
|
|
border-radius: $radius;
|
|
font-size: 1rem;
|
|
color: $color-text;
|
|
}
|
|
}
|
|
|
|
.submitButton {
|
|
padding: $space-2 $space-3;
|
|
border: none;
|
|
border-radius: $radius;
|
|
background: $color-primary;
|
|
color: $color-primary-contrast;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.error {
|
|
color: $color-danger;
|
|
font-size: 0.85rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.divider {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: $color-text-muted;
|
|
}
|