refactor(tip): improve coffee tip presentation

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 {
+.coffeeStage::before {
-  position: relative;
+  position: absolute;
-  width: 92px;
+  width: clamp(112px, 30vw, 148px);
-  height: 76px;
+  aspect-ratio: 1;
-  margin-top: 28px;
+  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 0 0 30px 30px;
+  border-radius: 50%;
-  background: linear-gradient(145deg, #ffffff, #ffe8dd);
+  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),
+    0 20px 42px rgba(174, 91, 60, 0.13),
-    inset -10px -12px 22px rgba(255, 137, 105, 0.12);
+    inset 0 1px 0 rgba(255, 255, 255, 0.96);
+  content: "";
+  transform: rotate(-8deg);
 }
 
-.coffeeSurface {
+.coffeeStage::after {
   position: absolute;
-  top: -13px;
+  bottom: 24px;
-  left: 8px;
+  width: clamp(72px, 18vw, 98px);
-  width: 76px;
+  height: 15px;
-  height: 28px;
+  border-radius: 50%;
-  border: 7px solid #fff8f3;
+  background: rgba(111, 58, 44, 0.12);
-  border-radius: 999px;
+  content: "";
-  background: radial-gradient(circle at 35% 40%, #d4905d, #7f4b32 72%);
+  filter: blur(7px);
+  transform: scaleX(1.08);
 }
 
-.cupHandle {
+.coffeeIcon {
-  position: absolute;
+  z-index: 1;
-  top: 18px;
+  width: clamp(82px, 22vw, 108px);
-  right: -25px;
+  height: auto;
-  width: 34px;
+  color: #7e4535;
-  height: 38px;
+  filter: drop-shadow(0 12px 12px rgba(102, 53, 39, 0.18));
-  border: 8px solid #ffe8dd;
+  animation: coffeeFloat 3.2s ease-in-out infinite;
-  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;
 }
 
 .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(3px) rotate(-1deg);
-    transform: translateY(8px) scaleY(0.82);
   }
 
   50% {
-    opacity: 0.76;
+    transform: translateY(-5px) rotate(1deg);
-    transform: translateY(-8px) scaleY(1.08);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coffeeIcon {
+    animation: none;
   }
 }

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({
 
         <section className={styles.productCard} aria-label="Coffee tip product">
           <div className={styles.coffeeStage} aria-hidden="true">
-            <div className={styles.steamOne} />
+            <Coffee className={styles.coffeeIcon} strokeWidth={1.55} />
-            <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} />
           </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.