refactor(tip): improve coffee tip presentation

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} />
-            <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.