Animate the empty orders state in and make its CTA more inviting

Fades/slides the empty state in on mount, gives the icon a tinted
circle badge instead of a bare stroke icon, and gives the "Browse the
menu" button a shadow, hover lift, and a shifting arrow instead of a
flat opacity hover.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-13 20:07:39 +02:00
co-authored by Claude Sonnet 5
parent f4f3c26e1e
commit c5ed038bca
2 changed files with 57 additions and 7 deletions
@@ -10,6 +10,17 @@
margin: 0 0 $space-4;
}
@keyframes empty-state-enter {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.empty {
display: flex;
flex-direction: column;
@@ -21,11 +32,25 @@
border-radius: $radius;
background: $color-surface;
@media (prefers-reduced-motion: no-preference) {
animation: empty-state-enter 0.32s cubic-bezier(0.2, 0, 0, 1) both;
}
}
.emptyIcon {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: $space-2;
border-radius: 999px;
background: color-mix(in srgb, $color-primary 12%, transparent);
svg {
width: 2.5rem;
height: 2.5rem;
margin-bottom: $space-2;
color: $color-text-muted;
width: 1.75rem;
height: 1.75rem;
color: $color-primary;
}
}
@@ -41,17 +66,37 @@
}
.emptyCta {
display: inline-flex;
align-items: center;
gap: $space-1;
padding: $space-2 $space-4;
border-radius: $radius;
background: $color-primary;
color: $color-primary-contrast;
font-weight: 600;
text-decoration: none;
transition: opacity 0.15s ease;
box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
&:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 6px 16px color-mix(in srgb, $color-primary 45%, transparent);
}
&:active {
transform: translateY(0);
box-shadow: 0 2px 8px color-mix(in srgb, $color-primary 35%, transparent);
}
}
.emptyCtaArrow {
transition: transform 0.15s ease;
}
.emptyCta:hover .emptyCtaArrow {
transform: translateX(3px);
}
.orders {