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>
packages/web/src/styles/globals.css
+26
View File
@@ -152,6 +152,27 @@
0 8px 24px rgba(0, 0, 0, 0.12),
inset 0 1px 0 var(--glass-highlight);
}
/* Reaction pill glass — lighter blur for small inline elements */
.glass-pill {
backdrop-filter: blur(12px) saturate(110%);
-webkit-backdrop-filter: blur(12px) saturate(110%);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.glass-pill:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.14);
}
.glass-pill-mine {
background: rgba(134, 239, 172, 0.10);
border-color: rgba(134, 239, 172, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(134, 239, 172, 0.06);
}
.glass-pill-mine:hover {
background: rgba(134, 239, 172, 0.16);
}
}
/* Accessibility: fall back to solid surfaces when transparency is reduced */
@@ -172,6 +193,11 @@
-webkit-backdrop-filter: none;
background: var(--bg-elevated);
}
.glass-pill {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--bg-elevated);
}
}
@layer utilities {