From 72ac923a441a8b74b6570959e3c98f7a098e5ed0 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Mon, 29 Jun 2026 14:17:46 +0800
Subject: [PATCH] feat(coins-rules): update coin rules text to English for
 better clarity style(sidebar): enhance hero section with new padding, border,
 and background

---
 src/app/coins-rules/coins-rules-screen.tsx    | 41 ++++++++++---------
 .../components/sidebar-screen.module.css      |  9 +++-
 .../components/sidebar-wallet-card.tsx        |  2 +-
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/app/coins-rules/coins-rules-screen.tsx b/src/app/coins-rules/coins-rules-screen.tsx
index 53e75ab8..a6db6679 100644
--- a/src/app/coins-rules/coins-rules-screen.tsx
+++ b/src/app/coins-rules/coins-rules-screen.tsx
@@ -26,40 +26,40 @@ interface CoinRuleItem {
 
 const COIN_RULES: readonly CoinRuleItem[] = [
   {
-    title: "普通聊天",
-    cost: "2 coins / 条",
-    free: "每周免费 50 条",
+    title: "Standard Chat",
+    cost: "2 coins / message",
+    free: "50 free messages weekly",
     icon: MessageCircle,
   },
   {
-    title: "私密聊天",
-    cost: "10 coins / 条",
-    free: "每天免费 1 条",
+    title: "Private Chat",
+    cost: "10 coins / message",
+    free: "1 free message daily",
     icon: Sparkles,
   },
   {
-    title: "语音消息",
-    cost: "20 coins / 条",
+    title: "Voice Message",
+    cost: "20 coins / message",
     icon: Mic2,
   },
   {
-    title: "语音电话",
-    cost: "20 coins / 张",
+    title: "Voice Call",
+    cost: "20 coins / call",
     icon: Phone,
   },
   {
-    title: "照片",
-    cost: "40 coins / 张",
+    title: "Photo",
+    cost: "40 coins / photo",
     icon: ImageIcon,
   },
   {
-    title: "私密相册",
-    cost: "10 张 300 coins",
+    title: "Private Album",
+    cost: "10 photos / 300 coins",
     icon: ImageIcon,
   },
   {
-    title: "私密相册",
-    cost: "20 张 600 coins",
+    title: "Private Album",
+    cost: "20 photos / 600 coins",
     icon: ImageIcon,
   },
 ] as const;
@@ -82,9 +82,9 @@ export function CoinsRulesScreen() {
               <Coins size={24} strokeWidth={2.4} />
             </span>
             <p className={styles.eyebrow}>Coins Guide</p>
-            <h1 className={styles.title}>积分消耗规则</h1>
+            <h1 className={styles.title}>Coin Usage Rules</h1>
             <p className={styles.subtitle}>
-              清晰了解每种互动的积分消耗与免费额度，充值前心里有数。
+              See how many coins each interaction costs before you top up.
             </p>
           </div>
         </header>
@@ -94,9 +94,10 @@ export function CoinsRulesScreen() {
             <Gift size={20} strokeWidth={2.3} />
           </div>
           <div>
-            <h2 className={styles.freeTitle}>免费额度</h2>
+            <h2 className={styles.freeTitle}>Free Allowance</h2>
             <p className={styles.freeText}>
-              普通聊天每周免费 50 条，私密聊天每天免费 1 条。
+              Standard chat includes 50 free messages weekly. Private chat
+              includes 1 free message daily.
             </p>
           </div>
         </section>
diff --git a/src/app/sidebar/components/sidebar-screen.module.css b/src/app/sidebar/components/sidebar-screen.module.css
index e989c7a5..91bac7a9 100644
--- a/src/app/sidebar/components/sidebar-screen.module.css
+++ b/src/app/sidebar/components/sidebar-screen.module.css
@@ -53,7 +53,14 @@
 }
 
 .hero {
-  padding: 12px 2px 6px;
+  padding: 18px;
+  border: 1px solid rgba(246, 87, 160, 0.12);
+  border-radius: 26px;
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 239, 246, 0.84) 100%),
+    #ffffff;
+  box-shadow: 0 14px 34px rgba(55, 36, 44, 0.07);
+  backdrop-filter: blur(16px);
 }
 
 .kicker {
diff --git a/src/app/sidebar/components/sidebar-wallet-card.tsx b/src/app/sidebar/components/sidebar-wallet-card.tsx
index a9395d41..c2ce1566 100644
--- a/src/app/sidebar/components/sidebar-wallet-card.tsx
+++ b/src/app/sidebar/components/sidebar-wallet-card.tsx
@@ -38,7 +38,7 @@ export function SidebarWalletCard({
           className={styles.rulesButton}
           onClick={onRulesClick}
         >
-          Coins 消耗规则
+          Coin Usage Rules
         </button>
       </div>