From f11cb7744dc4188773f1bde6e12233c07cb01ce2 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 16 Sep 2020 15:33:10 +1000
Subject: [PATCH] fix round avatars with border top and bottom width

---
 ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx
index 12d89d1be..431065f88 100644
--- a/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx
+++ b/ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx
@@ -46,8 +46,10 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
 
   public render() {
     const { borderColor, colors, diameter, name } = this.props;
+    const diameterWithoutBorder = diameter - 2;
     const viewBox = `0 0 ${diameter} ${diameter}`;
     const r = diameter / 2;
+    const rWithoutBorder = diameterWithoutBorder / 2;
 
     if (!this.state.sha512Seed) {
       // return grey circle
@@ -57,7 +59,7 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
             <circle
               cx={r}
               cy={r}
-              r={r}
+              r={rWithoutBorder}
               fill="#d2d2d3"
               shape-rendering="geometricPrecision"
               stroke={borderColor}
@@ -84,7 +86,7 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
           <circle
             cx={r}
             cy={r}
-            r={r}
+            r={rWithoutBorder}
             fill={bgColor}
             shape-rendering="geometricPrecision"
             stroke={borderColor}