From 07616eb674315792f72dd4869b861e3a0ae943ad Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 10 Jul 2023 09:16:15 +0200
Subject: [PATCH] fix: avatar placeholder instead of grey circle when not
 enough members

---
 .../AvatarPlaceHolder/AvatarPlaceHolder.tsx   | 19 +++----------------
 .../icon/MemberAvatarPlaceHolder.tsx          | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 16 deletions(-)
 create mode 100644 ts/components/icon/MemberAvatarPlaceHolder.tsx

diff --git a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
index 42319aa57..b38780c89 100644
--- a/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
+++ b/ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { COLORS } from '../../../themes/constants/colors';
 import { getInitials } from '../../../util/getInitials';
 import { allowOnlyOneAtATime } from '../../../session/utils/Promise';
+import { MemberAvatarPlaceHolder } from '../../icon/MemberAvatarPlaceHolder';
 
 type Props = {
   diameter: number;
@@ -83,22 +84,8 @@ export const AvatarPlaceHolder = (props: Props) => {
   const rWithoutBorder = diameterWithoutBorder / 2;
 
   if (loading || !hash) {
-    // return grey circle
-    return (
-      <svg viewBox={viewBox}>
-        <g id="UrTavla">
-          <circle
-            cx={r}
-            cy={r}
-            r={rWithoutBorder}
-            fill="#d2d2d3"
-            shapeRendering="geometricPrecision"
-            stroke={'var(--avatar-border-color)'}
-            strokeWidth="1"
-          />
-        </g>
-      </svg>
-    );
+    // return avatar placeholder circle
+    return <MemberAvatarPlaceHolder />;
   }
 
   const initials = getInitials(name);
diff --git a/ts/components/icon/MemberAvatarPlaceHolder.tsx b/ts/components/icon/MemberAvatarPlaceHolder.tsx
new file mode 100644
index 000000000..3ef483284
--- /dev/null
+++ b/ts/components/icon/MemberAvatarPlaceHolder.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+// tslint:disable: no-http-string
+
+export const MemberAvatarPlaceHolder = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+      <circle fill="var(--primary-color)" cx="13" cy="13" r="13" />
+      <path
+        fill="var(--white-color)"
+        d="M18.9 19.1c-1.5-.9-3-.8-3-.8h-3.6c-2.3 0-3.3 0-4.2.3-.9.3-1.8.8-2.8 2-.5.7-.8 1.4-1 2C6.6 24.7 9.7 26 13 26c3.3 0 6.4-1.3 8.7-3.3-.5-1.6-1.5-2.8-2.8-3.6z"
+      />
+      <ellipse cx="13" cy="10.8" fill="var(--white-color)" rx="5.6" ry="6.1" />
+    </svg>
+  );
+};