From 6cdced4dfcddc47196d5e1bf0074473c77251fcd Mon Sep 17 00:00:00 2001
From: "Gustavo A. Salazar" <gustavoadolfo.salazar@gmail.com>
Date: Fri, 6 May 2022 09:38:33 +0100
Subject: [PATCH] memberDB svg icon for deleted entries

---
 src/components/Entry/MemberSymbol/index.js  | 12 ++++++++----
 src/components/Entry/MemberSymbol/style.css |  7 +++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Entry/MemberSymbol/index.js b/src/components/Entry/MemberSymbol/index.js
index fb8139917..90d09bc98 100644
--- a/src/components/Entry/MemberSymbol/index.js
+++ b/src/components/Entry/MemberSymbol/index.js
@@ -141,6 +141,7 @@ const classNames = new Map([
   ['TIGRFAMS', f('md-ti')],
   ['NEW', f('md-new')],
   ['ALL', f('md-all')],
+  ['REMOVED', f('md-removed')],
 ]);
 
 const MemberSymbol = (
@@ -155,12 +156,15 @@ const MemberSymbol = (
   const [png, setPng] = useState(null);
   const [avif, setAvif] = useState(null);
   if (!svg) {
-    images[type][0].then((src) => setAvif(src.default));
-    images[type][1].then((src) => setPng(src.default));
+    images?.[type]?.[0].then((src) => setAvif(src.default));
+    images?.[type]?.[1].then((src) => setPng(src.default));
   }
   return (
-    <span data-testid="entry-member-db-icon">
-      {svg ? (
+    <span
+      data-testid="entry-member-db-icon"
+      className={f('entry-member-db-icon')}
+    >
+      {svg || (!png && !avif) ? (
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 200 200"
diff --git a/src/components/Entry/MemberSymbol/style.css b/src/components/Entry/MemberSymbol/style.css
index 8d2941914..652f5bf0c 100644
--- a/src/components/Entry/MemberSymbol/style.css
+++ b/src/components/Entry/MemberSymbol/style.css
@@ -53,6 +53,9 @@
 .md-all .md-color {
   fill: var(--colors-all);
 }
+.md-removed .md-color {
+  fill: var(--colors-dark);
+}
 
 .md-color,
 .md-server {
@@ -64,6 +67,10 @@
 :root {
   --aspect-ratio: 1 / 1;
 }
+.entry-member-db-icon svg {
+  width: 80px;
+}
+
 .memberdb-logo {
   min-height: 80px;
   display: flex;