fix: avatar at bottom, reacts with margin
This commit is contained in:
parent
e499b22d94
commit
828f1923a0
|
@ -25,7 +25,7 @@
|
|||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
max-width: 95%;
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
|
|
@ -11,7 +11,7 @@ import {
|
|||
isMessageSelectionMode,
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { Reactions } from '../../../../util/reactions';
|
||||
|
||||
import { MessageAvatar } from '../message-content/MessageAvatar';
|
||||
import { MessageAuthorText } from './MessageAuthorText';
|
||||
import { MessageContent } from './MessageContent';
|
||||
import { MessageContextMenu } from './MessageContextMenu';
|
||||
|
@ -118,6 +118,7 @@ export const MessageContentWithStatuses = (props: Props) => {
|
|||
onDoubleClickCapture={onDoubleClickReplyToMessage}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
<MessageAvatar messageId={messageId} />
|
||||
<MessageStatus
|
||||
dataTestId="msg-status-incoming"
|
||||
messageId={messageId}
|
||||
|
@ -125,7 +126,6 @@ export const MessageContentWithStatuses = (props: Props) => {
|
|||
/>
|
||||
<StyledMessageWithAuthor isIncoming={isIncoming}>
|
||||
<MessageAuthorText messageId={messageId} />
|
||||
|
||||
<MessageContent messageId={messageId} isDetailView={isDetailView} />
|
||||
</StyledMessageWithAuthor>
|
||||
<MessageStatus
|
||||
|
|
|
@ -16,6 +16,9 @@ export const popupXDefault = -81;
|
|||
export const popupYDefault = -90;
|
||||
|
||||
const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number }>`
|
||||
div:first-child {
|
||||
margin-left: 1.7rem;
|
||||
}
|
||||
${StyledPopupContainer} {
|
||||
position: absolute;
|
||||
top: ${props => `${props.y}px;`};
|
||||
|
|
|
@ -16,7 +16,7 @@ import {
|
|||
} from '../../../../state/selectors/conversations';
|
||||
import { getIncrement } from '../../../../util/timer';
|
||||
import { ExpireTimer } from '../../ExpireTimer';
|
||||
import { MessageAvatar } from '../message-content/MessageAvatar';
|
||||
|
||||
import { MessageContentWithStatuses } from '../message-content/MessageContentWithStatus';
|
||||
import { ReadableMessage } from './ReadableMessage';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
@ -238,7 +238,6 @@ export const GenericReadableMessage = (props: Props) => {
|
|||
isUnread={!!isUnread}
|
||||
key={`readable-message-${messageId}`}
|
||||
>
|
||||
<MessageAvatar messageId={messageId} />
|
||||
{expirationLength && expirationTimestamp && (
|
||||
<ExpireTimer
|
||||
isCorrectSide={!isIncoming}
|
||||
|
|
Loading…
Reference in New Issue