refactor(tip): improve coffee tip presentation
This commit is contained in:
@@ -57,7 +57,6 @@
|
||||
.header,
|
||||
.hero,
|
||||
.productCard,
|
||||
.summaryCard,
|
||||
.statusMessage,
|
||||
.successCard,
|
||||
.checkoutSlot {
|
||||
@@ -180,82 +179,48 @@
|
||||
display: grid;
|
||||
min-height: 172px;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
background:
|
||||
radial-gradient(circle at 52% 36%, rgba(255, 197, 123, 0.32), transparent 28%),
|
||||
radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.82), transparent 34%),
|
||||
linear-gradient(145deg, #fff8ed, #ffe1cc);
|
||||
box-shadow: inset 0 0 0 1px rgba(126, 66, 57, 0.06);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.cup {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 76px;
|
||||
margin-top: 28px;
|
||||
border-radius: 0 0 30px 30px;
|
||||
background: linear-gradient(145deg, #ffffff, #ffe8dd);
|
||||
.coffeeStage::before {
|
||||
position: absolute;
|
||||
width: clamp(112px, 30vw, 148px);
|
||||
aspect-ratio: 1;
|
||||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 198, 151, 0.3));
|
||||
box-shadow:
|
||||
0 18px 30px rgba(108, 63, 56, 0.15),
|
||||
inset -10px -12px 22px rgba(255, 137, 105, 0.12);
|
||||
0 20px 42px rgba(174, 91, 60, 0.13),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
content: "";
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.coffeeSurface {
|
||||
.coffeeStage::after {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: 8px;
|
||||
width: 76px;
|
||||
height: 28px;
|
||||
border: 7px solid #fff8f3;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle at 35% 40%, #d4905d, #7f4b32 72%);
|
||||
bottom: 24px;
|
||||
width: clamp(72px, 18vw, 98px);
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: rgba(111, 58, 44, 0.12);
|
||||
content: "";
|
||||
filter: blur(7px);
|
||||
transform: scaleX(1.08);
|
||||
}
|
||||
|
||||
.cupHandle {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: -25px;
|
||||
width: 34px;
|
||||
height: 38px;
|
||||
border: 8px solid #ffe8dd;
|
||||
border-left: 0;
|
||||
border-radius: 0 999px 999px 0;
|
||||
}
|
||||
|
||||
.saucer {
|
||||
position: absolute;
|
||||
bottom: 34px;
|
||||
width: 118px;
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
box-shadow: 0 12px 22px rgba(105, 59, 48, 0.12);
|
||||
}
|
||||
|
||||
.steamOne,
|
||||
.steamTwo,
|
||||
.steamThree {
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
width: 10px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, rgba(255, 137, 128, 0), rgba(255, 137, 128, 0.42));
|
||||
filter: blur(0.2px);
|
||||
animation: steam 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.steamOne {
|
||||
left: 48%;
|
||||
}
|
||||
|
||||
.steamTwo {
|
||||
left: 38%;
|
||||
animation-delay: 0.28s;
|
||||
}
|
||||
|
||||
.steamThree {
|
||||
left: 58%;
|
||||
animation-delay: 0.56s;
|
||||
.coffeeIcon {
|
||||
z-index: 1;
|
||||
width: clamp(82px, 22vw, 108px);
|
||||
height: auto;
|
||||
color: #7e4535;
|
||||
filter: drop-shadow(0 12px 12px rgba(102, 53, 39, 0.18));
|
||||
animation: coffeeFloat 3.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.productCopy {
|
||||
@@ -291,7 +256,6 @@
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.summaryCard,
|
||||
.successCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -306,27 +270,12 @@
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.summaryLabel,
|
||||
.summaryValue,
|
||||
.statusMessage,
|
||||
.successTitle,
|
||||
.successText {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.summaryLabel {
|
||||
color: #a18181;
|
||||
font-size: 12px;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.summaryValue {
|
||||
margin-top: 4px;
|
||||
color: #2a1b1e;
|
||||
font-size: clamp(14px, 3.519vw, 17px);
|
||||
font-weight: 880;
|
||||
}
|
||||
|
||||
.statusMessage {
|
||||
margin-top: 14px;
|
||||
color: #b2474f;
|
||||
@@ -443,15 +392,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes steam {
|
||||
@keyframes coffeeFloat {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.34;
|
||||
transform: translateY(8px) scaleY(0.82);
|
||||
transform: translateY(3px) rotate(-1deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.76;
|
||||
transform: translateY(-8px) scaleY(1.08);
|
||||
transform: translateY(-5px) rotate(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.coffeeIcon {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { ArrowLeft, Heart, Sparkles } from "lucide-react";
|
||||
import { ArrowLeft, Coffee, Heart, Sparkles } from "lucide-react";
|
||||
|
||||
import { CharacterAvatar } from "@/app/_components";
|
||||
import { MobileShell } from "@/app/_components/core";
|
||||
@@ -14,7 +14,6 @@ import {
|
||||
usePaymentDispatch,
|
||||
usePaymentState,
|
||||
} from "@/stores/payment/payment-context";
|
||||
import { useUserState } from "@/stores/user/user-context";
|
||||
|
||||
import { TipCheckoutButton } from "./tip-checkout-button";
|
||||
import {
|
||||
@@ -35,7 +34,6 @@ export function TipScreen({
|
||||
}: TipScreenProps) {
|
||||
const navigator = useAppNavigator();
|
||||
const authState = useAuthState();
|
||||
const userState = useUserState();
|
||||
const payment = usePaymentState();
|
||||
const paymentDispatch = usePaymentDispatch();
|
||||
const initialPayChannelAppliedRef = useRef(false);
|
||||
@@ -183,14 +181,7 @@ export function TipScreen({
|
||||
|
||||
<section className={styles.productCard} aria-label="Coffee tip product">
|
||||
<div className={styles.coffeeStage} aria-hidden="true">
|
||||
<div className={styles.steamOne} />
|
||||
<div className={styles.steamTwo} />
|
||||
<div className={styles.steamThree} />
|
||||
<div className={styles.cup}>
|
||||
<div className={styles.coffeeSurface} />
|
||||
<div className={styles.cupHandle} />
|
||||
</div>
|
||||
<div className={styles.saucer} />
|
||||
<Coffee className={styles.coffeeIcon} strokeWidth={1.55} />
|
||||
</div>
|
||||
|
||||
<div className={styles.productCopy}>
|
||||
@@ -205,19 +196,6 @@ export function TipScreen({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.summaryCard} aria-label="Order summary">
|
||||
<div>
|
||||
<p className={styles.summaryLabel}>For</p>
|
||||
<p className={styles.summaryValue}>Elio Silvestri</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={styles.summaryLabel}>Balance</p>
|
||||
<p className={styles.summaryValue}>
|
||||
{userState.creditBalance} credits
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{showMissingPlan ? (
|
||||
<p className={styles.statusMessage} role="alert">
|
||||
Coffee tip is not available yet. Please try again later.
|
||||
|
||||
Reference in New Issue
Block a user