From ad6224ad8cb6c68b5a63ca8bb29e2aa98d87eac4 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 22 Jun 2021 15:30:38 +0300
Subject: [PATCH] Transparent background for custom icons (#3145)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/avatar/avatar.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx
index cd27497bbb..4164b65261 100644
--- a/src/renderer/components/avatar/avatar.tsx
+++ b/src/renderer/components/avatar/avatar.tsx
@@ -72,9 +72,21 @@ function getIconString(title: string) {
 export function Avatar(props: Props) {
   const { title, width = 32, height = 32, colorHash, children, background, ...settings } = props;
 
+  const getBackgroundColor = () => {
+    if (background) {
+      return background;
+    }
+
+    if (settings.src) {
+      return "transparent";
+    }
+
+    return randomColor({ seed: colorHash, luminosity: "dark" });
+  };
+
   const generateAvatarStyle = (): React.CSSProperties => {
     return {
-      backgroundColor: background || randomColor({ seed: colorHash, luminosity: "dark" }),
+      backgroundColor: getBackgroundColor(),
       width,
       height,
       textTransform: "uppercase"