From 30e3cb87554a334f0376aa30b63498f75ea5a480 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 1 Sep 2022 11:45:43 +1000
Subject: [PATCH] feat: fix other types of messages now that there is no box
 around

---
 stylesheets/_conversation.scss                |  2 +-
 stylesheets/_modules.scss                     | 43 ++++------
 stylesheets/_quote.scss                       |  4 +-
 stylesheets/_session.scss                     | 13 +--
 stylesheets/_session_constants.scss           |  3 -
 stylesheets/_session_conversation.scss        |  4 +-
 stylesheets/_session_theme.scss               | 10 ++-
 ts/components/conversation/Image.tsx          | 23 +++--
 .../SessionQuotedMessageComposition.tsx       |  1 +
 .../message-content/ClickToTrustSender.tsx    |  4 +
 .../message-content/MessageAttachment.tsx     | 84 +++++++++----------
 .../message/message-content/MessageBody.tsx   |  9 +-
 .../message-content/MessageContent.tsx        |  7 ++
 .../MessageContentWithStatus.tsx              |  9 +-
 ts/state/ducks/SessionTheme.tsx               |  8 +-
 ts/state/selectors/conversations.ts           |  3 +-
 16 files changed, 114 insertions(+), 113 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 0e5f5753e..6d24c81e7 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -27,7 +27,7 @@
   margin: 4px 16px;
   padding: 4px;
 
-  border-radius: $border-radius-message-box;
+  border-radius: var(--border-radius-message-box);
 
   align-self: flex-start;
 
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index aed9529b2..89c28db7b 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -62,6 +62,17 @@
   flex-direction: row;
   align-items: center;
   padding: 10px;
+  border-radius: var(--border-radius-message-box);
+
+  .module-message__container--outgoing & {
+    color: var(--color-sent-message-text);
+    background: var(--color-sent-message-background);
+  }
+
+  .module-message__container--incoming & {
+    color: var(--color-received-message-text);
+    background: var(--color-received-message-background);
+  }
 }
 
 .module-message__generic-attachment__icon-container {
@@ -88,7 +99,7 @@
 }
 
 .module-message__generic-attachment__icon__extension {
-  font-size: 10px;
+  font-size: 9px;
   line-height: 13px;
   letter-spacing: 0.1px;
   text-transform: uppercase;
@@ -115,7 +126,6 @@
 }
 
 .module-message__generic-attachment__file-name {
-  color: $color-gray-90;
   font-size: 14px;
   line-height: 18px;
   font-weight: 300;
@@ -127,14 +137,6 @@
   text-overflow: ellipsis;
 }
 
-.module-message__generic-attachment__file-size,
-.module-message__generic-attachment__file-name--outgoing,
-.module-message__generic-attachment__file-size--incoming,
-.module-message__generic-attachment__file-size--outgoing,
-.module-message__generic-attachment__file-name--incoming {
-  color: var(--color-text);
-}
-
 .module-message__generic-attachment__file-size {
   font-size: 11px;
   line-height: 16px;
@@ -148,7 +150,7 @@
 }
 
 .module-message__link-preview__content {
-  padding: 8px;
+  padding: 0 0 5px 0;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -781,20 +783,7 @@
 }
 
 .module-image--soft-corners {
-  border-radius: $border-radius-message-box;
-}
-
-.module-image__border-overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  left: 0;
-  right: 0;
-}
-
-.module-image__border-overlay--dark {
-  background-color: $color-black-02;
+  border-radius: var(--border-radius-message-box);
 }
 
 .module-image__loading-placeholder {
@@ -858,8 +847,8 @@
   position: absolute;
   top: 5px;
   right: 5px;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   z-index: 2;
   background-image: url('../images/x-shadow-16.svg');
 }
diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss
index c25200f0c..f1da65e46 100644
--- a/stylesheets/_quote.scss
+++ b/stylesheets/_quote.scss
@@ -89,8 +89,8 @@
 
 .module-quote-container {
   margin-bottom: 5px;
-  margin-top: 10px;
-  padding-left: 10px;
+  margin-top: var(--margins-xs);
+  min-width: 300px; // just because even with the quoted content is small it doesn't look very good
 }
 
 .module-quote--no-click {
diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index aa85702c5..6ed6ab91f 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -323,29 +323,18 @@ textarea {
   margin-inline-start: auto;
 }
 
-pre {
-  backdrop-filter: brightness(0.8);
-  padding: $session-margin-xs;
-}
-
 .module-message__container {
   position: relative;
   display: inline-block;
   overflow: hidden;
   min-width: 30px;
   // To limit messages with things forcing them wider, like long attachment names
-  max-width: calc(100vw - 380px - 100px);
+  max-width: calc(100vw - 380px - 50px);
   align-items: center;
 }
 label {
   user-select: none;
 }
-.module-message__attachment-container {
-  // Entirely to ensure that images are centered if they aren't full width of bubble
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
 
 .conversation-header {
   .module-avatar img {
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index d733ec863..846d16421 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -239,6 +239,3 @@ $session-transition-duration: 0.25s;
 // //////////////////////////////////////////////
 
 $composition-container-height: 60px;
-
-$padding-message-content: 7px 13px; // FIXME to move to SessionTheme
-$border-radius-message-box: 16px; // FIXME to move to SessionTheme
diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
index adf22e3ce..bb212ea13 100644
--- a/stylesheets/_session_conversation.scss
+++ b/stylesheets/_session_conversation.scss
@@ -349,8 +349,8 @@ $rhap_font-family: inherit !default;
   background-color: transparent;
   box-shadow: none;
   background: var(--color-accent);
-  padding: $padding-message-content;
-  border-radius: $border-radius-message-box;
+  padding: var(--padding-message-content);
+  border-radius: var(--border-radius-message-box);
 
   svg {
     transition: fill $session-transition-duration;
diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss
index 855b7e2f5..3b5c77e9d 100644
--- a/stylesheets/_session_theme.scss
+++ b/stylesheets/_session_theme.scss
@@ -27,7 +27,11 @@
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  max-width: 65%;
+  max-width: 95%;
+
+  @media (min-width: 1200px) {
+    max-width: 65%;
+  }
 
   &__text-error {
     font-style: italic;
@@ -42,8 +46,8 @@
     word-break: break-word;
     white-space: pre-wrap;
 
-    padding: $padding-message-content;
-    border-radius: $border-radius-message-box;
+    padding: var(--padding-message-content);
+    border-radius: var(--border-radius-message-box);
 
     a {
       text-decoration: underline;
diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx
index b6fcb3776..5e6df5d3a 100644
--- a/ts/components/conversation/Image.tsx
+++ b/ts/components/conversation/Image.tsx
@@ -5,6 +5,7 @@ import { Spinner } from '../basic/Spinner';
 import { AttachmentType, AttachmentTypeWithPath } from '../../types/Attachment';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { useDisableDrag } from '../../hooks/useDisableDrag';
+import styled from 'styled-components';
 
 type Props = {
   alt: string;
@@ -20,7 +21,7 @@ type Props = {
 
   darkOverlay?: boolean;
   playIconOverlay?: boolean;
-  softCorners?: boolean;
+  softCorners: boolean;
   forceSquare?: boolean;
   attachmentIndex?: number;
 
@@ -29,6 +30,16 @@ type Props = {
   onError?: () => void;
 };
 
+const StyledOverlay = styled.div<Pick<Props, 'darkOverlay' | 'softCorners'>>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  background-color: ${props => (props.darkOverlay ? '#0008' : 'unset')};
+`;
+
 export const Image = (props: Props) => {
   // tslint:disable-next-line max-func-body-length cyclomatic-complexity
   const {
@@ -133,12 +144,10 @@ export const Image = (props: Props) => {
           onDragStart={disableDrag}
         />
       ) : null}
-      <div
-        className={classNames(
-          'module-image__border-overlay',
-          softCorners ? 'module-image--soft-corners' : null,
-          darkOverlay ? 'module-image__border-overlay--dark' : null
-        )}
+      <StyledOverlay
+        className={classNames(softCorners ? 'module-image--soft-corners' : null)}
+        darkOverlay={darkOverlay}
+        softCorners={softCorners}
       />
       {closeButton ? (
         <div
diff --git a/ts/components/conversation/SessionQuotedMessageComposition.tsx b/ts/components/conversation/SessionQuotedMessageComposition.tsx
index 41d8ded6d..5b728f349 100644
--- a/ts/components/conversation/SessionQuotedMessageComposition.tsx
+++ b/ts/components/conversation/SessionQuotedMessageComposition.tsx
@@ -92,6 +92,7 @@ export const SessionQuotedMessageComposition = () => {
               height={100}
               width={100}
               url={firstImageAttachment.thumbnail.objectUrl}
+              softCorners={false}
             />
           )}
 
diff --git a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
index 668b04510..455dd5dff 100644
--- a/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
+++ b/ts/components/conversation/message/message-content/ClickToTrustSender.tsx
@@ -11,6 +11,10 @@ const StyledTrustSenderUI = styled.div`
   padding-inline: var(--margins-sm);
   display: flex;
   align-items: center;
+  width: fit-content;
+
+  border-radius: var(--border-radius-message-box);
+  background: var(--color-received-message-background);
 `;
 
 const ClickToDownload = styled.div`
diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx
index 25ce21674..8d6968fb3 100644
--- a/ts/components/conversation/message/message-content/MessageAttachment.tsx
+++ b/ts/components/conversation/message/message-content/MessageAttachment.tsx
@@ -1,9 +1,8 @@
-import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { clone } from 'lodash';
 import { Data } from '../../../../data/data';
-import { MessageRenderingProps } from '../../../../models/messageType';
+import { MessageModelType, MessageRenderingProps } from '../../../../models/messageType';
 import {
   PropsForAttachment,
   showLightBox,
@@ -30,6 +29,7 @@ import { AudioPlayerWithEncryptedFile } from '../../H5AudioPlayer';
 import { ImageGrid } from '../../ImageGrid';
 import { LightBoxOptions } from '../../SessionConversation';
 import { ClickToTrustSender } from './ClickToTrustSender';
+import styled from 'styled-components';
 
 export type MessageAttachmentSelectorProps = Pick<
   MessageRenderingProps,
@@ -50,6 +50,14 @@ type Props = {
 };
 // tslint:disable: use-simple-attributes
 
+const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelType }>`
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
+`;
+
 // tslint:disable-next-line max-func-body-length cyclomatic-complexity
 export const MessageAttachment = (props: Props) => {
   const { messageId, imageBroken, handleImageError } = props;
@@ -121,15 +129,16 @@ export const MessageAttachment = (props: Props) => {
       (isVideo(attachments) && hasVideoScreenshot(attachments)))
   ) {
     return (
-      <div className={classNames('module-message__attachment-container')}>
+      <StyledAttachmentContainer messageDirection={direction}>
         <ImageGrid
           attachments={attachments}
           onError={handleImageError}
           onClickAttachment={onClickOnImageGrid}
         />
-      </div>
+      </StyledAttachmentContainer>
     );
-  } else if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
+  }
+  if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
     return (
       <div
         role="main"
@@ -149,52 +158,35 @@ export const MessageAttachment = (props: Props) => {
         />
       </div>
     );
-  } else {
-    const { pending, fileName, fileSize, contentType } = firstAttachment;
-    const extension = getExtensionForDisplay({ contentType, fileName });
-
-    return (
-      <div className={classNames('module-message__generic-attachment')}>
-        {pending ? (
-          <div className="module-message__generic-attachment__spinner-container">
-            <Spinner size="small" />
-          </div>
-        ) : (
-          <div className="module-message__generic-attachment__icon-container">
-            <div
-              role="button"
-              className="module-message__generic-attachment__icon"
-              onClick={onClickOnGenericAttachment}
-            >
-              {extension ? (
-                <div className="module-message__generic-attachment__icon__extension">
-                  {extension}
-                </div>
-              ) : null}
-            </div>
-          </div>
-        )}
-        <div className="module-message__generic-attachment__text">
-          <div
-            className={classNames(
-              'module-message__generic-attachment__file-name',
-              `module-message__generic-attachment__file-name--${direction}`
-            )}
-          >
-            {fileName}
-          </div>
+  }
+  const { pending, fileName, fileSize, contentType } = firstAttachment;
+  const extension = getExtensionForDisplay({ contentType, fileName });
+
+  return (
+    <div className="module-message__generic-attachment">
+      {pending ? (
+        <div className="module-message__generic-attachment__spinner-container">
+          <Spinner size="small" />
+        </div>
+      ) : (
+        <div className="module-message__generic-attachment__icon-container">
           <div
-            className={classNames(
-              'module-message__generic-attachment__file-size',
-              `module-message__generic-attachment__file-size--${direction}`
-            )}
+            role="button"
+            className="module-message__generic-attachment__icon"
+            onClick={onClickOnGenericAttachment}
           >
-            {fileSize}
+            {extension ? (
+              <div className="module-message__generic-attachment__icon__extension">{extension}</div>
+            ) : null}
           </div>
         </div>
+      )}
+      <div className="module-message__generic-attachment__text">
+        <div className="module-message__generic-attachment__file-name">{fileName}</div>
+        <div className="module-message__generic-attachment__file-size">{fileSize}</div>
       </div>
-    );
-  }
+    </div>
+  );
 };
 
 function attachmentIsAttachmentTypeWithPath(attac: any): attac is AttachmentTypeWithPath {
diff --git a/ts/components/conversation/message/message-content/MessageBody.tsx b/ts/components/conversation/message/message-content/MessageBody.tsx
index 4a76370e6..0fd3c0a07 100644
--- a/ts/components/conversation/message/message-content/MessageBody.tsx
+++ b/ts/components/conversation/message/message-content/MessageBody.tsx
@@ -9,6 +9,7 @@ import { AddNewLines } from '../../AddNewLines';
 import { Emojify } from '../../Emojify';
 import { LinkPreviews } from '../../../../util/linkPreviews';
 import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
+import styled from 'styled-components';
 
 const linkify = LinkifyIt();
 
@@ -88,6 +89,12 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => {
   );
 };
 
+const StyledPre = styled.pre`
+  backdrop-filter: brightness(0.8);
+  padding: var(--margins-xs);
+  user-select: text;
+`;
+
 export const MessageBody = (props: Props) => {
   const { text, disableJumbomoji, disableLinks, isGroup } = props;
   const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
@@ -105,7 +112,7 @@ export const MessageBody = (props: Props) => {
   }
 
   if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
-    return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
+    return <StyledPre>{text.substring(4, text.length - 3)}</StyledPre>;
   }
 
   return JsxSelectable(
diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index ee0745bec..ccbbe6769 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -48,6 +48,8 @@ const StyledMessageOpaqueContent = styled.div<{ messageDirection: MessageModelTy
     props.messageDirection === 'incoming'
       ? 'var(--color-received-message-background)'
       : 'var(--color-sent-message-background)'};
+  align-self: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
+
   padding: 7px 13px; // FIXME
   border-radius: 16px; //FIXME
 `;
@@ -142,6 +144,11 @@ export const MessageContent = (props: Props) => {
         threshold={0}
         rootMargin="500px 0px 500px 0px"
         triggerOnce={false}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 'var(--margins-xs)',
+        }}
       >
         <IsMessageVisibleContext.Provider value={isMessageVisible}>
           {hasContentAfterAttachmentAndQuote ? (
diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
index a069e5983..99ca186c6 100644
--- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
+++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
@@ -20,8 +20,8 @@ import { MessageStatus } from './MessageStatus';
 
 export type MessageContentWithStatusSelectorProps = Pick<
   MessageRenderingProps,
-  'direction' | 'isDeleted' | 'isTrustedForAttachmentDownload'
-> & { hasAttachments: boolean };
+  'direction' | 'isDeleted'
+>;
 
 type Props = {
   messageId: string;
@@ -87,7 +87,7 @@ export const MessageContentWithStatuses = (props: Props) => {
   if (!contentProps) {
     return null;
   }
-  const { direction, isDeleted, hasAttachments, isTrustedForAttachmentDownload } = contentProps;
+  const { direction, isDeleted } = contentProps;
   const isIncoming = direction === 'incoming';
 
   const [popupReaction, setPopupReaction] = useState('');
@@ -112,9 +112,6 @@ export const MessageContentWithStatuses = (props: Props) => {
         role="button"
         onClick={onClickOnMessageOuterContainer}
         onDoubleClickCapture={onDoubleClickReplyToMessage}
-        style={{
-          width: hasAttachments && isTrustedForAttachmentDownload ? 'min-content' : 'auto',
-        }}
         data-testid={dataTestId}
       >
         <MessageStatus
diff --git a/ts/state/ducks/SessionTheme.tsx b/ts/state/ducks/SessionTheme.tsx
index 7322028b5..6be30151b 100644
--- a/ts/state/ducks/SessionTheme.tsx
+++ b/ts/state/ducks/SessionTheme.tsx
@@ -334,10 +334,16 @@ export const SessionGlobalStyles = createGlobalStyle`
     --margins-md:  15px;
     --margins-lg:  20px;
 
+    /* PADDING */
+    --padding-message-content: 7px 13px;
+    --border-radius-message-box: 16px;
+
     /* ANIMATIONS */
     --default-duration: '0.25s';
+
     /* FILTERS */
     --filter-session-text: ${lightFilterSessionText};
+
     /* BORDERS */
     --border-unread: ${lightUnreadBorder};
     --border-session:  ${lightColorSessionBorder};
@@ -348,6 +354,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* COLORS NOT CHANGING BETWEEN THEMES */
     --color-warning:  ${warning};
     --color-destructive:  ${destructive};
+
     /* COLORS */
     --color-accent: ${lightColorAccent};
     --color-accent-button:  ${lightColorAccentButton};
@@ -360,7 +367,6 @@ export const SessionGlobalStyles = createGlobalStyle`
     --color-session-shadow: ${lightColorSessionShadow};
     --color-compose-view-button-background: ${lightColorComposeViewBg};
     --color-sent-message-background:  ${lightColorSentMessageBg};
-    // TODO: this might be wrong text colour. Something happened during merge.
     --color-sent-message-text:  ${black};
     --color-clickable-hovered: ${lightColorClickableHovered};
     --color-session-border:  ${lightColorSessionBorderColor};
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index deafbcf69..0658d5991 100644
--- a/ts/state/selectors/conversations.ts
+++ b/ts/state/selectors/conversations.ts
@@ -1111,8 +1111,7 @@ export const getMessageContentWithStatusesSelectorProps = createSelector(
     }
 
     const msgProps: MessageContentWithStatusSelectorProps = {
-      hasAttachments: Boolean(props.propsForMessage.attachments?.length) || false,
-      ...pick(props.propsForMessage, ['direction', 'isDeleted', 'isTrustedForAttachmentDownload']),
+      ...pick(props.propsForMessage, ['direction', 'isDeleted']),
     };
 
     return msgProps;