From 50183099a8a07170c702a580cccf8fdeb8d81916 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 20 Jan 2026 16:08:54 +0000
Subject: [PATCH] style: unify progress indicator styles

- Update user menu and welcome page progress indicators to match
  goal renderer style: bar on top, progress/total below with percentage
- Remove "sats" suffix from progress displays
- Make goal zap button primary variant and full-width
---
 src/components/GrimoireWelcome.tsx            | 19 ++++++++++++-------
 .../nostr/kinds/GoalDetailRenderer.tsx        |  4 ++--
 src/components/nostr/kinds/GoalRenderer.tsx   |  4 ++--
 src/components/nostr/user-menu.tsx            | 17 +++++++++++------
 4 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/GrimoireWelcome.tsx b/src/components/GrimoireWelcome.tsx
index 6791e47..c9cf291 100644
--- a/src/components/GrimoireWelcome.tsx
+++ b/src/components/GrimoireWelcome.tsx
@@ -136,15 +136,20 @@ export function GrimoireWelcome({
                 {description}
               </div>
               {showProgress && (
-                <div className="mt-2 space-y-1">
-                  <div className="flex items-center justify-between text-[10px] text-muted-foreground">
-                    <span>Monthly goal</span>
-                    <span>
-                      {formatSats(monthlyDonations)} /{" "}
-                      {formatSats(MONTHLY_GOAL_SATS)} sats
+                <div className="mt-2 flex flex-col gap-1">
+                  <Progress value={goalProgress} className="h-1" />
+                  <div className="flex items-center justify-between text-[10px]">
+                    <span className="text-muted-foreground">
+                      <span className="text-foreground font-medium">
+                        {formatSats(monthlyDonations)}
+                      </span>
+                      {" / "}
+                      {formatSats(MONTHLY_GOAL_SATS)}
+                    </span>
+                    <span className="text-muted-foreground">
+                      {goalProgress.toFixed(0)}%
                     </span>
                   </div>
-                  <Progress value={goalProgress} className="h-1" />
                 </div>
               )}
             </button>
diff --git a/src/components/nostr/kinds/GoalDetailRenderer.tsx b/src/components/nostr/kinds/GoalDetailRenderer.tsx
index eb65152..10b86a0 100644
--- a/src/components/nostr/kinds/GoalDetailRenderer.tsx
+++ b/src/components/nostr/kinds/GoalDetailRenderer.tsx
@@ -164,8 +164,8 @@ export function GoalDetailRenderer({ event }: { event: NostrEvent }) {
 
       {/* Zap Button */}
       {!closed && (
-        <Button variant="outline" onClick={handleZap} className="w-fit">
-          <Zap className="size-4 text-zap" />
+        <Button onClick={handleZap} className="w-full">
+          <Zap className="size-4" />
           Zap this Goal
         </Button>
       )}
diff --git a/src/components/nostr/kinds/GoalRenderer.tsx b/src/components/nostr/kinds/GoalRenderer.tsx
index b9f69fb..0020475 100644
--- a/src/components/nostr/kinds/GoalRenderer.tsx
+++ b/src/components/nostr/kinds/GoalRenderer.tsx
@@ -142,8 +142,8 @@ export function GoalRenderer({ event }: BaseEventProps) {
 
         {/* Zap Button */}
         {!closed && (
-          <Button variant="outline" size="sm" onClick={handleZap}>
-            <Zap className="size-4 text-zap" />
+          <Button onClick={handleZap} className="w-full">
+            <Zap className="size-4" />
             Zap this Goal
           </Button>
         )}
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index 7bd0fec..27c12cb 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -434,14 +434,19 @@ export default function UserMenu() {
                 <Zap className="size-4 text-yellow-500" />
                 <span className="text-sm font-medium">Support Grimoire</span>
               </div>
-              <div className="flex items-center justify-between text-xs mb-1">
-                <span className="text-muted-foreground">Monthly goal</span>
-                <span className="font-medium">
-                  {formatSats(monthlyDonations)} /{" "}
-                  {formatSats(MONTHLY_GOAL_SATS)} sats
+              <Progress value={goalProgress} className="h-1.5 mb-1" />
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">
+                  <span className="text-foreground font-medium">
+                    {formatSats(monthlyDonations)}
+                  </span>
+                  {" / "}
+                  {formatSats(MONTHLY_GOAL_SATS)}
+                </span>
+                <span className="text-muted-foreground">
+                  {goalProgress.toFixed(0)}%
                 </span>
               </div>
-              <Progress value={goalProgress} className="h-1.5" />
             </div>
           </DropdownMenuGroup>