Merge pull request #2452 from Bilb/make-all-message-bubbles-rounded

fix: disable having some corner large and small for message bubbles

ts/components/conversation/Image.tsx

@@ -88,6 +88,8 @@ export const Image = (props: Props) => {
       style={{
         maxHeight: `${height}px`,
         maxWidth: `${width}px`,
+        minHeight: `${height}px`,
+        minWidth: `${width}px`,
       }}
       data-attachmentindex={attachmentIndex}
     >
@@ -116,6 +118,8 @@ export const Image = (props: Props) => {
           style={{
             maxHeight: `${height}px`,
             maxWidth: `${width}px`,
+            minHeight: `${height}px`,
+            minWidth: `${width}px`,
             width: forceSquare ? `${width}px` : '',
             height: forceSquare ? `${height}px` : '',
           }}

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { SessionIcon, SessionIconButton } from '../icon';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,6 +8,8 @@ import { getAlt, isAudio } from '../../types/Attachment';
 import { AUDIO_MP3 } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
 import { Image } from '../../../ts/components/conversation/Image';
+// tslint:disable-next-line: no-submodule-imports
+import useKey from 'react-use/lib/useKey';
 
 const QuotedMessageComposition = styled.div`
   width: 100%;
@@ -58,9 +60,11 @@ export const SessionQuotedMessageComposition = () => {
   const hasAudioAttachment =
     hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
 
-  const removeQuotedMessage = useCallback(() => {
+  const removeQuotedMessage = () => {
     dispatch(quoteMessage(undefined));
-  }, []);
+  };
+
+  useKey('Escape', removeQuotedMessage, undefined, []);
 
   if (!quotedMessageProps?.id) {
     return null;

ts/components/conversation/message/message-content/MessageContent.tsx

@@ -32,15 +32,7 @@ import styled from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
-  | 'text'
-  | 'direction'
-  | 'timestamp'
-  | 'serverTimestamp'
-  | 'firstMessageOfSeries'
-  | 'lastMessageOfSeries'
-  | 'previews'
-  | 'quote'
-  | 'attachments'
+  'text' | 'direction' | 'timestamp' | 'serverTimestamp' | 'previews' | 'quote' | 'attachments'
 >;
 
 type Props = {
@@ -96,22 +88,8 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
-const radiusLg = '18px';
-const radiusSm = '4px';
-
-const StyledMessageContent = styled.div<{
-  isOutgoing: boolean;
-  firstOfSeries: boolean;
-  lastOfSeries: boolean;
-}>`
-  border-top-right-radius: ${props =>
-    props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-  border-bottom-right-radius: ${props =>
-    props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-  border-top-left-radius: ${props =>
-    !props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-  border-bottom-left-radius: ${props =>
-    !props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
+const StyledMessageContent = styled.div`
+  border-radius: 18px;
 `;
 
 export const IsMessageVisibleContext = createContext(false);
@@ -178,8 +156,6 @@ export const MessageContent = (props: Props) => {
     text,
     timestamp,
     serverTimestamp,
-    firstMessageOfSeries,
-    lastMessageOfSeries,
     previews,
     quote,
     attachments,
@@ -216,9 +192,6 @@ export const MessageContent = (props: Props) => {
       style={{
         width: isShowingImage ? width : undefined,
       }}
-      firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)}
-      lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)}
-      isOutgoing={direction === 'outgoing'}
       role="button"
       onClick={onClickOnMessageInnerContainer}
       title={toolTipTitle}
@@ -246,7 +219,7 @@ export const MessageContent = (props: Props) => {
               {!isDeleted && (
                 <MessagePreview messageId={props.messageId} handleImageError={handleImageError} />
               )}
-              <Flex padding="7px" container={true} flexDirection="column">
+              <Flex padding="7px 13px" container={true} flexDirection="column">
                 <MessageText messageId={props.messageId} />
               </Flex>
             </>

ts/state/selectors/conversations.ts

@@ -1089,8 +1089,6 @@ export const getMessageContentSelectorProps = createSelector(getMessagePropsByMe
   }
 
   const msgProps: MessageContentSelectorProps = {
-    firstMessageOfSeries: props.firstMessageOfSeries,
-    lastMessageOfSeries: props.lastMessageOfSeries,
     ...pick(props.propsForMessage, [
       'direction',
       'serverTimestamp',