From 886c71ef31f1351c26bf2e35243cb30502216064 Mon Sep 17 00:00:00 2001
From: Nathan Power <Nathan.c.power@icloud.com>
Date: Fri, 16 Sep 2022 19:37:52 +1000
Subject: [PATCH] fix(chat): give transparent images transparent background
 (#4898)

---
 components/ui/Chat/Image/Image.html             |  1 +
 components/ui/ImageContainer/ImageContainer.vue | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/ui/Chat/Image/Image.html b/components/ui/Chat/Image/Image.html
index f0b535b716..6a96cf184c 100644
--- a/components/ui/Chat/Image/Image.html
+++ b/components/ui/Chat/Image/Image.html
@@ -16,6 +16,7 @@
     v-else-if="dataURL"
     class="image-container"
     :nsfw="attachment.nsfw"
+    transparent
   >
     <img
       :src="dataURL"
diff --git a/components/ui/ImageContainer/ImageContainer.vue b/components/ui/ImageContainer/ImageContainer.vue
index 690bf87787..fdfbd5059a 100644
--- a/components/ui/ImageContainer/ImageContainer.vue
+++ b/components/ui/ImageContainer/ImageContainer.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="image-container" :class="{ nsfw: nsfw && blockNsfw }">
+  <div
+    class="image-container"
+    :class="{ nsfw: nsfw && blockNsfw, transparent: transparent }"
+  >
     <slot />
   </div>
 </template>
@@ -13,6 +16,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    transparent: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     blockNsfw(): boolean {
@@ -44,5 +51,9 @@ export default {
       filter: blur(40px);
     }
   }
+
+  &.transparent {
+    background: transparent;
+  }
 }
 </style>