fix: rounded corners around messages

looks like node-sass tries to be too clever

stylesheets/_session.scss

@@ -352,14 +352,6 @@ label {
   border-bottom-right-radius: 5px;
 }
 
-.module-message__container--outgoing--first-of-series {
-  border-top-right-radius: $session_message-container-border-radius;
-}
-
-.module-message__container--outgoing--last-of-series {
-  border-bottom-right-radius: $session_message-container-border-radius;
-}
-
 .conversation-header {
   .module-avatar img {
     box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);

stylesheets/_session_theme.scss

@@ -40,19 +40,6 @@
       background: none;
     }
 
-    border-top-right-radius: $message-container-border-radius;
-    border-bottom-right-radius: $message-container-border-radius;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-
-    &--first-of-series {
-      border-top-left-radius: $message-container-border-radius;
-    }
-
-    &--last-of-series {
-      border-bottom-left-radius: $message-container-border-radius;
-    }
-
     .module-message__text {
       color: var(--color-received-message-text);
       display: flex;
@@ -71,11 +58,6 @@
   }
 
   &__container--outgoing {
-    border-top-left-radius: $message-container-border-radius;
-    border-bottom-left-radius: $message-container-border-radius;
-
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
     &--opaque {
       background: var(--color-sent-message-background);
     }
@@ -84,14 +66,6 @@
       background: none;
     }
 
-    &--first-of-series {
-      border-top-right-radius: $message-container-border-radius;
-    }
-
-    &--last-of-series {
-      border-bottom-right-radius: $message-container-border-radius;
-    }
-
     .module-message__text {
       color: var(--color-sent-message-text);
 

stylesheets/_variables.scss

@@ -74,7 +74,6 @@ $header-height: 55px;
 $button-height: 24px;
 
 $border-radius: 5px;
-$message-container-border-radius: 16px;
 
 $font-size: 14px;
 $font-size-small: calc(13 / 14) + em;

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

@@ -28,6 +28,7 @@ import { MessagePreview } from './MessagePreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
+import styled, { CSSProperties } from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -95,6 +96,37 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
+const StyledMessageContent = styled.div<{
+  isOutgoing: boolean;
+  firstOfSeries: boolean;
+  lastOfSeries: boolean;
+}>`
+  border-top-right-radius: ${props =>
+    props.isOutgoing
+      ? props.firstOfSeries
+        ? 'var(--radius-lg)'
+        : 'var(--radius-sm)'
+      : 'var(--radius-lg)'};
+  border-bottom-right-radius: ${props =>
+    props.isOutgoing
+      ? props.lastOfSeries
+        ? 'var(--radius-lg)'
+        : 'var(--radius-sm)'
+      : 'var(--radius-lg)'};
+  border-top-left-radius: ${props =>
+    !props.isOutgoing
+      ? props.firstOfSeries
+        ? 'var(--radius-lg)'
+        : 'var(--radius-sm)'
+      : 'var(--radius-lg)'};
+  border-bottom-left-radius: ${props =>
+    !props.isOutgoing
+      ? props.lastOfSeries
+        ? 'var(--radius-lg)'
+        : 'var(--radius-sm)'
+      : 'var(--radius-lg)'};
+`;
+
 export const IsMessageVisibleContext = createContext(false);
 
 export const MessageContent = (props: Props) => {
@@ -181,26 +213,29 @@ export const MessageContent = (props: Props) => {
 
   const bgShouldBeTransparent = isShowingImage && !hasText && !hasQuote;
   const toolTipTitle = moment(serverTimestamp || timestamp).format('llll');
+  // tslint:disable: use-simple-attributes
 
   return (
-    <div
+    <StyledMessageContent
       className={classNames(
         'module-message__container',
         `module-message__container--${direction}`,
         bgShouldBeTransparent
           ? `module-message__container--${direction}--transparent`
           : `module-message__container--${direction}--opaque`,
-        firstMessageOfSeries || props.isDetailView
-          ? `module-message__container--${direction}--first-of-series`
-          : '',
-        lastMessageOfSeries || props.isDetailView
-          ? `module-message__container--${direction}--last-of-series`
-          : '',
+
         flashGreen && 'flash-green-once'
       )}
-      style={{
-        width: isShowingImage ? width : undefined,
-      }}
+      style={
+        {
+          width: isShowingImage ? width : undefined,
+          '--radius-lg': '18px',
+          '--radius-sm': '4px',
+        } as CSSProperties
+      }
+      firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)}
+      lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)}
+      isOutgoing={direction === 'outgoing'}
       role="button"
       onClick={onClickOnMessageInnerContainer}
       title={toolTipTitle}
@@ -235,7 +270,7 @@ export const MessageContent = (props: Props) => {
           ) : null}
         </IsMessageVisibleContext.Provider>
       </InView>
-    </div>
+    </StyledMessageContent>
   );
 };
 

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

@@ -44,6 +44,11 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' }
   }
 `;
 
+const StyledMessageContentWithAuthor = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const MessageContentWithStatuses = (props: Props) => {
   const contentProps = useSelector(state =>
     getMessageContentWithStatusesSelectorProps(state as any, props.messageId)
@@ -122,11 +127,11 @@ export const MessageContentWithStatuses = (props: Props) => {
           messageId={messageId}
           isCorrectSide={isIncoming}
         />
-        <div>
+        <StyledMessageContentWithAuthor>
           <MessageAuthorText messageId={messageId} />
 
           <MessageContent messageId={messageId} isDetailView={isDetailView} />
-        </div>
+        </StyledMessageContentWithAuthor>
         <MessageStatus
           dataTestId="msg-status-outgoing"
           messageId={messageId}

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -114,7 +114,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   align-items: center;
   width: 100%;
   letter-spacing: 0.03em;
-  padding: 5px var(--margins-lg) 0;
+  padding: var(--margins-xs) var(--margins-lg) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;