mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-05 06:50:28 +03:00
Add arrow to message bubbles and improve spacing (#2474)
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
* Add arrow to message bubbles and improve spacing * make bubble message avatar smaller * add bubble layout for event content * adjust bubble arrow * fix missing return statement for event content * hide bubble for event content * add new arrow to bubble message * fix avatar username relative alignment * fix types * fix code block header background * revert avatar size and make arrow less sharp * show event messages timestamp to right when bubble is hidden * fix avatar base css * move message header outside bubble * fix event time appears on left in hidden bubles
This commit is contained in:
parent
31efbf73b7
commit
afc251aa7c
6 changed files with 111 additions and 27 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { Box, Icon, IconSrc } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { CompactLayout, ModernLayout } from '..';
|
||||
import { BubbleLayout, CompactLayout, ModernLayout } from '..';
|
||||
import { MessageLayout } from '../../../state/settings';
|
||||
|
||||
export type EventContentProps = {
|
||||
|
|
@ -30,9 +30,15 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
|
|||
</Box>
|
||||
);
|
||||
|
||||
return messageLayout === MessageLayout.Compact ? (
|
||||
<CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>
|
||||
) : (
|
||||
<ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>
|
||||
);
|
||||
if (messageLayout === MessageLayout.Compact) {
|
||||
return <CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>;
|
||||
}
|
||||
if (messageLayout === MessageLayout.Bubble) {
|
||||
return (
|
||||
<BubbleLayout hideBubble before={beforeJSX}>
|
||||
{msgContentJSX}
|
||||
</BubbleLayout>
|
||||
);
|
||||
}
|
||||
return <ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue