From f07816711db53291c2467f15a14b6ff06795af94 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 4 Apr 2024 19:59:43 +0200
Subject: [PATCH] Fix white background on snapshot image thumbnail with
 transparent backgroundColor

---
 src/components/SnapshotImageThumb.stories.tsx | 13 +++++++++++-
 src/components/SnapshotImageThumb.tsx         | 21 ++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/SnapshotImageThumb.stories.tsx b/src/components/SnapshotImageThumb.stories.tsx
index 5070fbfe..b8892f23 100644
--- a/src/components/SnapshotImageThumb.stories.tsx
+++ b/src/components/SnapshotImageThumb.stories.tsx
@@ -31,7 +31,18 @@ export const Positive = {
 
 export const Small = {
   args: {
-    backgroundColor: "rgba(255, 255, 255, 1)",
     thumbnailUrl: "/capture-16b798d6.png",
   },
 } satisfies Story;
+
+export const BackgroundColor = {
+  args: {
+    backgroundColor: "#313d4c",
+  },
+} satisfies Story;
+
+export const TransparentBackground = {
+  args: {
+    backgroundColor: "rbga(0, 0, 0, 0)",
+  },
+} satisfies Story;
diff --git a/src/components/SnapshotImageThumb.tsx b/src/components/SnapshotImageThumb.tsx
index 9f31e3b8..3bed9317 100644
--- a/src/components/SnapshotImageThumb.tsx
+++ b/src/components/SnapshotImageThumb.tsx
@@ -5,21 +5,26 @@ import React from "react";
 const Wrapper = styled.div<{ status?: "positive" }>(({ status, theme }) => ({
   position: "relative",
   display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: theme.background.content,
+  backgroundColor: "white",
   border: `1px solid ${status === "positive" ? theme.color.green : theme.appBorderColor}`,
   borderRadius: 5,
   margin: "15px 15px 0",
-  padding: 5,
   minHeight: 200,
   minWidth: 200,
   maxWidth: 500,
 
+  div: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    border: `2px solid ${theme.background.content}`,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
   img: {
     display: "block",
     maxWidth: "100%",
-    borderRadius: 3,
   },
   svg: {
     position: "absolute",
@@ -46,8 +51,10 @@ export const SnapshotImageThumb = ({
   thumbnailUrl,
 }: SnapshotImageThumbProps & React.ImgHTMLAttributes<HTMLImageElement>) => {
   return (
-    <Wrapper status={status} style={backgroundColor ? { backgroundColor } : {}}>
-      <img alt="Snapshot thumbnail" src={thumbnailUrl} />
+    <Wrapper status={status}>
+      <div style={backgroundColor ? { backgroundColor } : {}}>
+        <img alt="Snapshot thumbnail" src={thumbnailUrl} />
+      </div>
       {status === "positive" && <CheckIcon />}
     </Wrapper>
   );