[covaci-edvin]

Change summary

Aligns BccReact with the React component in BCC Prime Components 2.0, for both the empty and the populated state.

• Add-reaction icon: 20px → 24px
• Row height: 32px in both states (was 40px populated, 24px empty)
• Placeholder text ("Be the first to react"): heading-xs (12px) → heading-sm (14px / 16px)
• Reaction pills: removed the extra vertical margin, so they sit centered in the 32px row
• Pill shadow: drop-shadow → shadow-raised (the shadow/raised effect from Figma)
• Pills get a thin border (border-default) in dark mode, where the shadow is hard to see
• Count line-height: 14px → 16px
• The reaction selector popup keeps its 4px gap below the shorter row

Unchanged: emoji size (already 20px), gaps (6px empty, 8px icon → pills, 6px between pills) and the selector popup and dropdown.

Screenshots

Before

After

Change type

• No review
• Small PR
• Big PR
• Refactor

🤖 Generated with Claude Code

[u12206050]

On dark mode could we have a subtle border on the buttons since the shadow isn't visible and from your screenshot the buttons merge in with the background.

[covaci-edvin]

On dark mode could we have a subtle border on the buttons since the shadow isn't visible and from your screenshot the buttons merge in with the background.

@u12206050 added and updated screenshot

[u12206050]

LGTM