mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 06:50:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

make bubble message avatar smaller

Browse source
This commit is contained in:
Ajay Bura 2025-09-14 15:07:53 +05:30
parent 01d57deea1
commit 3a14ad764e
3 changed files with 20 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/components/message/layout/Bubble.tsx
View file

@ -17,14 +17,9 @@ export const BubbleLayout = as<'div', BubbleLayoutProps>(
<Box <Box
className={classNames( className={classNames(
css.BubbleContent, css.BubbleContent,
css.BubbleContentArrow, before ? css.BubbleContentArrow : undefined,
self before && self ? css.BubbleContentArrowRight : undefined,
? { before && !self ? css.BubbleContentArrowLeft : undefined
[css.BubbleContentArrowRight]: !!before,
}
: {
[css.BubbleContentArrowLeft]: !!before,
}
)} )}
direction="Column" direction="Column"
> >

15
src/app/components/message/layout/layout.css.ts
View file

@ -133,7 +133,12 @@ export const ModernBefore = style({
minWidth: toRem(36), minWidth: toRem(36),
}); });
export const BubbleBefore = style([ModernBefore]); export const BubbleBefore = style([
ModernBefore,
{
minWidth: toRem(22),
},
]);
export const BubbleContent = style({ export const BubbleContent = style({
maxWidth: toRem(800), maxWidth: toRem(800),
@ -153,6 +158,8 @@ export const BubbleContentArrow = style({
width: toRem(8), width: toRem(8),
height: toRem(8), height: toRem(8),
position: 'absolute', position: 'absolute',
top: toRem(12),
zIndex: 1,
transform: 'rotateZ(45deg)', transform: 'rotateZ(45deg)',
}, },
}, },
@ -162,9 +169,6 @@ export const BubbleContentArrowLeft = style({
selectors: { selectors: {
'&::before': { '&::before': {
left: toRem(-4), left: toRem(-4),
top: config.radii.R500,
zIndex: 1,
borderBottomLeftRadius: toRem(2),
}, },
}, },
}); });
@ -173,9 +177,6 @@ export const BubbleContentArrowRight = style({
selectors: { selectors: {
'&::before': { '&::before': {
right: toRem(-4), right: toRem(-4),
top: config.radii.R500,
zIndex: 1,
borderTopRightRadius: toRem(2),
}, },
}, },
}); });

12
src/app/features/room/message/Message.tsx
View file

@ -747,7 +747,7 @@ export const Message = as<'div', MessageProps>(
<Box <Box
gap="300" gap="300"
direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'} direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'}
justifyContent={messageLayout === MessageLayout.Bubble ? undefined : 'SpaceBetween'} justifyContent="SpaceBetween"
alignItems="Baseline" alignItems="Baseline"
grow="Yes" grow="Yes"
> >
@ -795,7 +795,7 @@ export const Message = as<'div', MessageProps>(
<Avatar <Avatar
className={css.MessageAvatar} className={css.MessageAvatar}
as="button" as="button"
size="300" size={messageLayout === MessageLayout.Bubble ? '200' : '300'}
data-user-id={senderId} data-user-id={senderId}
onClick={onUserClick} onClick={onUserClick}
> >
@ -807,7 +807,13 @@ export const Message = as<'div', MessageProps>(
: undefined : undefined
} }
alt={senderDisplayName} alt={senderDisplayName}
renderFallback={() => <Icon size="200" src={Icons.User} filled />} renderFallback={() => (
<Icon
size={messageLayout === MessageLayout.Bubble ? '50' : '200'}
src={Icons.User}
filled
/>
)}
/> />
</Avatar> </Avatar>
</AvatarBase> </AvatarBase>