make quotes stay empty when there object isEmpty()

js/models/conversations.js

@@ -1148,13 +1148,17 @@
           'with timestamp',
           now
         );
+        // be sure an empty quote is marked as undefined rather than being empty
+        // otherwise upgradeMessageSchema() will return an object with an empty array
+        // and this.get('quote') will be true, even if there is no quote.
+        const editedQuote = _.isEmpty(quote) ? undefined : quote;
 
         const conversationType = this.get('type');
         const messageWithSchema = await upgradeMessageSchema({
           type: 'outgoing',
           body,
           conversationId: destination,
-          quote,
+          quote: editedQuote,
           preview,
           attachments,
           sent_at: now,

js/models/messages.js

@@ -722,6 +722,7 @@
     getPropsForQuote(options = {}) {
       const { noClick } = options;
       const quote = this.get('quote');
+
       if (!quote) {
         return null;
       }

stylesheets/_modules.scss

@@ -127,8 +127,30 @@
   margin-top: -10px;
   margin-bottom: -10px;
 
-  border-radius: 16px;
+  border-radius: $session_message-container-border-radius;
   overflow: hidden;
+  // no background by default for the attachment container
+  @include themify($themes) {
+    background: themed('inboxBackground');
+  }
+}
+
+.module-message--outgoing {
+  .module-message__attachment-container--with-content-below,
+  .module-message__attachment-container--with-content-above {
+    @include themify($themes) {
+      background: themed('sentMessageBackground');
+    }
+  }
+}
+
+.module-message--incoming {
+  .module-message__attachment-container--with-content-below,
+  .module-message__attachment-container--with-content-above {
+    @include themify($themes) {
+      background: themed('receivedMessageBackground');
+    }
+  }
 }
 
 .module-message__attachment-container--with-content-below {
@@ -281,8 +303,8 @@
   margin-inline-end: -12px;
   margin-top: -10px;
   margin-bottom: 5px;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
 }
 
 .module-message__link-preview--with-content-above {
@@ -293,8 +315,8 @@
 
 .module-message__link-preview__content {
   padding: 8px;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
   background-color: $color-white;
   display: flex;
   flex-direction: row;
@@ -411,18 +433,13 @@
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
-  color: $color-gray-60;
   text-transform: uppercase;
   user-select: none;
 }
 
 .module-message__metadata__badge {
   font-weight: bold;
-}
-
-.module-message__metadata__date--incoming,
-.module-message__metadata__badge--incoming {
-  color: $color-white-08;
+  padding-inline-end: 5px;
 }
 
 .module-message__metadata__date--with-image-no-caption {
@@ -493,8 +510,8 @@
   text-align: center;
   padding: 10px;
 
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: $session_message-container-border-radius;
+  border-bottom-right-radius: $session_message-container-border-radius;
 }
 
 .module-message__author-avatar {
@@ -1800,16 +1817,16 @@
 }
 
 .module-image--curved-top-left {
-  border-top-left-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
 }
 .module-image--curved-top-right {
-  border-top-right-radius: 16px;
+  border-top-right-radius: $session_message-container-border-radius;
 }
 .module-image--curved-bottom-left {
-  border-bottom-left-radius: 16px;
+  border-bottom-left-radius: $session_message-container-border-radius;
 }
 .module-image--curved-bottom-right {
-  border-bottom-right-radius: 16px;
+  border-bottom-right-radius: $session_message-container-border-radius;
 }
 .module-image--small-curved-top-left {
   border-top-left-radius: 10px;

stylesheets/_session.scss

@@ -419,9 +419,11 @@ label {
 
 .module-message__attachment-container,
 .module-image--curved-bottom-right,
+.module-image--curved-top-left,
+.module-image--curved-top-right,
 .module-image--curved-bottom-left {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
   border-bottom-left-radius: $session_message-container-border-radius;
   border-bottom-right-radius: $session_message-container-border-radius;
 }

stylesheets/_session_theme.scss

@@ -41,11 +41,7 @@
       }
     }
 
-    .module-message__author,
-    .module-message__metadata,
-    .module-message__metadata__date,
-    .module-message__metadata__badge,
-    .module-message__metadata__badge--separator {
+    .module-message__author {
       @include themify($themes) {
         @include session-color-subtle(themed('receivedMessageText'));
       }
@@ -79,11 +75,7 @@
       }
     }
 
-    .module-message__author,
-    .module-message__metadata,
-    .module-message__metadata__date,
-    .module-message__metadata__badge,
-    .module-message__metadata__badge--separator {
+    .module-message__author {
       @include themify($themes) {
         @include session-color-subtle(themed('sentMessageText'));
       }
@@ -91,26 +83,30 @@
   }
 }
 
-.message {
-  &-highlighted {
+.session-message-wrapper {
+  &.message-highlighted {
     animation: highlightedMessageAnimation 1s ease-in-out;
   }
 
-  &-selected {
+  &.message-selected {
     .module-message {
       &__container {
         @include themify($themes) {
           box-shadow: themed('sessionShadow');
         }
       }
+    }
+  }
 
-      &__author {
-        color: $session-color-white;
+  // when no caption, we have to force white as we have a black shadow on the back
+  .module-message__metadata--with-image-no-caption {
+    .message-read-receipt-container {
+      .session-icon.check {
+        fill: white;
       }
     }
   }
-
-  &-read-receipt-container {
+  .message-read-receipt-container {
     margin-inline-start: 5px;
     .session-icon.check {
       @include themify($themes) {

stylesheets/_theme_dark.scss

@@ -297,10 +297,6 @@
     color: $color-gray-25;
   }
 
-  .module-message__metadata__date--with-image-no-caption {
-    color: $color-white-08;
-  }
-
   .module-message__metadata__status-icon--sending {
     @include color-svg('../images/sending.svg', $color-white-08);
   }

ts/components/conversation/ImageGrid.tsx

@@ -15,7 +15,7 @@ import { Image } from './Image';
 
 import { LocalizerType } from '../../types/Util';
 
-interface Props {
+type Props = {
   attachments: Array<AttachmentType>;
   withContentAbove?: boolean;
   withContentBelow?: boolean;
@@ -25,11 +25,10 @@ interface Props {
 
   onError: () => void;
   onClickAttachment?: (attachment: AttachmentType) => void;
-}
+};
 
-export class ImageGrid extends React.Component<Props> {
+export const ImageGrid = (props: Props) => {
   // tslint:disable-next-line max-func-body-length */
-  public render() {
   const {
     attachments,
     bottomOverlay,
@@ -38,7 +37,7 @@ export class ImageGrid extends React.Component<Props> {
     onClickAttachment,
     withContentAbove,
     withContentBelow,
-    } = this.props;
+  } = props;
 
   const curveTopLeft = !Boolean(withContentAbove);
   const curveTopRight = curveTopLeft;
@@ -308,5 +307,4 @@ export class ImageGrid extends React.Component<Props> {
       </div>
     </div>
   );
-  }
-}
+};

ts/session/utils/Attachments.ts

@@ -136,13 +136,19 @@ export class AttachmentUtils {
     previews: Array<RawPreview>,
     openGroup?: OpenGroup
   ): Promise<Array<Preview>> {
-    const promises = (previews || []).map(async item => ({
+    const promises = (previews || []).map(async item => {
+      // some links does not have an image associated, and it makes the whole message fail to send
+      if (!item.image) {
+        return item;
+      }
+      return {
         ...item,
         image: await this.upload({
           attachment: item.image,
           openGroup,
         }),
-    }));
+      };
+    });
     return Promise.all(promises);
   }