signal-desktop/ts/components/Avatar.md

With avatar

<Avatar
  size={28}
  color="pink"
  name="John Smith"
  avatarPath={util.gifObjectUrl}
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="pink"
  name="Puppies"
  avatarPath={util.gifObjectUrl}
  conversationType="group"
  i18n={util.i18n}
/>

With only name

<Avatar
  size={28}
  color="blue"
  name="John"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="green"
  name="John Smith"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="red"
  name="Puppies"
  conversationType="group"
  i18n={util.i18n}
/>

Just phone number

<Avatar
  size={28}
  color="pink"
  phoneNumber="(555) 353-3433"
  conversationType="direct"
  i18n={util.i18n}
/>

All colors

<Avatar
  size={28}
  color="red"
  name="Red"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="deep_orange"
  name="Deep Orange"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="brown"
  name="Broen"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="pink"
  name="Pink"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="purple"
  name="Purple"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="indigo"
  name="Indigo"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="blue"
  name="Blue"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="teal"
  name="Teal"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="green"
  name="Green"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="light_green"
  name="Light Green"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={28}
  color="blue_grey"
  name="Blue Grey"
  conversationType="direct"
  i18n={util.i18n}
/>

36px

<Avatar
  size={36}
  color="teal"
  name="John Smith"
  avatarPath={util.gifObjectUrl}
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={36}
  color="teal"
  name="John"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={36}
  color="teal"
  name="John Smith"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={36}
  color="teal"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={36}
  color="teal"
  name="Pupplies"
  conversationType="group"
  i18n={util.i18n}
/>

48px

<Avatar
  size={48}
  color="teal"
  name="John Smith"
  avatarPath={util.gifObjectUrl}
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={48}
  color="teal"
  name="John"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={48}
  color="teal"
  name="John Smith"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={48}
  color="teal"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={48}
  color="teal"
  name="Pupplies"
  conversationType="group"
  i18n={util.i18n}
/>

80px

<Avatar
  size={80}
  color="teal"
  name="John Smith"
  avatarPath={util.gifObjectUrl}
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={80}
  color="teal"
  name="John"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={80}
  color="teal"
  name="John Smith"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={80}
  color="teal"
  conversationType="direct"
  i18n={util.i18n}
/>
<Avatar
  size={80}
  color="teal"
  name="Pupplies"
  conversationType="group"
  i18n={util.i18n}
/>

Broken color

<Avatar
  size={28}
  color="fake"
  name="F"
  conversationType="direct"
  i18n={util.i18n}
/>

Broken image

<Avatar
  size={28}
  color="pink"
  name="John Smith"
  avatarPath="nonexistent"
  conversationType="direct"
  i18n={util.i18n}
/>

Broken image for group

<Avatar
  size={28}
  avatarPath="nonexistent"
  color="pink"
  name="Puppies"
  avatarPath="nonexistent"
  conversationType="group"
  i18n={util.i18n}
/>