chore(favicon): 使用预发布环境的图标

src/app/tip/__tests__/tip-screen.checkout.test.tsx

@@ -209,9 +209,6 @@ describe("TipScreen checkout", () => {
         .querySelector("main")
         ?.getAttribute("style"),
     ).toContain('--tip-cover-image: url("/images/cover/maya.png")');
-    expect(
-      container.querySelectorAll('main > div[aria-hidden="true"]'),
-    ).toHaveLength(3);
   });
 
   it.each([

src/app/tip/tip-screen.module.css

@@ -14,87 +14,42 @@
   overflow-x: hidden;
   overflow-y: auto;
   background:
-    radial-gradient(
-      circle at 18% 12%,
-      rgba(255, 181, 105, 0.34),
-      transparent 32%
-    ),
-    radial-gradient(
-      circle at 86% 24%,
-      rgba(255, 85, 139, 0.2),
-      transparent 30%
-    ),
-    linear-gradient(180deg, #fff2e8 0%, #fff8f2 46%, #ffffff 100%);
+    radial-gradient(circle at 88% 8%, rgba(255, 116, 151, 0.14), transparent 28%),
+    linear-gradient(180deg, #fff2e8 0%, #fff9f4 58%, #ffffff 100%);
   color: #25191b;
   isolation: isolate;
 }
 
-.bgImage,
-.bgGlowOne,
-.bgGlowTwo {
+.bgImage {
   position: absolute;
   z-index: 0;
-  pointer-events: none;
-}
-
-.bgImage {
   inset: 0 0 auto;
   height: clamp(230px, 42vh, 330px);
   background:
     linear-gradient(
       180deg,
-      rgba(255, 242, 232, 0.3) 0%,
-      rgba(255, 242, 232, 0.64) 64%,
-      #fff2e8 96%
+      rgba(255, 242, 232, 0.18) 0%,
+      rgba(255, 246, 239, 0.5) 62%,
+      #fff9f4 100%
     ),
-    var(--tip-cover-image) center 18% / cover no-repeat;
-  filter: saturate(0.95) blur(0.2px);
-  opacity: 0.36;
-}
-
-.bgGlowOne,
-.bgGlowTwo {
-  border-radius: 999px;
-  filter: blur(10px);
-}
-
-.bgGlowOne {
-  top: 192px;
-  right: -86px;
-  width: 190px;
-  height: 190px;
-  background: rgba(255, 92, 142, 0.16);
-}
-
-.bgGlowTwo {
-  bottom: 108px;
-  left: -98px;
-  width: 210px;
-  height: 210px;
-  background: rgba(255, 181, 104, 0.18);
+    var(--tip-cover-image) center 20% / cover no-repeat;
+  filter: saturate(0.9);
+  opacity: 0.48;
+  pointer-events: none;
 }
 
 .header {
   position: relative;
   z-index: 1;
-  display: flex;
+  display: grid;
   min-height: 46px;
+  grid-template-columns: 42px minmax(0, 1fr) 42px;
   align-items: center;
-}
-
-.contentFlow {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  min-height: 0;
-  flex: 0 1 auto;
-  flex-direction: column;
-  margin-top: auto;
+  gap: 8px;
 }
 
 .headerIdentity {
   display: flex;
-  width: 100%;
   min-width: 0;
   align-items: center;
   justify-content: center;
@@ -127,6 +82,12 @@
   white-space: nowrap;
 }
 
+.headerBalance {
+  display: block;
+  width: 42px;
+  height: 1px;
+}
+
 .supportPrompt {
   position: relative;
   z-index: 1;
@@ -158,7 +119,7 @@
   z-index: 1;
   display: flex;
   min-height: 0;
-  flex: 0 1 auto;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: 12px;
   margin-top: 12px;
@@ -167,7 +128,7 @@
 .productCard {
   display: grid;
   flex: 0 1 auto;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: clamp(98px, 28vw, 118px) minmax(0, 1fr);
   align-items: center;
   gap: 10px;
   padding: 12px;
@@ -182,10 +143,9 @@
 
 .coffeeStage {
   position: relative;
-  width: clamp(136px, 40vw, 176px);
+  width: 100%;
   aspect-ratio: 1;
   align-self: center;
-  justify-self: center;
   overflow: hidden;
   border-radius: 20px;
   background: #c59b7d;
@@ -381,7 +341,6 @@
 
 .productSkeleton {
   min-height: 174px;
-  margin-top: 0;
 }
 
 .skeletonImage,
@@ -397,9 +356,8 @@
 }
 
 .skeletonImage {
-  width: clamp(136px, 40vw, 176px);
+  width: 100%;
   aspect-ratio: 1;
-  justify-self: center;
   border-radius: 20px;
 }
 
@@ -420,6 +378,7 @@
 
 .checkoutSlot {
   flex: 0 0 auto;
+  margin-top: auto;
 }
 
 .checkoutButton {
@@ -469,7 +428,8 @@
   }
 
   .header {
-    min-height: 40px;
+    grid-template-columns: 40px minmax(0, 1fr) 40px;
+    gap: 5px;
   }
 
   .headerIdentity {
@@ -482,6 +442,7 @@
   }
 
   .productCard {
+    grid-template-columns: 82px minmax(0, 1fr);
     gap: 7px;
     padding: 9px;
   }
@@ -536,15 +497,10 @@
   }
 
   .productCard {
+    grid-template-columns: 92px minmax(0, 1fr);
     padding: 9px;
   }
 
-  .coffeeStage,
-  .skeletonImage {
-    width: 128px;
-    justify-self: center;
-  }
-
   .tierList {
     max-height: 148px;
     gap: 5px;

src/app/tip/tip-screen.tsx

@@ -210,8 +210,6 @@ export function TipScreen({
         }
       >
         <div className={styles.bgImage} aria-hidden="true" />
-        <div className={styles.bgGlowOne} aria-hidden="true" />
-        <div className={styles.bgGlowTwo} aria-hidden="true" />
 
         <header className={styles.header}>
           <BackButton
@@ -220,9 +218,6 @@ export function TipScreen({
             ariaLabel="Back to character home"
             analyticsKey="tip.back_to_splash"
           />
-        </header>
-
-        <div className={styles.contentFlow}>
           <div className={styles.headerIdentity}>
             <div className={styles.headerAvatar}>
               <CharacterAvatar
@@ -237,6 +232,8 @@ export function TipScreen({
               {character.copy.tipTitle}
             </h1>
           </div>
+          <span className={styles.headerBalance} aria-hidden="true" />
+        </header>
 
         <p
           className={`${styles.supportPrompt} ${
@@ -318,9 +315,7 @@ export function TipScreen({
                 <button
                   type="button"
                   onClick={() =>
-                      paymentDispatch({
-                        type: "PaymentCatalogRetryRequested",
-                      })
+                    paymentDispatch({ type: "PaymentCatalogRetryRequested" })
                   }
                 >
                   Try again
@@ -329,7 +324,6 @@ export function TipScreen({
             </section>
           ) : null}
         </div>
-        </div>
       </main>
     </MobileShell>
   );