diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue index 602a7e1a..b02aef00 100644 --- a/components/account/AccountFollowButton.vue +++ b/components/account/AccountFollowButton.vue @@ -31,6 +31,19 @@ useCommand({ icon: 'i-ri:star-line', onActivate: () => toggleFollow(), }) + +const buttonStyle = $computed(() => { + // Skeleton while loading, avoid primary color flash + if (!relationship) + return 'text-inverted' + + // If following, use a label style with a strong border for Mutuals + if (relationship.following) + return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}` + + // If not following, use a button style + return 'text-inverted bg-primary border-primary' +})