From 828f1923a0770fa8e63f776f5d4d475e658d3a17 Mon Sep 17 00:00:00 2001
From: tomobre <tomobre@gmail.com>
Date: Thu, 2 Feb 2023 11:16:22 +1100
Subject: [PATCH] fix: avatar at bottom, reacts with margin

---
 stylesheets/_session_theme.scss                               | 2 +-
 .../message/message-content/MessageContentWithStatus.tsx      | 4 ++--
 .../conversation/message/message-content/MessageReactions.tsx | 3 +++
 .../message/message-item/GenericReadableMessage.tsx           | 3 +--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index e92583af2..d71bd26e7 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -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) {
diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
index aa4bbcef5..779cb5e5a 100644
--- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
+++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
@@ -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
diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index 9f7cf3299..ca574800d 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactions.tsx
@@ -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;`};
diff --git a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
index 1f49a35ae..e3d521496 100644
--- a/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/GenericReadableMessage.tsx
@@ -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}