From bdb1fb2daec1df0a42f5565a9ea3283fb97a50a8 Mon Sep 17 00:00:00 2001
From: Lipis <lipiridis@gmail.com>
Date: Sun, 29 Nov 2020 20:19:06 +0200
Subject: [PATCH] Add border to the Avatars (#2428)

---
 src/actions/actionNavigate.tsx | 3 ++-
 src/components/Avatar.tsx      | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx
index ab0265b4..c54af14e 100644
--- a/src/actions/actionNavigate.tsx
+++ b/src/actions/actionNavigate.tsx
@@ -43,12 +43,13 @@ export const actionGoToCollaborator = register({
       return null;
     }
 
-    const { background } = getClientColors(clientId);
+    const { background, stroke } = getClientColors(clientId);
     const shortName = getClientInitials(collaborator.username);
 
     return (
       <Avatar
         color={background}
+        border={stroke}
         onClick={() => updateData(collaborator.pointer)}
       >
         {shortName}
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 1bd50ca5..2b851370 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -6,10 +6,15 @@ type AvatarProps = {
   children: string;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
+  border: string;
 };
 
-export const Avatar = ({ children, color, onClick }: AvatarProps) => (
-  <div className="Avatar" style={{ background: color }} onClick={onClick}>
+export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
+  <div
+    className="Avatar"
+    style={{ background: color, border: `1px solid ${border}` }}
+    onClick={onClick}
+  >
     {children}
   </div>
 );