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 <Button
variant="ghost" variant="ghost"
size="sm" 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" @click="onReplyToNote"
> >
<Reply class="h-3 w-3 mr-1" /> <Reply class="h-3 w-3" />
Reply
</Button> </Button>
<!-- Like Button --> <!-- Like Button -->
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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 }" :class="{ 'text-red-500 hover:text-red-600': getEventReactions(post.id).userHasLiked }"
@click="onToggleLike" @click="onToggleLike"
> >
<Heart <Heart
class="h-3 w-3 mr-1" class="h-3 w-3"
:class="{ 'fill-current': getEventReactions(post.id).userHasLiked }" :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 }} {{ getEventReactions(post.id).likes }}
</span> </span>
<span v-else>Like</span>
</Button> </Button>
<!-- Share Button --> <!-- Share Button -->
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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 class="h-3 w-3" />
Share
</Button> </Button>
</div> </div>
</div> </div>