Unify display of dotcom and Fediverse reactions on posts

[pfefferle]

Summary

Feedback from @ianstewart suggests improving the visual consistency of how WordPress.com likes/reactions and Fediverse reactions are displayed on posts.

Requested improvements

• Use the same avatar size across WordPress.com likes/reactions and Fediverse reactions.
• Apply the same font treatment for labels such as likes, reports, quotes.
• Use a consistent border treatment for avatars and reaction elements.
• Group WordPress.com likes and reactions together when both are present.
• Use consistent grouping labels such as “Share this:” and “FEDIVERSE REACTIONS”.

These changes are intended to make reactions feel less “bolted on”, improve aesthetics, and potentially encourage more adoption.

Screenshot

[pfefferle]

@jeherve should we have that as a general change or as a custom design for DotCom?

[jeherve]

Probably a mix:

Use the same avatar size across WordPress.com likes/reactions and Fediverse reactions.
Apply the same font treatment for labels such as likes, reports, quotes.
Use a consistent border treatment for avatars and reaction elements.

This feels like a change we could make to the Reactions for all site owners. We've already updated the design in previous PRs like #1718, I think it would be okay to update some of the details once again.

Group WordPress.com likes and reactions together when both are present.

That feels like a big project given how likes are displayed today, so probably not something we'll tackle right away. I'd recommend creating a new Linear project about this, and we can prioritize it later.

Use consistent grouping labels such as “Share this:” and “FEDIVERSE REACTIONS”.

That part is already handled when you use the Like block and sharing block instead of the legacy options. I updated activity.blog to do just that, and I think it looks a bit better already: