From 26ba27c87aa8f7d8e340b3c939f43f9a5b32ccac Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sat, 20 Sep 2025 12:14:54 +0200
Subject: [PATCH] Enhance styling and layout of action buttons in ThreadedPost
 component

- Updated button sizes and padding for Reply, Like, and Share actions to improve visual consistency and usability.
- Adjusted hover effects and removed unnecessary text for a cleaner interface.

These changes contribute to a more streamlined and user-friendly experience within the NostrFeed module.
---
 .../nostr-feed/components/ThreadedPost.vue      | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/modules/nostr-feed/components/ThreadedPost.vue b/src/modules/nostr-feed/components/ThreadedPost.vue
index a998ee9..0756816 100644
--- a/src/modules/nostr-feed/components/ThreadedPost.vue
+++ b/src/modules/nostr-feed/components/ThreadedPost.vue
@@ -195,39 +195,36 @@ function getRideshareType(post: FeedPost): string {
             <Button
               variant="ghost"
               size="sm"
-              class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/50"
               @click="onReplyToNote"
             >
-              <Reply class="h-3 w-3 mr-1" />
-              Reply
+              <Reply class="h-3 w-3" />
             </Button>
 
             <!-- Like Button -->
             <Button
               variant="ghost"
               size="sm"
-              class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              class="h-6 px-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
               :class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }"
               @click="onToggleLike"
             >
               <Heart
-                class="h-3 w-3 mr-1"
+                class="h-3 w-3"
                 :class="{ 'fill-current': getEventReactions(post.id).userHasLiked }"
               />
-              <span v-if="getEventReactions(post.id).likes > 0">
+              <span v-if="getEventReactions(post.id).likes > 0" class="ml-1">
                 {{ getEventReactions(post.id).likes }}
               </span>
-              <span v-else>Like</span>
             </Button>
 
             <!-- Share Button -->
             <Button
               variant="ghost"
               size="sm"
-              class="h-6 px-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50"
+              class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground hover:bg-accent/50"
             >
-              <Share class="h-3 w-3 mr-1" />
-              Share
+              <Share class="h-3 w-3" />
             </Button>
           </div>
         </div>