signal-desktop/ts/components/Avatar.md

With avatar

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={80}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={52}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    i18n={util.i18n}
  />
  <hr />
  <Avatar
    size={80}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <Avatar
    size={52}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue"
    avatarPath={util.gifObjectUrl}
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
</util.ConversationContext>

With only name

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <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}
  />
</util.ConversationContext>

Just phone number

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

Letters

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={80}
    color="blue"
    name="One"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={52}
    color="blue"
    name="One"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue"
    name="One"
    conversationType="direct"
    i18n={util.i18n}
  />
  <hr />
  <Avatar
    size={80}
    color="blue"
    name="One"
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <Avatar
    size={52}
    color="blue"
    name="One"
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="blue"
    name="One"
    conversationType="direct"
    onClick={() => console.log('onClick')}
    i18n={util.i18n}
  />
</util.ConversationContext>

Note to self

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={80}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={52}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="pink"
    noteToSelf={true}
    phoneNumber="(555) 353-3433"
    conversationType="direct"
    i18n={util.i18n}
  />
</util.ConversationContext>

Group Icon

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar size={80} color="blue" conversationType="group" i18n={util.i18n} />
  <Avatar size={52} color="blue" conversationType="group" i18n={util.i18n} />
  <Avatar size={28} color="blue" conversationType="group" i18n={util.i18n} />
</util.ConversationContext>

Contact Icon

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar size={80} color="blue" conversationType="direct" i18n={util.i18n} />
  <Avatar size={52} color="blue" conversationType="direct" i18n={util.i18n} />
  <Avatar size={28} color="blue" conversationType="direct" i18n={util.i18n} />
</util.ConversationContext>

All colors, 28px

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <Avatar
    size={28}
    color="signal-blue"
    conversationType="direct"
    i18n={util.i18n}
  />
  <Avatar
    size={28}
    color="signal-blue"
    name="Group"
    conversationType="group"
    i18n={util.i18n}
  />
  <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}
  />
</util.ConversationContext>

52px

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

80px

<util.ConversationContext theme={util.theme} ios={util.ios}>
  <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}
  />
</util.ConversationContext>

Broken color

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

Broken image

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

Broken image for group

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