From c59c783f0f39b5b081c8b8f41976442b9e6ffbb1 Mon Sep 17 00:00:00 2001
From: bloomingg <1293499952@qq.com>
Date: Thu, 23 Jul 2026 18:36:44 +0800
Subject: [PATCH] fix: refine copy action proportions

---
 src/extension/popup/app.tsx    |  5 ++-
 src/extension/popup/styles.css | 79 ++++++++++++++++++++++------------
 tests/popup-view.test.tsx      |  7 ++-
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/src/extension/popup/app.tsx b/src/extension/popup/app.tsx
index dab7e98..05a9464 100644
--- a/src/extension/popup/app.tsx
+++ b/src/extension/popup/app.tsx
@@ -290,9 +290,10 @@ function ReadyPanel(props: PopupViewProps) {
       >
         <span className="result-card-icon"><Icon name="copy" size={22} /></span>
         <span className="result-card-body">
-          <span className="result-card-title">{copyLabel}<Icon name="arrow" size={15} /></span>
-          <span className="result-card-desc">Paste directly onto your Figma canvas</span>
+          <span className="result-card-title">{copyLabel}</span>
+          <span className="result-card-desc">Paste onto your Figma canvas</span>
         </span>
+        <span className="result-card-arrow" aria-hidden="true"><Icon name="arrow" size={16} /></span>
       </button>
       <p className={props.copyStatus === "error" ? "result-storage error" : "result-storage"} aria-live="polite">
         {props.copyStatus === "error" ? "Clipboard access failed. Your local result is still ready." : "Stored locally for up to 24 hours."}
diff --git a/src/extension/popup/styles.css b/src/extension/popup/styles.css
index f388502..507082e 100644
--- a/src/extension/popup/styles.css
+++ b/src/extension/popup/styles.css
@@ -712,29 +712,35 @@ button:disabled {
 
 .result-copy-card {
   position: relative;
-  display: flex;
+  display: grid;
   width: 100%;
-  min-height: 204px;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 20px;
-  border-radius: 28px;
-  border: 1px solid rgba(79, 70, 229, 0.1);
-  background: var(--surface);
+  min-height: 88px;
+  grid-template-columns: 44px minmax(0, 1fr) 32px;
+  align-items: center;
+  gap: 14px;
+  padding: 16px 16px 16px 18px;
+  overflow: hidden;
+  border-radius: 22px;
+  border: 1px solid rgba(79, 70, 229, 0.14);
+  background: linear-gradient(135deg, #fff 0%, #fff 62%, #f7f7ff 100%);
   color: var(--text);
   text-align: left;
-  box-shadow: 0 2px 8px rgba(24, 24, 27, 0.08);
-  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
+  box-shadow: 0 4px 14px rgba(24, 24, 27, 0.08);
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
 }
 
 .result-copy-card:hover:not(:disabled) {
-  background: var(--surface);
-  box-shadow: 0 8px 18px rgba(24, 24, 27, 0.11);
+  border-color: rgba(79, 70, 229, 0.3);
+  background: linear-gradient(135deg, #fff 0%, #fff 52%, #eef2ff 100%);
+  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.14);
   transform: translateY(-2px);
 }
 
+.result-copy-card:hover:not(:disabled) .result-card-arrow {
+  background: var(--accent-hover);
+  transform: translateX(2px);
+}
+
 .result-copy-card:disabled {
   opacity: 0.76;
 }
@@ -747,39 +753,56 @@ button:disabled {
 
 .result-card-icon {
   display: flex;
-  width: 38px;
-  height: 38px;
+  width: 44px;
+  height: 44px;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
+  border-radius: 14px;
   background: var(--accent-soft);
   color: var(--accent);
+  transition: background 0.15s, color 0.15s;
 }
 
 .result-card-body {
   display: flex;
+  min-width: 0;
   flex-direction: column;
-  gap: 5px;
+  gap: 4px;
 }
 
 .result-card-title {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 900;
-  line-height: 1.08;
-}
-
-.result-card-title svg {
-  color: var(--accent);
+  letter-spacing: -0.02em;
+  line-height: 1.15;
 }
 
 .result-card-desc {
   color: var(--text-muted);
   font-size: 10.5px;
   font-weight: 500;
-  line-height: 1.25;
+  line-height: 1.3;
+}
+
+.result-card-arrow {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  transition: background 0.15s, transform 0.15s;
+}
+
+.result-copy-card[data-status="copied"] .result-card-icon {
+  background: #d1fae5;
+  color: #047857;
+}
+
+.result-copy-card[data-status="copied"] .result-card-arrow {
+  background: #059669;
 }
 
 .result-storage {
diff --git a/tests/popup-view.test.tsx b/tests/popup-view.test.tsx
index ed68548..c33764a 100644
--- a/tests/popup-view.test.tsx
+++ b/tests/popup-view.test.tsx
@@ -83,7 +83,11 @@ describe("PopupView", () => {
     expect(css).toMatch(/\.mode-row\s*\{[^}]*gap:\s*10px;[^}]*height:\s*120px;/su);
     expect(css).toMatch(/\.mode-primary\s*\{[^}]*flex:\s*4;/su);
     expect(css).toMatch(/\.mode-secondary\s*\{[^}]*flex:\s*3;/su);
-    expect(css).toMatch(/\.result-copy-card\s*\{[^}]*min-height:\s*204px;[^}]*background:\s*var\(--surface\);/su);
+    expect(css).toMatch(
+      /\.result-copy-card\s*\{[^}]*min-height:\s*88px;[^}]*grid-template-columns:\s*44px minmax\(0, 1fr\) 32px;[^}]*border-radius:\s*22px;/su,
+    );
+    expect(css).toMatch(/\.result-card-arrow\s*\{[^}]*width:\s*32px;[^}]*height:\s*32px;/su);
+    expect(css).not.toContain("min-height: 204px");
     expect(css).not.toContain(".mode-viewport");
     expect(css).not.toMatch(/--paper|--signal|Iowan Old Style|Palatino/u);
   });
@@ -106,6 +110,7 @@ describe("PopupView", () => {
     expect(markup).toContain("Stored locally for up to 24 hours");
     expect(markup).toMatch(/class="[^"]*\bresult-view\b[^"]*"/u);
     expect(markup).toContain('class="result-copy-card"');
+    expect(markup).toContain('class="result-card-arrow"');
     expect(markup).not.toMatch(/upload|account|plugin/iu);
   });
 });