Use up to two scaled initials as a placeholder for users with no avatar.

If the user's name consists of just a single word, then use up to two
letters from that word as the placeholder.

This provides better differentiation of users than the current practice
of using just a single letter for everyone.

ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -97,8 +97,12 @@ export const AvatarPlaceHolder = (props: Props) => {
     );
   }
 
-  const initial = getInitials(name)?.toLocaleUpperCase() || '0';
-  const fontSize = diameter * 0.5;
+  let initials = getInitials(name)?.toLocaleUpperCase() || '0';
+  if (name.indexOf(' ') === -1) {
+    initials = name.substr(0, 2);
+  }
+
+  const fontSize = diameter * (1 / (initials.length + 1));
 
   const bgColorIndex = hash % avatarPlaceholderColors.length;
 
@@ -126,7 +130,7 @@ export const AvatarPlaceHolder = (props: Props) => {
           strokeWidth={1}
           alignmentBaseline="central"
         >
-          {initial}
+          {initials}
         </text>
       </g>
     </svg>

ts/util/getInitials.ts

@@ -7,5 +7,9 @@ export function getInitials(name?: string): string | undefined {
     return name[2];
   }
 
-  return name[0];
+  const initials = name.split(' ').slice(0, 2).map(n => {
+    return n[0];
+  })
+
+  return initials.join('');
 }