diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 8d9c4933c..c7dbe3eae 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -130,9 +130,6 @@ 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 { @@ -1284,7 +1281,8 @@ .module-image { overflow: hidden; - background-color: $color-white; + // background-color: $color-white; + background-color: rgba(0, 0, 0, 0); position: relative; display: inline-block; margin: 1px; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index cb3597fed..40356df68 100644 --- a/stylesheets/_session_theme.scss +++ b/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,15 @@ } &__container--outgoing { - @include themify($themes) { - background: themed('sentMessageBackground'); + &--opaque { + @include themify($themes) { + background: themed('sentMessageBackground'); + } + } + + + &--transparent { + background: none; } .module-message__text { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 54639d58e..e0e93674c 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -401,7 +401,7 @@ // Module: Image .module-image { - background-color: $color-black; + background: none; } .module-image__border-overlay { diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 2fd928ccf..630f6fac7 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -671,8 +671,8 @@ class MessageInner extends React.PureComponent { return Boolean( displayImage && - ((isImage(attachments) && hasImage(attachments)) || - (isVideo(attachments) && hasVideoScreenshot(attachments))) + ((isImage(attachments) && hasImage(attachments)) || + (isVideo(attachments) && hasVideoScreenshot(attachments))) ); } @@ -781,7 +781,10 @@ class MessageInner extends React.PureComponent {