rick/rosterchirp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated auto-generated avatars to have transaparent backgrounds

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-28 15:29:52 -04:00
parent 5c5f2b4050
commit a6ac21aed0
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ChatWindow.jsx
View File

@@ -39,13 +39,15 @@ function GroupAvatarCompositeSm({ memberPreviews }) {
const positions = COMPOSITE_LAYOUTS_SM[members.length]; const positions = COMPOSITE_LAYOUTS_SM[members.length];
if (!positions) return null; if (!positions) return null;
return ( return (
<div className="group-icon-sm" style={{ background: '#1a1a2e', position: 'relative', padding: 0, overflow: 'hidden' }}> <div className="group-icon-sm" style={{ background: 'transparent', position: 'relative', padding: 0, overflow: 'visible' }}>
{members.map((m, i) => { {members.map((m, i) => {
const pos = positions[i]; const pos = positions[i];
const base = { const base = {
position: 'absolute', position: 'absolute',
width: pos.size, height: pos.size, width: pos.size, height: pos.size,
borderRadius: '50%', borderRadius: '50%',
boxSizing: 'border-box',
border: '2px solid var(--surface)',
...(pos.top !== undefined ? { top: pos.top } : {}), ...(pos.top !== undefined ? { top: pos.top } : {}),
...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}), ...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}),
...(pos.left !== undefined ? { left: pos.left } : {}), ...(pos.left !== undefined ? { left: pos.left } : {}),

4
frontend/src/components/Sidebar.jsx
View File

@@ -47,7 +47,7 @@ function GroupAvatarComposite({ memberPreviews }) {
} }
return ( return (
<div className="group-icon" style={{ background: '#1a1a2e', position: 'relative', padding: 0, overflow: 'hidden' }}> <div className="group-icon" style={{ background: 'transparent', position: 'relative', padding: 0, overflow: 'visible' }}>
{members.map((m, i) => { {members.map((m, i) => {
const pos = positions[i]; const pos = positions[i];
const base = { const base = {
@@ -55,6 +55,8 @@ function GroupAvatarComposite({ memberPreviews }) {
width: pos.size, width: pos.size,
height: pos.size, height: pos.size,
borderRadius: '50%', borderRadius: '50%',
boxSizing: 'border-box',
border: '2px solid var(--surface)',
...(pos.top !== undefined ? { top: pos.top } : {}), ...(pos.top !== undefined ? { top: pos.top } : {}),
...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}), ...(pos.bottom !== undefined ? { bottom: pos.bottom } : {}),
...(pos.left !== undefined ? { left: pos.left } : {}), ...(pos.left !== undefined ? { left: pos.left } : {}),