From 3362fafa1c1e3243f74918e55fd6d8a4777b467c Mon Sep 17 00:00:00 2001 From: chenhang Date: Mon, 13 Jul 2026 15:54:59 +0800 Subject: [PATCH] refactor(tip): improve coffee tip presentation --- src/app/tip/tip-screen.module.css | 125 ++++++++++-------------------- src/app/tip/tip-screen.tsx | 26 +------ 2 files changed, 41 insertions(+), 110 deletions(-) diff --git a/src/app/tip/tip-screen.module.css b/src/app/tip/tip-screen.module.css index 300f54cc..f0d7c6ec 100644 --- a/src/app/tip/tip-screen.module.css +++ b/src/app/tip/tip-screen.module.css @@ -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; } } diff --git a/src/app/tip/tip-screen.tsx b/src/app/tip/tip-screen.tsx index a942ebb4..9caa8c9f 100644 --- a/src/app/tip/tip-screen.tsx +++ b/src/app/tip/tip-screen.tsx @@ -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({
-
-
-

For

-

Elio Silvestri

-
-
-

Balance

-

- {userState.creditBalance} credits -

-
-
- {showMissingPlan ? (

Coffee tip is not available yet. Please try again later.