fix: avatar at bottom, reacts with margin

oxen-io · Nov 21, 2022 · 7f08d1a · 7f08d1a
1 parent f2e8fbd
commit 7f08d1a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git 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
@@ -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,14 +118,14 @@ export const MessageContentWithStatuses = (props: Props) => {
         onDoubleClickCapture={onDoubleClickReplyToMessage}
         data-testid={dataTestId}
       >
+        <MessageAvatar messageId={messageId} />
         <MessageStatus
           dataTestId="msg-status-incoming"
           messageId={messageId}
           isCorrectSide={isIncoming}
         />
         <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
@@ -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
@@ -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}