padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance styling and layout of action buttons in ThreadedPost component

Browse source 
- 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.
This commit is contained in:
padreug 2025-09-20 12:14:54 +02:00
parent c7ce34b301
commit 26ba27c87a
1 changed files with 7 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/modules/nostr-feed/components/ThreadedPost.vue
View file

@ -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>