Add border to the Avatars (#2428)

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}

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>
 );