devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: reaction pill frosted glass + compact sizing to match prototype

Browse Source 
Replace inline JS hover handlers with .glass-pill CSS classes for proper
Aether Drift frosted glass depth (blur, inset highlight, box-shadow).
Constrain emoji size and use exact prototype padding (2px 8px) for compact pills.
This commit is contained in:
Jannis Braun
2026-03-02 15:55:42 +01:00
parent cdee450cf5
commit 9491edb3c9
2 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/Message.tsx
+6 -22
View File
@@ -248,29 +248,13 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
<button
key={emoji}
onClick={() => toggleReaction(emoji)}
className="flex items-center gap-1 px-2 py-0.5 rounded-md text-[13px] border transition-all duration-[120ms] ease-out cursor-pointer"
style={me ? {
background: 'rgba(134, 239, 172, 0.10)',
borderColor: 'rgba(134, 239, 172, 0.25)',
} : {
background: 'rgba(255, 255, 255, 0.04)',
borderColor: 'var(--border-soft)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = me
? 'rgba(134, 239, 172, 0.15)'
: 'rgba(255, 255, 255, 0.08)';
if (!me) e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = me
? 'rgba(134, 239, 172, 0.10)'
: 'rgba(255, 255, 255, 0.04)';
if (!me) e.currentTarget.style.borderColor = 'var(--border-soft)';
}}
className={`glass-pill flex items-center gap-1 rounded-[6px] cursor-pointer transition-all duration-[120ms] ease-out ${
me ? 'glass-pill-mine' : ''
}`}
style={{ padding: '2px 8px', fontSize: '13px', lineHeight: 1 }}
>
<span>{emoji}</span>
<span className={`text-xs font-semibold ${me ? 'text-accent-mint' : 'text-txt-secondary'}`}>{count}</span>
<span style={{ fontSize: '14px', lineHeight: 1 }}>{emoji}</span>
<span className={`font-semibold ${me ? 'text-accent-mint' : 'text-txt-secondary'}`} style={{ fontSize: '12px' }}>{count}</span>
</button>
))}
</div>