Merge pull request #1784 from warrickct/transparent-pngs

Transparent pngs

stylesheets/_modules.scss

@@ -130,26 +130,19 @@
   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');
-    }
+    background: none;
   }
 }
 
 .module-message--incoming {
   .module-message__attachment-container--with-content-below,
   .module-message__attachment-container--with-content-above {
-    @include themify($themes) {
-      background: themed('receivedMessageBackground');
-    }
+    background: none;
   }
 }
 
@@ -1284,7 +1277,7 @@
 
 .module-image {
   overflow: hidden;
-  background-color: $color-white;
+  background: none;
   position: relative;
   display: inline-block;
   margin: 1px;

stylesheets/_session_theme.scss

@@ -25,8 +25,14 @@
   }
 
   &__container--incoming {
-    @include themify($themes) {
-      background: themed('receivedMessageBackground');
+    &--opaque {
+      @include themify($themes) {
+        background: themed('receivedMessageBackground');
+      }
+    }
+
+    &--transparent {
+      background: none;
     }
 
     .module-message__text {
@@ -49,8 +55,14 @@
   }
 
   &__container--outgoing {
-    @include themify($themes) {
-      background: themed('sentMessageBackground');
+    &--opaque {
+      @include themify($themes) {
+        background: themed('sentMessageBackground');
+      }
+    }
+
+    &--transparent {
+      background: none;
     }
 
     .module-message__text {

stylesheets/_theme_dark.scss

@@ -401,7 +401,7 @@
   // Module: Image
 
   .module-image {
-    background-color: $color-black;
+    background: none;
   }
 
   .module-image__border-overlay {

ts/components/conversation/Message.tsx

@@ -781,7 +781,10 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
           <div
             className={classNames(
               'module-message__container',
-              `module-message__container--${direction}`
+              `module-message__container--${direction}`,
+              isShowingImage
+                ? `module-message__container--${direction}--transparent`
+                : `module-message__container--${direction}--opaque`
             )}
             style={{
               width: isShowingImage ? width : undefined,