From c6dc0d7fc558efd66caf8ae6584d8261e8d4ef7a Mon Sep 17 00:00:00 2001
From: AndyLnd <andy@wire.com>
Date: Wed, 28 Oct 2020 17:48:58 +0100
Subject: [PATCH] refactor: React participant-avatar (#9828)

---
 package.json                                  |   2 +
 .../template/content/connect-requests.htm     |   2 +-
 .../template/content/preferences-account.htm  |   4 +-
 .../components/ParticipantAvatar.test.tsx     |  99 ++++++
 src/script/components/ParticipantAvatar.tsx   | 156 +++++++++
 src/script/components/fullSearch.ts           |   8 +-
 src/script/components/groupList.ts            |   8 +-
 .../list/conversationListCallingCell.ts       |   8 +-
 .../components/list/conversationListCell.ts   |   8 +-
 src/script/components/list/participantItem.ts |   4 +-
 src/script/components/mentionSuggestions.ts   |   8 +-
 src/script/components/message.ts              |  15 +-
 src/script/components/panel/serviceDetails.ts |  10 +-
 src/script/components/panel/userDetails.ts    |   4 +-
 src/script/components/participantAvatar.ts    | 305 ------------------
 .../participantAvatar/AvatarBackground.tsx    |  36 ++-
 .../participantAvatar/AvatarBadge.tsx         |  52 +++
 .../participantAvatar/AvatarBorder.tsx        |  37 +++
 .../participantAvatar/AvatarImage.test.tsx    | 129 ++++++++
 .../participantAvatar/AvatarImage.tsx         | 118 +++++++
 .../participantAvatar/AvatarInitials.tsx      |  49 +++
 .../participantAvatar/AvatarWrapper.tsx       |  45 +++
 .../participantAvatar/ServiceAvatar.test.tsx  |  80 +++++
 .../participantAvatar/ServiceAvatar.tsx       |  86 +++++
 .../participantAvatar/TemporaryGuest.test.tsx | 104 ++++++
 .../TemporaryGuestAvatar.tsx                  |  94 ++++++
 .../participantAvatar/UserAvatar.test.tsx     | 113 +++++++
 .../participantAvatar/UserAvatar.tsx          |  85 +++++
 src/script/components/serviceList.ts          |   4 +-
 src/script/components/topPeople.ts            |   8 +-
 src/script/entity/User.ts                     |   4 +-
 src/script/util/CSSMixin.ts                   |  28 ++
 src/script/util/ComponentUtil.ts              |  12 +-
 .../content/ConnectRequestsViewModel.ts       |   6 +-
 .../view_model/content/InputBarViewModel.ts   |   4 +-
 .../content/PreferencesAccountViewModel.ts    |   6 +-
 .../content/ServiceModalViewModel.ts          |   4 +-
 .../list/ConversationListViewModel.ts         |   6 +-
 .../list/conversation-list-calling-cell.less  |  10 -
 src/style/components/participant-avatar.less  | 273 ----------------
 .../content/conversation/message-list.less    |   4 -
 src/style/content/preferences/account.less    |   4 -
 src/style/foundation/main.less                |   1 -
 .../list/conversationListCallingCellSpec.js   |   4 +-
 yarn.lock                                     |   7 +
 45 files changed, 1380 insertions(+), 674 deletions(-)
 create mode 100644 src/script/components/ParticipantAvatar.test.tsx
 create mode 100644 src/script/components/ParticipantAvatar.tsx
 delete mode 100644 src/script/components/participantAvatar.ts
 rename test/unit_tests/components/participantAvatarSpec.js => src/script/components/participantAvatar/AvatarBackground.tsx (50%)
 create mode 100644 src/script/components/participantAvatar/AvatarBadge.tsx
 create mode 100644 src/script/components/participantAvatar/AvatarBorder.tsx
 create mode 100644 src/script/components/participantAvatar/AvatarImage.test.tsx
 create mode 100644 src/script/components/participantAvatar/AvatarImage.tsx
 create mode 100644 src/script/components/participantAvatar/AvatarInitials.tsx
 create mode 100644 src/script/components/participantAvatar/AvatarWrapper.tsx
 create mode 100644 src/script/components/participantAvatar/ServiceAvatar.test.tsx
 create mode 100644 src/script/components/participantAvatar/ServiceAvatar.tsx
 create mode 100644 src/script/components/participantAvatar/TemporaryGuest.test.tsx
 create mode 100644 src/script/components/participantAvatar/TemporaryGuestAvatar.tsx
 create mode 100644 src/script/components/participantAvatar/UserAvatar.test.tsx
 create mode 100644 src/script/components/participantAvatar/UserAvatar.tsx
 delete mode 100644 src/style/components/participant-avatar.less

diff --git a/package.json b/package.json
index a9764f4ffaa..ded40dcb799 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "react-redux": "7.2.1",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
+    "react-transition-group": "4.4.1",
     "redux": "4.0.5",
     "redux-logdown": "1.0.4",
     "redux-thunk": "2.3.0",
@@ -80,6 +81,7 @@
     "@types/react-redux": "7.1.9",
     "@types/react-router": "5.1.8",
     "@types/react-router-dom": "5.1.6",
+    "@types/react-transition-group": "4.4.0",
     "@types/redux-mock-store": "1.0.2",
     "@types/sdp-transform": "2.4.4",
     "@types/simplebar": "5.1.1",
diff --git a/src/page/template/content/connect-requests.htm b/src/page/template/content/connect-requests.htm
index ac9a8294d6e..3b65882da7f 100644
--- a/src/page/template/content/connect-requests.htm
+++ b/src/page/template/content/connect-requests.htm
@@ -4,7 +4,7 @@
       <div class="connect-request" data-bind="attr: {'data-uie-uid': id}" data-uie-name="connect-request">
         <div class="connect-request-name ellipsis" data-bind="text: name()"></div>
         <div class="connect-request-username label-username" data-bind="text: username()"></div>
-        <participant-avatar class="connect-request-avatar avatar-no-badge avatar-no-filter cursor-default" params="participant: $data, size: $parent.ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
+        <participant-avatar class="connect-request-avatar avatar-no-filter cursor-default" params="participant: $data, size: $parent.AVATAR_SIZE.X_LARGE, noBadge: true, noFilter: true"></participant-avatar>
         <div class="button-group">
           <div class="button button-inverted" data-bind="click: $parent.clickOnIgnore, text: t('connectionRequestIgnore')" data-uie-name="do-ignore"></div>
           <div class="button" data-bind="click: $parent.clickOnAccept, text: t('connectionRequestConnect')" data-uie-name="do-accept"></div>
diff --git a/src/page/template/content/preferences-account.htm b/src/page/template/content/preferences-account.htm
index 534e6019e50..7517f2153ef 100644
--- a/src/page/template/content/preferences-account.htm
+++ b/src/page/template/content/preferences-account.htm
@@ -97,7 +97,7 @@
 
       <!-- ko if: isActivatedAccount() -->
         <label class="preferences-account-picture-button" for="self-upload-file-input" data-bind="attr: {title: t('tooltipPreferencesPicture')}">
-          <participant-avatar params="participant: selfUser, size: ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
+          <participant-avatar class="see-through" params="participant: selfUser, size: AVATAR_SIZE.X_LARGE"></participant-avatar>
           <input id="self-upload-file-input"
                  type="file"
                  data-bind="attr: {accept: Config.PROFILE_IMAGE.FILE_TYPES.join(',')}, file_select: clickOnChangePicture"
@@ -108,7 +108,7 @@
 
       <!-- ko ifnot: isActivatedAccount() -->
         <div>
-          <participant-avatar params="participant: selfUser, size: ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
+          <participant-avatar params="participant: selfUser, size: AVATAR_SIZE.X_LARGE"></participant-avatar>
         </div>
       <!-- /ko -->
     </section>
diff --git a/src/script/components/ParticipantAvatar.test.tsx b/src/script/components/ParticipantAvatar.test.tsx
new file mode 100644
index 00000000000..93861349ef5
--- /dev/null
+++ b/src/script/components/ParticipantAvatar.test.tsx
@@ -0,0 +1,99 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import ParticipantAvatar, {ParticipantAvatarProps} from './ParticipantAvatar';
+import TestPage from 'Util/test/TestPage';
+import {User} from '../entity/User';
+import {AssetRepository} from '../assets/AssetRepository';
+
+class ParticipantAvatarPage extends TestPage<ParticipantAvatarProps> {
+  constructor(props?: ParticipantAvatarProps) {
+    super(ParticipantAvatar, props);
+  }
+
+  getUserParticpantAvatar = () => this.get('div[data-uie-name="element-avatar-user"]');
+  getServiceParticipantAvatar = () => this.get('div[data-uie-name="service-avatar"]');
+  getTemporaryGuestAvatar = () => this.get('div[data-uie-name="element-avatar-temporary-guest"]');
+  getServiceAvatar = () => this.get('div[data-uie-name="element-avatar-service"]');
+  getUserAvatar = () => this.get('div[data-uie-name="element-avatar-user"]');
+
+  clickUserAvatar = () => this.click(this.getUserParticpantAvatar());
+}
+
+describe('ParticipantAvatar', () => {
+  it('executes onClick with current participant', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const participantAvatar = new ParticipantAvatarPage({
+      assetRepository: assetRepoSpy,
+      clickHandler: jasmine.createSpy(),
+      participant,
+    });
+
+    participantAvatar.clickUserAvatar();
+
+    expect(participantAvatar.getProps().clickHandler).toHaveBeenCalledWith(
+      participantAvatar.getProps().participant,
+      jasmine.anything(),
+    );
+  });
+
+  it('renders temporary guest avatar', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isTemporaryGuest(true);
+
+    const participantAvatar = new ParticipantAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant,
+    });
+
+    expect(participantAvatar.getTemporaryGuestAvatar().exists()).toBe(true);
+  });
+
+  it('renders service avatar', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isService = true;
+
+    const participantAvatar = new ParticipantAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant,
+    });
+
+    expect(participantAvatar.getServiceAvatar().exists()).toBe(true);
+  });
+
+  it('renders user avatar', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const participantAvatar = new ParticipantAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant,
+    });
+
+    expect(participantAvatar.getUserAvatar().exists()).toBe(true);
+  });
+});
diff --git a/src/script/components/ParticipantAvatar.tsx b/src/script/components/ParticipantAvatar.tsx
new file mode 100644
index 00000000000..f399bfb1fdb
--- /dev/null
+++ b/src/script/components/ParticipantAvatar.tsx
@@ -0,0 +1,156 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+
+import {User} from '../entity/User';
+import {ServiceEntity} from '../integration/ServiceEntity';
+import {AssetRepository} from '../assets/AssetRepository';
+import {registerReactComponent} from 'Util/ComponentUtil';
+
+import UserAvatar from './participantAvatar/UserAvatar';
+import ServiceAvatar from './participantAvatar/ServiceAvatar';
+import TemporaryGuestAvatar from './participantAvatar/TemporaryGuestAvatar';
+
+export enum AVATAR_SIZE {
+  LARGE = 'avatar-l',
+  MEDIUM = 'avatar-m',
+  SMALL = 'avatar-s',
+  X_LARGE = 'avatar-xl',
+  X_SMALL = 'avatar-xs',
+  XX_SMALL = 'avatar-xxs',
+  XXX_SMALL = 'avatar-xxxs',
+}
+
+export enum STATE {
+  BLOCKED = 'blocked',
+  IGNORED = 'ignored',
+  NONE = '',
+  PENDING = 'pending',
+  SELECTED = 'selected',
+  SELF = 'self',
+  UNKNOWN = 'unknown',
+}
+
+export const DIAMETER = {
+  [AVATAR_SIZE.LARGE]: 72,
+  [AVATAR_SIZE.MEDIUM]: 40,
+  [AVATAR_SIZE.SMALL]: 28,
+  [AVATAR_SIZE.X_LARGE]: 200,
+  [AVATAR_SIZE.X_SMALL]: 24,
+  [AVATAR_SIZE.XX_SMALL]: 20,
+  [AVATAR_SIZE.XXX_SMALL]: 16,
+};
+
+export const INITIALS_SIZE = {
+  [AVATAR_SIZE.LARGE]: '24px',
+  [AVATAR_SIZE.MEDIUM]: '16px',
+  [AVATAR_SIZE.SMALL]: '11px',
+  [AVATAR_SIZE.X_LARGE]: '32px',
+  [AVATAR_SIZE.X_SMALL]: '11px',
+  [AVATAR_SIZE.XX_SMALL]: '11px',
+  [AVATAR_SIZE.XXX_SMALL]: '8px',
+};
+
+export interface ParticipantAvatarProps {
+  assetRepository: AssetRepository;
+  clickHandler?: (participant: User, target: Node) => void;
+  noBadge?: boolean;
+  noFilter?: boolean;
+  participant: User;
+  size?: AVATAR_SIZE;
+}
+
+const ParticipantAvatar: React.FunctionComponent<ParticipantAvatarProps> = ({
+  assetRepository,
+  participant,
+  clickHandler,
+  noBadge = false,
+  noFilter = false,
+  size = AVATAR_SIZE.LARGE,
+}) => {
+  const isUser = participant instanceof User && !participant.isService && !participant.isTemporaryGuest();
+  const isService = participant instanceof ServiceEntity || participant.isService;
+  const isTemporaryGuest = !isService && participant.isTemporaryGuest();
+
+  const avatarState = (() => {
+    switch (true) {
+      case isService:
+        return STATE.NONE;
+      case participant.isMe:
+        return STATE.SELF;
+      case participant.isTeamMember():
+        return STATE.NONE;
+      case participant.isBlocked():
+        return STATE.BLOCKED;
+      case participant.isRequest():
+        return STATE.PENDING;
+      case participant.isIgnored():
+        return STATE.IGNORED;
+      case participant.isCanceled() || participant.isUnknown():
+        return STATE.UNKNOWN;
+      default:
+        return STATE.NONE;
+    }
+  })();
+
+  const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (typeof clickHandler === 'function') {
+      clickHandler(participant, (event.currentTarget as Node).parentNode);
+    }
+  };
+
+  if (isUser) {
+    return (
+      <UserAvatar
+        size={size}
+        assetRepository={assetRepository}
+        noBadge={noBadge}
+        noFilter={noFilter}
+        participant={participant}
+        state={avatarState}
+        onClick={onClick}
+      />
+    );
+  }
+
+  if (isTemporaryGuest) {
+    return (
+      <TemporaryGuestAvatar
+        noBadge={noBadge}
+        participant={participant}
+        state={avatarState}
+        size={size}
+        onClick={onClick}
+      />
+    );
+  }
+
+  return <ServiceAvatar assetRepository={assetRepository} size={size} participant={participant} onClick={onClick} />;
+};
+
+export default ParticipantAvatar;
+
+registerReactComponent('participant-avatar', {
+  component: ParticipantAvatar,
+  injected: {assetRepository: AssetRepository},
+  optionalParams: ['size', 'click', 'noBadge', 'noFilter'],
+  template:
+    '<span data-bind="react: {assetRepository, participant: ko.unwrap(participant), size, clickHandler: click, noBadge, noFilter}"></span>',
+});
diff --git a/src/script/components/fullSearch.ts b/src/script/components/fullSearch.ts
index 5e0b9fec5e4..36c462a5dbf 100644
--- a/src/script/components/fullSearch.ts
+++ b/src/script/components/fullSearch.ts
@@ -23,7 +23,7 @@ import {debounce, escape} from 'underscore';
 import {isScrolledBottom} from 'Util/scroll-helpers';
 import {formatDateShort} from 'Util/TimeUtil';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {getSearchRegex} from '../search/FullTextSearch';
 import type {Message} from '../entity/message/Message';
 import type {ContentMessage} from '../entity/message/ContentMessage';
@@ -40,7 +40,7 @@ class FullSearch {
   inputSubscription: ko.Subscription;
   messageEntities: Message[];
   params: FullSearchParams;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   searchProvider: (query: string) => Promise<{messageEntities: Message[]; query: string}>;
   showNoResultsText: ko.Observable<boolean>;
   visibleMessageEntities: ko.ObservableArray<Message>;
@@ -56,7 +56,7 @@ class FullSearch {
 
   constructor(params: FullSearchParams) {
     this.searchProvider = params.search_provider;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
     this.params = params;
 
     this.messageEntities = [];
@@ -178,7 +178,7 @@ ko.components.register('full-search', {
     <div class="full-search-list" data-bind="foreach: {data: visibleMessageEntities, as: 'messageEntity', noChildContext: true}" data-uie-name="full-search-list">
       <div class="full-search-item" data-bind="click: () => clickOnMessage(messageEntity)" data-uie-name="full-search-item">
         <div class="full-search-item-avatar">
-          <participant-avatar params="participant: messageEntity.user, size: ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
+          <participant-avatar params="participant: messageEntity.user, size: AVATAR_SIZE.X_SMALL"></participant-avatar>
         </div>
         <div class="full-search-item-content">
           <div class="full-search-item-content-text ellipsis" data-bind="html: htmlFormatResult(messageEntity)" data-uie-name="full-search-item-text"></div>
diff --git a/src/script/components/groupList.ts b/src/script/components/groupList.ts
index 253b2c391b9..e1ceea1bcfd 100644
--- a/src/script/components/groupList.ts
+++ b/src/script/components/groupList.ts
@@ -19,7 +19,7 @@
 
 import ko from 'knockout';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import type {Conversation} from '../entity/Conversation';
 import {generateConversationUrl} from '../router/routeGenerator';
 
@@ -31,13 +31,13 @@ interface GroupListViewModelParams {
 class GroupListViewModel {
   groups: ko.ObservableArray<Conversation[]>;
   onSelect: (group: Conversation) => void;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   readonly getConversationUrl: (conversationId: string) => string;
 
   constructor(params: GroupListViewModelParams) {
     this.groups = params.groups;
     this.onSelect = params.click;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
     this.getConversationUrl = generateConversationUrl;
   }
 }
@@ -49,7 +49,7 @@ ko.components.register('group-list', {
       <div class="search-list-item" data-bind="link_to: getConversationUrl(group.id), click: () => onSelect(group), attr: {'data-uie-uid': group.id, 'data-uie-value': group.display_name}" data-uie-name="item-group">
         <div class="search-list-item-image">
           <!-- ko if: group.is1to1() -->
-            <participant-avatar params="participant: group.participating_user_ets()[0], size: ParticipantAvatar.SIZE.SMALL"></participant-avatar>
+            <participant-avatar params="participant: group.participating_user_ets()[0], size: AVATAR_SIZE.SMALL"></participant-avatar>
           <!-- /ko -->
           <!-- ko ifnot: group.is1to1() -->
             <group-avatar params="users: group.participating_user_ets()"></group-avatar>
diff --git a/src/script/components/list/conversationListCallingCell.ts b/src/script/components/list/conversationListCallingCell.ts
index 54f41692855..37c3c95629b 100644
--- a/src/script/components/list/conversationListCallingCell.ts
+++ b/src/script/components/list/conversationListCallingCell.ts
@@ -26,7 +26,7 @@ import {formatSeconds} from 'Util/TimeUtil';
 import {afterRender} from 'Util/util';
 import {sortUsersByPriority} from 'Util/StringUtil';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {generateConversationUrl} from '../../router/routeGenerator';
 
 import 'Components/calling/fullscreenVideoCall';
@@ -75,7 +75,7 @@ class ConversationListCallingCell {
   readonly isOngoing: ko.PureComputed<boolean>;
   readonly isOutgoing: ko.PureComputed<boolean>;
   readonly multitasking: Multitasking;
-  readonly ParticipantAvatar: typeof ParticipantAvatar;
+  readonly AVATAR_SIZE: typeof AVATAR_SIZE;
   readonly participantsButtonLabel: ko.PureComputed<string>;
   readonly showMaximize: ko.PureComputed<boolean>;
   readonly showNoCameraPreview: ko.Computed<boolean>;
@@ -110,7 +110,7 @@ class ConversationListCallingCell {
     this.temporaryUserStyle = temporaryUserStyle;
     this.multitasking = multitasking;
     this.callActions = callActions;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
     this.isSelfVerified = isSelfVerified;
 
     this.conversationUrl = generateConversationUrl(conversation().id);
@@ -233,7 +233,7 @@ ko.components.register('conversation-list-calling-cell', {
               <group-avatar class="conversation-list-cell-avatar-arrow call-ui__avatar" params="users: conversationParticipants(), conversation: conversation"></group-avatar>
             <!-- /ko -->
             <!-- ko if: !conversation().isGroup() && conversationParticipants().length -->
-              <participant-avatar params="participant: conversationParticipants()[0], size: ParticipantAvatar.SIZE.SMALL"></participant-avatar>
+              <participant-avatar params="participant: conversationParticipants()[0], size: AVATAR_SIZE.SMALL"></participant-avatar>
             <!-- /ko -->
           </div>
         <!-- /ko -->
diff --git a/src/script/components/list/conversationListCell.ts b/src/script/components/list/conversationListCell.ts
index 35ee8c6ef43..8dc28cb0912 100644
--- a/src/script/components/list/conversationListCell.ts
+++ b/src/script/components/list/conversationListCell.ts
@@ -21,7 +21,7 @@ import ko from 'knockout';
 
 import {noop} from 'Util/util';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {generateCellState} from '../../conversation/ConversationCellState';
 import {ConversationStatusIcon} from '../../conversation/ConversationStatusIcon';
 import type {Conversation} from '../../entity/Conversation';
@@ -46,7 +46,7 @@ class ConversationListCell {
   conversation: Conversation;
   isSelected: ko.Computed<boolean>;
   on_click: () => void;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   showJoinButton: boolean;
   isGroup: boolean;
   is1To1: boolean;
@@ -74,7 +74,7 @@ class ConversationListCell {
     this.isSelected = ko.computed(() => is_selected(conversation));
     // TODO: "click" should be renamed to "right_click"
     this.on_click = click;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
     this.showJoinButton = showJoinButton;
     this.isGroup = conversation.isGroup();
     this.is1To1 = conversation.is1to1();
@@ -140,7 +140,7 @@ ko.components.register('conversation-list-cell', {
         <!-- /ko -->
         <!-- ko if: !isGroup && users().length -->
           <div class="avatar-halo">
-            <participant-avatar params="participant: users()[0], size: ParticipantAvatar.SIZE.SMALL"></participant-avatar>
+            <participant-avatar params="participant: users()[0], size: AVATAR_SIZE.SMALL"></participant-avatar>
           </div>
         <!-- /ko -->
       </div>
diff --git a/src/script/components/list/participantItem.ts b/src/script/components/list/participantItem.ts
index 21dc416ef39..2a38ab1c017 100644
--- a/src/script/components/list/participantItem.ts
+++ b/src/script/components/list/participantItem.ts
@@ -19,7 +19,7 @@
 
 import ko from 'knockout';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {UserlistMode} from 'Components/userList';
 import {t} from 'Util/LocalizerUtil';
 import {capitalizeFirstChar} from 'Util/StringUtil';
@@ -81,7 +81,7 @@ class ParticipantItem {
     }: ParticipantItemParams,
     element: HTMLElement,
   ) {
-    this.avatarSize = ParticipantAvatar.SIZE.SMALL;
+    this.avatarSize = AVATAR_SIZE.SMALL;
     this.participant = ko.unwrap(participant);
     this.isSelf = !!(this.participant as User).isMe;
     this.selfString = `(${capitalizeFirstChar(t('conversationYouNominative'))})`;
diff --git a/src/script/components/mentionSuggestions.ts b/src/script/components/mentionSuggestions.ts
index e0b3aecdd61..706187109d4 100644
--- a/src/script/components/mentionSuggestions.ts
+++ b/src/script/components/mentionSuggestions.ts
@@ -24,7 +24,7 @@ import {clamp} from 'Util/NumberUtil';
 import {noop} from 'Util/util';
 import {KEY, isEnterKey} from 'Util/KeyboardUtil';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import type {User} from '../entity/User';
 
 interface MentionSuggestionsParams {
@@ -36,7 +36,7 @@ interface MentionSuggestionsParams {
 class MentionSuggestions {
   isVisible: ko.Observable<boolean>;
   onSelectionValidated: (data: User, element: HTMLInputElement) => void | (() => void);
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   position: ko.Observable<{}>;
   scrollElement: Element;
   selectedSuggestion: ko.PureComputed<User>;
@@ -54,7 +54,7 @@ class MentionSuggestions {
     this.suggestions = params.suggestions;
     this.targetInputSelector = params.targetInputSelector;
     this.targetInput = undefined;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
 
     this.position = ko.observable({});
 
@@ -202,7 +202,7 @@ ko.components.register('mention-suggestions', {
           event: { mouseenter: onMouseEnter},
           css: {'mention-suggestion-list__item--highlighted': suggestion === selectedSuggestion()},
           attr: {'data-uie-value': suggestion.id, 'data-uie-selected': suggestion === selectedSuggestion()}" data-uie-name="item-mention-suggestion">
-          <participant-avatar params="participant: suggestion, size: ParticipantAvatar.SIZE.XXX_SMALL"></participant-avatar>
+          <participant-avatar params="participant: suggestion, size: AVATAR_SIZE.XXX_SMALL"></participant-avatar>
           <div class="mention-suggestion-list__item__name" data-bind="text: suggestion.name()" data-uie-name="status-name"></div>
           <!-- ko if: suggestion.isTemporaryGuest() -->
             <div class="mention-suggestion-list__item__remaining"  data-bind="text: suggestion.expirationRemainingText()" data-uie-name="status-remaining"></div>
diff --git a/src/script/components/message.ts b/src/script/components/message.ts
index 4f513248e8b..53f4e17be86 100644
--- a/src/script/components/message.ts
+++ b/src/script/components/message.ts
@@ -34,7 +34,7 @@ import type {CompositeMessage} from '../entity/message/CompositeMessage';
 import type {VerificationMessage} from '../entity/message/VerificationMessage';
 import {StatusType} from '../message/StatusType';
 import type {Text} from '../entity/message/Text';
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {SHOW_LEGAL_HOLD_MODAL} from '../view_model/content/LegalHoldModalViewModel';
 import type {ActionsViewModel} from '../view_model/ActionsViewModel';
 import type {Conversation} from '../entity/Conversation';
@@ -107,7 +107,7 @@ class Message {
   onClickResetSession: (messageError: DecryptErrorMessage) => void;
   onClickTimestamp: (messageId: string) => void;
   onLike: (message: ContentMessage, button?: boolean) => void;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   previewSubscription: ko.Subscription;
   readReceiptText: ko.PureComputed<string>;
   readReceiptTooltip: ko.PureComputed<string>;
@@ -167,7 +167,7 @@ class Message {
     this.onClickCancelRequest = onClickCancelRequest;
     this.onLike = onLike;
     this.includesOnlyEmojis = includesOnlyEmojis;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
 
     ko.computed(
       () => {
@@ -371,7 +371,7 @@ const normalTemplate: string = `
   <!-- ko if: shouldShowAvatar -->
     <div class="message-header">
       <div class="message-header-icon">
-        <participant-avatar class="sender-avatar" params="participant: message.user, click: onClickAvatar, size: ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
+        <participant-avatar class="cursor-pointer" params="participant: message.user, click: onClickAvatar, size: AVATAR_SIZE.X_SMALL"></participant-avatar>
       </div>
       <div class="message-header-label">
         <span class="message-header-label-sender" data-bind='css: message.accent_color(), text: message.headerSenderName()' data-uie-name="sender-name"></span>
@@ -551,7 +551,7 @@ const pingTemplate: string = `
 const deleteTemplate: string = `
   <div class="message-header">
     <div class="message-header-icon">
-      <participant-avatar class="sender-avatar" params="participant: message.user, click: onClickAvatar, size: ParticipantAvatar.SIZE.X_SMALL"></participant-avatar>
+      <participant-avatar class="cursor-pointer" params="participant: message.user, click: onClickAvatar, size: AVATAR_SIZE.X_SMALL"></participant-avatar>
     </div>
     <div class="message-header-label">
       <span class="message-header-label-sender" data-bind='text: message.unsafeSenderName()'></span>
@@ -642,9 +642,8 @@ const memberTemplate: string = `
       <!-- ko ifnot: message.otherUser().isService -->
         <span class="message-connected-username label-username" data-bind='text: message.otherUser().username()'></span>
       <!-- /ko -->
-      <participant-avatar class="message-connected-avatar avatar-no-badge cursor-default"
-                   data-bind="css: {'avatar-no-badge': message.otherUser().isOutgoingRequest()}"
-                   params="participant: message.otherUser, size: ParticipantAvatar.SIZE.X_LARGE"></participant-avatar>
+      <participant-avatar class="message-connected-avatar cursor-default"
+                   params="participant: message.otherUser, size: AVATAR_SIZE.X_LARGE, noBadge: message.otherUser().isOutgoingRequest()"></participant-avatar>
       <!-- ko if: message.otherUser().isOutgoingRequest() -->
         <div class="message-connected-cancel accent-text"
              data-bind="click: () => onClickCancelRequest(message),
diff --git a/src/script/components/panel/serviceDetails.ts b/src/script/components/panel/serviceDetails.ts
index 68b1fcb09e6..c7b9d64209b 100644
--- a/src/script/components/panel/serviceDetails.ts
+++ b/src/script/components/panel/serviceDetails.ts
@@ -18,11 +18,11 @@
  */
 
 import ko from 'knockout';
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import type {ServiceEntity} from '../../integration/ServiceEntity';
 
 interface ComponentParams {
-  participantAvatar: ParticipantAvatar;
+  AVATAR_SIZE: AVATAR_SIZE;
   service: ServiceEntity;
 }
 
@@ -31,17 +31,17 @@ ko.components.register('panel-service-details', {
     <div class="panel-participant">
       <div class="panel-participant__name" data-bind="text: service().name" data-uie-name="status-service-name"></div>
       <div class="panel-participant__provider-name" data-bind="text: service().providerName()" data-uie-name="status-service-provider"></div>
-      <participant-avatar params="participant: service, size: ParticipantAvatar.SIZE.X_LARGE" data-uie-name="status-profile-picture"></participant-avatar>
+      <participant-avatar params="participant: service, size: AVATAR_SIZE.X_LARGE" data-uie-name="status-profile-picture"></participant-avatar>
       <div class="panel-participant__service-description" data-bind="text: service().description" data-uie-name="status-service-description"></div>
     </div>
   `,
   viewModel: class {
     readonly service: ServiceEntity;
-    readonly ParticipantAvatar: typeof ParticipantAvatar;
+    readonly AVATAR_SIZE: typeof AVATAR_SIZE;
 
     constructor(params: ComponentParams) {
       this.service = params.service;
-      this.ParticipantAvatar = ParticipantAvatar;
+      this.AVATAR_SIZE = AVATAR_SIZE;
     }
   },
 });
diff --git a/src/script/components/panel/userDetails.ts b/src/script/components/panel/userDetails.ts
index c8f511e1204..458d94a7421 100644
--- a/src/script/components/panel/userDetails.ts
+++ b/src/script/components/panel/userDetails.ts
@@ -21,7 +21,7 @@ import ko from 'knockout';
 import {WebAppEvents} from '@wireapp/webapp-events';
 import {amplify} from 'amplify';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import type {User} from '../../entity/User';
 
 import 'Components/availabilityState';
@@ -57,7 +57,7 @@ ko.components.register('panel-user-details', {
         <div class="panel-participant__user-name" data-bind="text: participant().username()" data-uie-name="status-username"></div>
       <!-- /ko -->
 
-      <participant-avatar params="participant: participant, size: '${ParticipantAvatar.SIZE.X_LARGE}'" data-uie-name="status-profile-picture"></participant-avatar>
+      <participant-avatar params="participant: participant, size: '${AVATAR_SIZE.X_LARGE}'" data-uie-name="status-profile-picture"></participant-avatar>
 
       <!-- ko if: badge -->
         <div class="panel-participant__label" data-uie-name="status-external">
diff --git a/src/script/components/participantAvatar.ts b/src/script/components/participantAvatar.ts
deleted file mode 100644
index 5ee3de842db..00000000000
--- a/src/script/components/participantAvatar.ts
+++ /dev/null
@@ -1,305 +0,0 @@
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-
-import ko from 'knockout';
-
-import {Logger, getLogger} from 'Util/Logger';
-import {createRandomUuid} from 'Util/util';
-import {getFirstChar} from 'Util/StringUtil';
-
-import {viewportObserver} from '../ui/viewportObserver';
-import {User} from '../entity/User';
-import {ServiceEntity} from '../integration/ServiceEntity';
-import {AssetRemoteData} from '../assets/AssetRemoteData';
-import {AssetRepository} from '../assets/AssetRepository';
-import {container} from 'tsyringe';
-
-export enum SIZE {
-  LARGE = 'avatar-l',
-  MEDIUM = 'avatar-m',
-  SMALL = 'avatar-s',
-  X_LARGE = 'avatar-xl',
-  X_SMALL = 'avatar-xs',
-  XX_SMALL = 'avatar-xxs',
-  XXX_SMALL = 'avatar-xxxs',
-}
-
-enum STATE {
-  BLOCKED = 'blocked',
-  IGNORED = 'ignored',
-  NONE = '',
-  PENDING = 'pending',
-  SELECTED = 'selected',
-  SELF = 'self',
-  UNKNOWN = 'unknown',
-}
-
-interface ParticipantAvatarParams {
-  assetRepository: AssetRepository;
-  click: (participant: User, target: Node) => void;
-  delay?: number;
-  participant?: ko.Observable<User> | User;
-  selected?: () => any;
-  size?: SIZE;
-}
-
-export class ParticipantAvatar {
-  avatarEnteredViewport: boolean;
-  avatarLoadingBlocked: boolean;
-  avatarType: ko.PureComputed<string>;
-  borderRadius: number;
-  borderWidth: number;
-  cssClasses: ko.PureComputed<string>;
-  delay: number;
-  element: JQuery<HTMLElement>;
-  initials: ko.PureComputed<string>;
-  isService: ko.PureComputed<boolean>;
-  isTemporaryGuest: ko.PureComputed<boolean>;
-  isUser: ko.PureComputed<boolean>;
-  logger: Logger;
-  onClick: (data: {participant: User}, event: Event) => void;
-  participant: ko.Observable<User>;
-  participantSubscription: ko.Subscription;
-  pictureSubscription: ko.Subscription;
-  size: SIZE;
-  state: ko.PureComputed<STATE>;
-  timerLength: number;
-  timerOffset: ko.PureComputed<number>;
-
-  private readonly assetRepository: AssetRepository;
-
-  static get SIZE(): typeof SIZE {
-    return SIZE;
-  }
-
-  static get DIAMETER() {
-    return {
-      [SIZE.LARGE]: 72,
-      [SIZE.MEDIUM]: 40,
-      [SIZE.SMALL]: 28,
-      [SIZE.X_LARGE]: 200,
-      [SIZE.X_SMALL]: 24,
-      [SIZE.XX_SMALL]: 20,
-      [SIZE.XXX_SMALL]: 16,
-    };
-  }
-
-  constructor(
-    {
-      assetRepository = container.resolve(AssetRepository),
-      participant,
-      delay,
-      size,
-      selected,
-      click,
-    }: ParticipantAvatarParams,
-    componentInfo: {element: HTMLElement},
-  ) {
-    this.logger = getLogger('ParticipantAvatar');
-    this.assetRepository = assetRepository;
-
-    const isParticipantObservable = typeof participant === 'function';
-    this.participant = isParticipantObservable
-      ? (participant as ko.Observable<User>)
-      : ko.observable(participant as User);
-
-    this.isService = ko.pureComputed(() => {
-      return this.participant() instanceof ServiceEntity || this.participant().isService;
-    });
-
-    this.isUser = ko.pureComputed(() => {
-      return this.participant() instanceof User && !this.participant().isService;
-    });
-
-    this.isTemporaryGuest = ko.pureComputed(() => this.isUser() && this.participant().isTemporaryGuest());
-
-    this.avatarType = ko.pureComputed(() => `${this.isUser() ? 'user' : 'service'}-avatar`);
-    this.delay = delay;
-    this.size = size || SIZE.LARGE;
-    this.element = $(componentInfo.element);
-    this.element.addClass(`${this.avatarType()} ${this.size}`);
-
-    const borderScale = 0.9916;
-    const finalBorderWidth = this.size === SIZE.X_LARGE ? 4 : 1;
-    this.borderWidth = (finalBorderWidth / ParticipantAvatar.DIAMETER[this.size]) * 32;
-    this.borderRadius = (16 - this.borderWidth / 2) * borderScale;
-    this.timerLength = this.borderRadius * Math.PI * 2;
-
-    this.timerOffset = ko.pureComputed(() => {
-      if (this.isTemporaryGuest()) {
-        const remainingTime = this.participant().expirationRemaining();
-        const normalizedRemainingTime = remainingTime / User.CONFIG.TEMPORARY_GUEST.LIFETIME;
-        return this.timerLength * (normalizedRemainingTime - 1);
-      }
-      return 0;
-    });
-
-    this.avatarLoadingBlocked = false;
-    this.avatarEnteredViewport = false;
-
-    this.dispose = this.dispose.bind(this);
-
-    this.element.attr({
-      id: createRandomUuid(),
-      'user-id': this.participant().id,
-    });
-
-    this.initials = ko.pureComputed(() => {
-      if (this.isService()) {
-        return '';
-      }
-
-      return this.element.hasClass('avatar-xs')
-        ? getFirstChar(this.participant().initials())
-        : this.participant().initials();
-    });
-
-    this.state = ko.pureComputed(() => {
-      if (this.isService()) {
-        return STATE.NONE;
-      }
-      if (this.participant().isMe) {
-        return STATE.SELF;
-      }
-      if (typeof selected === 'function' && selected()) {
-        return STATE.SELECTED;
-      }
-      if (this.participant().isTeamMember()) {
-        return STATE.NONE;
-      }
-      if (this.participant().isBlocked()) {
-        return STATE.BLOCKED;
-      }
-      if (this.participant().isRequest()) {
-        return STATE.PENDING;
-      }
-      if (this.participant().isIgnored()) {
-        return STATE.IGNORED;
-      }
-      if (this.participant().isCanceled() || this.participant().isUnknown()) {
-        return STATE.UNKNOWN;
-      }
-      return STATE.NONE;
-    });
-
-    this.cssClasses = ko.pureComputed(() => {
-      if (this.isService()) {
-        return 'accent-color-service';
-      }
-
-      return this.isTemporaryGuest()
-        ? 'accent-color-temporary'
-        : `accent-color-${this.participant().accent_id()} ${this.state()}`;
-    });
-
-    this.onClick = (data, event) => {
-      if (typeof click === 'function') {
-        click(data.participant, (event.currentTarget as Node).parentNode);
-      }
-    };
-
-    const _loadAvatarPicture = async () => {
-      this.element.find('.avatar-image').html('');
-      this.element.removeClass('avatar-image-loaded avatar-loading-transition');
-      if (!this.avatarLoadingBlocked) {
-        this.avatarLoadingBlocked = true;
-
-        const isSmall = this.size !== SIZE.LARGE && this.size !== SIZE.X_LARGE;
-        const loadHiRes = !isSmall && window.devicePixelRatio > 1;
-        const pictureResource: AssetRemoteData = loadHiRes
-          ? this.participant().mediumPictureResource()
-          : this.participant().previewPictureResource();
-
-        if (pictureResource) {
-          const isCached = pictureResource.downloadProgress() === 100;
-
-          try {
-            const url = await this.assetRepository.getObjectUrl(pictureResource);
-            if (url) {
-              const image = new Image();
-              image.src = url;
-              this.element.find('.avatar-image').html(image as any);
-              this.element.addClass(`avatar-image-loaded ${isCached && isSmall ? '' : 'avatar-loading-transition'}`);
-            }
-            this.avatarLoadingBlocked = false;
-          } catch (error) {
-            this.logger.warn('Failed to load avatar picture.', error);
-          }
-        } else {
-          this.avatarLoadingBlocked = false;
-        }
-      }
-    };
-
-    const _onInViewport = () => {
-      this.avatarEnteredViewport = true;
-      _loadAvatarPicture();
-    };
-
-    const _loadAvatarPictureIfVisible = () => {
-      if (this.avatarEnteredViewport) {
-        _loadAvatarPicture();
-      }
-    };
-
-    viewportObserver.onElementInViewport(componentInfo.element, _onInViewport);
-
-    this.pictureSubscription = this.participant().mediumPictureResource.subscribe(_loadAvatarPictureIfVisible);
-    this.participantSubscription = this.participant.subscribe(_loadAvatarPictureIfVisible);
-  }
-
-  dispose() {
-    viewportObserver.removeElement(this.element[0]);
-    this.participantSubscription.dispose();
-    this.pictureSubscription.dispose();
-  }
-}
-
-ko.components.register('participant-avatar', {
-  template: `
-    <div class="participant-avatar" data-bind="attr: {title: participant().name, 'data-uie-name': avatarType()}, css: cssClasses(), click: onClick, delay: delay">
-      <div class="avatar-background"></div>
-      <!-- ko if: isUser -->
-        <div class="avatar-initials" data-bind="text: initials()"></div>
-      <!-- /ko -->
-      <!-- ko if: isService -->
-        <div class="avatar-service-placeholder">
-            <service-icon></service-icon>
-        </div>
-      <!-- /ko -->
-      <div class="avatar-image"></div>
-      <!-- ko if: isUser -->
-        <div class="avatar-badge"></div>
-      <!-- /ko -->
-      <div class="avatar-border"></div>
-      <!-- ko if: isTemporaryGuest() -->
-        <svg class="avatar-temporary-guest-border" viewBox="0 0 32 32" data-bind="attr: {stroke: participant().accent_color()}">
-          <circle cx="16" cy="16" transform="rotate(-90 16 16)" fill="none"
-             data-bind="attr: {'stroke-dasharray': timerLength, 'stroke-dashoffset': timerOffset, 'r': borderRadius, 'stroke-width': borderWidth}">
-          </circle>
-        </svg>
-      <!-- /ko -->
-    </div>
-    `,
-  viewModel: {
-    createViewModel(params: ParticipantAvatarParams, componentInfo: {element: HTMLElement}) {
-      return new ParticipantAvatar(params, componentInfo);
-    },
-  },
-});
diff --git a/test/unit_tests/components/participantAvatarSpec.js b/src/script/components/participantAvatar/AvatarBackground.tsx
similarity index 50%
rename from test/unit_tests/components/participantAvatarSpec.js
rename to src/script/components/participantAvatar/AvatarBackground.tsx
index 48788be8a81..32f148e52ae 100644
--- a/test/unit_tests/components/participantAvatarSpec.js
+++ b/src/script/components/participantAvatar/AvatarBackground.tsx
@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2019 Wire Swiss GmbH
+ * Copyright (C) 2020 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,18 +17,26 @@
  *
  */
 
-import {instantiateComponent} from '../../helper/knockoutHelpers';
+import React from 'react';
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
 
-import {User} from 'src/script/entity/User';
-import 'src/script/components/participantAvatar';
+export interface AvatarBackgroundProps {
+  backgroundColor?: string;
+  borderRadius?: string;
+}
 
-describe('participant-avatar', () => {
-  it("displays user's initials if no avatar is defined", () => {
-    const testInitials = 'PA';
-    const viewModel = {participant: new User()};
-    spyOn(viewModel.participant, 'initials').and.returnValue(testInitials);
-    return instantiateComponent('participant-avatar', viewModel).then(domContainer => {
-      expect(domContainer.querySelector('.avatar-initials').innerText).toBe(testInitials);
-    });
-  });
-});
+const AvatarBackground: React.FunctionComponent<AvatarBackgroundProps> = ({
+  borderRadius = '50%',
+  backgroundColor = 'currentColor',
+}) => (
+  <div
+    css={{
+      ...CSS_FILL_PARENT,
+      backgroundColor,
+      borderRadius,
+      transform: 'scale(0.9916)',
+    }}
+  />
+);
+
+export default AvatarBackground;
diff --git a/src/script/components/participantAvatar/AvatarBadge.tsx b/src/script/components/participantAvatar/AvatarBadge.tsx
new file mode 100644
index 00000000000..dc42091b0bf
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarBadge.tsx
@@ -0,0 +1,52 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import {CSS_FILL_PARENT, CSS_FLEX_CENTER, CSS_ICON} from 'Util/CSSMixin';
+
+import {STATE} from '../ParticipantAvatar';
+
+export interface AvatarBadgeProps {
+  state: STATE;
+}
+
+const AvatarBadge: React.FunctionComponent<AvatarBadgeProps> = ({state}) => {
+  const icons: Record<string, string> = {
+    [STATE.PENDING]: '\\e165',
+    [STATE.BLOCKED]: '\\e104',
+  };
+  return (
+    <div
+      css={{
+        ...CSS_FILL_PARENT,
+        ...CSS_FLEX_CENTER,
+        '&::before': {
+          ...CSS_ICON(icons[state]),
+        },
+        backgroundColor: 'rgba(0, 0, 0, .56)',
+        borderRadius: '50%',
+        color: '#fff',
+      }}
+      data-uie-name="element-avatar-user-badge-icon"
+      data-uie-value={state}
+    />
+  );
+};
+
+export default AvatarBadge;
diff --git a/src/script/components/participantAvatar/AvatarBorder.tsx b/src/script/components/participantAvatar/AvatarBorder.tsx
new file mode 100644
index 00000000000..e99cc47da2f
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarBorder.tsx
@@ -0,0 +1,37 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
+
+export interface AvatarBorderProps {
+  borderRadius?: string;
+}
+
+const AvatarBorder: React.FunctionComponent<AvatarBorderProps> = ({borderRadius = '50%'}) => (
+  <div
+    css={{
+      ...CSS_FILL_PARENT,
+      border: '1px solid rgba(0, 0, 0, 0.08)',
+      borderRadius,
+    }}
+  />
+);
+
+export default AvatarBorder;
diff --git a/src/script/components/participantAvatar/AvatarImage.test.tsx b/src/script/components/participantAvatar/AvatarImage.test.tsx
new file mode 100644
index 00000000000..8ff09abbc76
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarImage.test.tsx
@@ -0,0 +1,129 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import AvatarImage, {AvatarImageProps} from './AvatarImage';
+import TestPage from 'Util/test/TestPage';
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
+import {AssetRemoteData} from 'src/script/assets/AssetRemoteData';
+import {act} from 'react-dom/test-utils';
+import {waitFor} from '@testing-library/react';
+
+class AvatarImagePage extends TestPage<AvatarImageProps> {
+  constructor(props?: AvatarImageProps) {
+    super(AvatarImage, props);
+  }
+
+  getImage = () => this.get('img');
+}
+
+describe('AvatarImage', () => {
+  it('fetches full avatar image for large avatars', async () => {
+    const assetRepoSpy = {
+      getObjectUrl: jasmine.createSpy().and.returnValue(Promise.resolve()),
+    };
+    const assetRepo = (assetRepoSpy as unknown) as AssetRepository;
+    const participant = new User('id');
+    const resource = {
+      downloadProgress: () => 0,
+    } as AssetRemoteData;
+    participant.mediumPictureResource(resource);
+
+    const avatarImage = new AvatarImagePage({
+      assetRepository: assetRepo,
+      devicePixelRatio: 2,
+      mediumPicture: participant.mediumPictureResource(),
+      previewPicture: participant.previewPictureResource(),
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    avatarImage.update();
+
+    await act(() => waitFor(() => expect(assetRepoSpy.getObjectUrl).toHaveBeenCalledWith(resource)));
+  });
+
+  it('fetches preview avatar image for low pixel ratio devices', async () => {
+    const assetRepoSpy = {
+      getObjectUrl: jasmine.createSpy().and.returnValue(Promise.resolve()),
+    };
+    const assetRepo = (assetRepoSpy as unknown) as AssetRepository;
+    const participant = new User('id');
+    const resource = {
+      downloadProgress: () => 0,
+    } as AssetRemoteData;
+    participant.previewPictureResource(resource);
+
+    const avatarImage = new AvatarImagePage({
+      assetRepository: assetRepo,
+      devicePixelRatio: 1,
+      mediumPicture: participant.mediumPictureResource(),
+      previewPicture: participant.previewPictureResource(),
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    avatarImage.update();
+
+    await act(() => waitFor(() => expect(assetRepoSpy.getObjectUrl).toHaveBeenCalledWith(resource)));
+  });
+
+  it('fetches preview avatar image for small avatars', async () => {
+    const assetRepoSpy = {
+      getObjectUrl: jasmine.createSpy().and.returnValue(Promise.resolve()),
+    };
+    const assetRepo = (assetRepoSpy as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.previewPictureResource({
+      downloadProgress: () => 0,
+    } as AssetRemoteData);
+
+    const avatarImage = new AvatarImagePage({
+      assetRepository: assetRepo,
+      devicePixelRatio: 2,
+      mediumPicture: participant.mediumPictureResource(),
+      previewPicture: participant.previewPictureResource(),
+      size: AVATAR_SIZE.SMALL,
+    });
+
+    avatarImage.update();
+
+    await act(() =>
+      waitFor(() => expect(assetRepoSpy.getObjectUrl).toHaveBeenCalledWith(participant.previewPictureResource())),
+    );
+  });
+
+  it('does not try to fetch non-existent avatar', async () => {
+    const assetRepoSpy = {
+      getObjectUrl: jasmine.createSpy().and.returnValue(Promise.resolve()),
+    };
+    const assetRepo = (assetRepoSpy as unknown) as AssetRepository;
+    const participant = new User('id');
+
+    const avatarImage = new AvatarImagePage({
+      assetRepository: assetRepo,
+      mediumPicture: participant.mediumPictureResource(),
+      previewPicture: participant.previewPictureResource(),
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    avatarImage.update();
+
+    await act(() => waitFor(() => expect(assetRepoSpy.getObjectUrl).not.toHaveBeenCalled()));
+  });
+});
diff --git a/src/script/components/participantAvatar/AvatarImage.tsx b/src/script/components/participantAvatar/AvatarImage.tsx
new file mode 100644
index 00000000000..aa018dc0817
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarImage.tsx
@@ -0,0 +1,118 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React, {useEffect, useState} from 'react';
+import {Transition} from 'react-transition-group';
+import {CSSObject} from '@emotion/serialize';
+
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
+
+import {AssetRemoteData} from '../../assets/AssetRemoteData';
+import {AssetRepository} from '../../assets/AssetRepository';
+
+import {AVATAR_SIZE} from '../ParticipantAvatar';
+
+export interface AvatarImageProps {
+  assetRepository: AssetRepository;
+  backgroundColor?: string;
+  borderRadius?: string;
+  devicePixelRatio?: number;
+  isGrey?: boolean;
+  mediumPicture: AssetRemoteData;
+  previewPicture: AssetRemoteData;
+  size: AVATAR_SIZE;
+}
+
+const AvatarImage: React.FunctionComponent<AvatarImageProps> = ({
+  assetRepository,
+  backgroundColor = 'currentColor',
+  borderRadius = '50%',
+  isGrey = false,
+  previewPicture,
+  mediumPicture,
+  size,
+  devicePixelRatio = window.devicePixelRatio,
+}) => {
+  const [avatarImage, setAvatarImage] = useState('');
+  const [showTransition, setShowTransition] = useState(false);
+  const [avatarLoadingBlocked, setAvatarLoadingBlocked] = useState(false);
+
+  useEffect(() => {
+    loadAvatarPicture();
+  }, [previewPicture, mediumPicture, size]);
+
+  const loadAvatarPicture = async () => {
+    if (!avatarLoadingBlocked) {
+      setAvatarLoadingBlocked(true);
+
+      const isSmall = size !== AVATAR_SIZE.LARGE && size !== AVATAR_SIZE.X_LARGE;
+      const loadHiRes = !isSmall && devicePixelRatio > 1;
+      const pictureResource: AssetRemoteData = loadHiRes ? mediumPicture : previewPicture;
+
+      if (pictureResource) {
+        const isCached = pictureResource.downloadProgress() === 100;
+        setShowTransition(!isCached && !isSmall);
+        try {
+          const url = await assetRepository.getObjectUrl(pictureResource);
+          if (url) {
+            setAvatarImage(url);
+          }
+          setAvatarLoadingBlocked(false);
+        } catch (error) {
+          console.warn('Failed to load avatar picture.', error);
+        }
+      } else {
+        setAvatarLoadingBlocked(false);
+      }
+    }
+  };
+
+  const transitionImageStyles: Record<string, CSSObject> = {
+    entered: {opacity: 1, transform: 'scale(1)'},
+    entering: {opacity: 1, transform: 'scale(1)'},
+  };
+
+  return (
+    <Transition in={!!avatarImage} timeout={showTransition ? 700 : 0}>
+      {(state: string) => {
+        return (
+          <img
+            css={{
+              ...CSS_FILL_PARENT,
+              backgroundColor,
+              borderRadius,
+              filter: isGrey ? 'grayscale(100%)' : 'none',
+              height: '100%',
+              objectFit: 'cover',
+              opacity: 0,
+              overflow: 'hidden',
+              transform: 'scale(0.88)',
+              transition: showTransition ? 'all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s' : 'none',
+              width: '100%',
+              ...transitionImageStyles[state],
+            }}
+            src={avatarImage}
+          />
+        );
+      }}
+    </Transition>
+  );
+};
+
+export default AvatarImage;
diff --git a/src/script/components/participantAvatar/AvatarInitials.tsx b/src/script/components/participantAvatar/AvatarInitials.tsx
new file mode 100644
index 00000000000..f6fbddcdf1e
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarInitials.tsx
@@ -0,0 +1,49 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+
+import {getFirstChar} from 'Util/StringUtil';
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
+
+import {AVATAR_SIZE, INITIALS_SIZE, DIAMETER} from '../ParticipantAvatar';
+
+export interface AvatarInitialsProps {
+  color?: string;
+  initials: string;
+  size: AVATAR_SIZE;
+}
+
+const AvatarInitials: React.FunctionComponent<AvatarInitialsProps> = ({size, initials, color = '#fff'}) => (
+  <div
+    css={{
+      ...CSS_FILL_PARENT,
+      color,
+      fontSize: INITIALS_SIZE[size],
+      lineHeight: `${DIAMETER[size]}px`,
+      textAlign: 'center',
+      userSelect: 'none',
+    }}
+    data-uie-name="element-avatar-initials"
+  >
+    {size === AVATAR_SIZE.X_SMALL ? getFirstChar(initials) : initials}
+  </div>
+);
+
+export default AvatarInitials;
diff --git a/src/script/components/participantAvatar/AvatarWrapper.tsx b/src/script/components/participantAvatar/AvatarWrapper.tsx
new file mode 100644
index 00000000000..e19183dc2ff
--- /dev/null
+++ b/src/script/components/participantAvatar/AvatarWrapper.tsx
@@ -0,0 +1,45 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+
+import {CSS_SQUARE} from 'Util/CSSMixin';
+import {DIAMETER, AVATAR_SIZE} from '../ParticipantAvatar';
+
+export interface AvatarWrapperProps extends React.ComponentProps<'div'> {
+  color: string;
+  size: AVATAR_SIZE;
+}
+
+const AvatarWrapper: React.FunctionComponent<AvatarWrapperProps> = ({color, size, ...props}) => (
+  <div
+    css={{
+      ...CSS_SQUARE(DIAMETER[size]),
+      color,
+      display: 'inline-block',
+      overflow: 'hidden',
+      position: 'relative',
+      transform: 'translateZ(0)',
+      userSelect: 'none',
+    }}
+    {...props}
+  />
+);
+
+export default AvatarWrapper;
diff --git a/src/script/components/participantAvatar/ServiceAvatar.test.tsx b/src/script/components/participantAvatar/ServiceAvatar.test.tsx
new file mode 100644
index 00000000000..015bae27ae1
--- /dev/null
+++ b/src/script/components/participantAvatar/ServiceAvatar.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import ServiceAvatar, {ServiceAvatarProps} from './ServiceAvatar';
+import TestPage from 'Util/test/TestPage';
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
+
+class ServiceAvatarPage extends TestPage<ServiceAvatarProps> {
+  constructor(props?: ServiceAvatarProps) {
+    super(ServiceAvatar, props);
+  }
+
+  getInitials = () => this.get('div[data-uie-name="element-avatar-initials"]');
+  getServiceIcon = () => this.get('div[data-uie-name="element-avatar-service-icon"]');
+  getUserBadgeIcon = () => this.get('div[data-uie-name="element-avatar-user-badge-icon"]');
+}
+
+describe('ServiceAvatar', () => {
+  it('shows a service icon', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const service = new User('id');
+    service.isService = true;
+
+    const serviceAvatar = new ServiceAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: service,
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    expect(serviceAvatar.getServiceIcon().exists()).toBe(true);
+  });
+
+  it('does not show initials', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const service = new User('id');
+    service.name('Anton Bertha');
+    service.isService = true;
+
+    const serviceAvatar = new ServiceAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: service,
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    expect(serviceAvatar.getInitials().exists()).toBe(false);
+  });
+
+  it('does not show avatar badge', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const service = new User('id');
+    service.name('Anton Bertha');
+    service.isService = true;
+
+    const serviceAvatar = new ServiceAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: service,
+      size: AVATAR_SIZE.LARGE,
+    });
+
+    expect(serviceAvatar.getUserBadgeIcon().exists()).toBe(false);
+  });
+});
diff --git a/src/script/components/participantAvatar/ServiceAvatar.tsx b/src/script/components/participantAvatar/ServiceAvatar.tsx
new file mode 100644
index 00000000000..8036f5a3433
--- /dev/null
+++ b/src/script/components/participantAvatar/ServiceAvatar.tsx
@@ -0,0 +1,86 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import ko from 'knockout';
+import React from 'react';
+
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
+
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+
+import SVGProvider from '../../auth/util/SVGProvider';
+
+import AvatarBackground from './AvatarBackground';
+import AvatarBorder from './AvatarBorder';
+import AvatarImage from './AvatarImage';
+import AvatarWrapper from './AvatarWrapper';
+import {AVATAR_SIZE} from '../ParticipantAvatar';
+
+export interface ServiceAvatarProps {
+  assetRepository: AssetRepository;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  participant: User;
+  size: AVATAR_SIZE;
+}
+
+const ServiceAvatar: React.FunctionComponent<ServiceAvatarProps> = ({assetRepository, participant, size, onClick}) => {
+  return (
+    <AvatarWrapper
+      color="#fff"
+      title={ko.unwrap(participant.name)}
+      size={size}
+      onClick={onClick}
+      data-uie-name="element-avatar-service"
+    >
+      <AvatarBackground borderRadius="20%" />
+      <div
+        css={{
+          ...CSS_FILL_PARENT,
+          alignItems: 'center',
+          borderRadius: '20%',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+        data-uie-name="element-avatar-service-icon"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          css={{
+            '& > path': {
+              fill: 'rgba(141, 152, 159, 0.24)',
+            },
+            width: [AVATAR_SIZE.LARGE, AVATAR_SIZE.X_LARGE].includes(size) ? '32px' : '60%',
+          }}
+          dangerouslySetInnerHTML={{__html: SVGProvider['service-icon']?.documentElement?.innerHTML}}
+        ></svg>
+      </div>
+      <AvatarImage
+        assetRepository={assetRepository}
+        previewPicture={participant.previewPictureResource()}
+        mediumPicture={participant.mediumPictureResource()}
+        borderRadius="20%"
+        size={size}
+      />
+      <AvatarBorder borderRadius="20%" />
+    </AvatarWrapper>
+  );
+};
+
+export default ServiceAvatar;
diff --git a/src/script/components/participantAvatar/TemporaryGuest.test.tsx b/src/script/components/participantAvatar/TemporaryGuest.test.tsx
new file mode 100644
index 00000000000..a9bae40063f
--- /dev/null
+++ b/src/script/components/participantAvatar/TemporaryGuest.test.tsx
@@ -0,0 +1,104 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import TemporaryGuestAvatar from './TemporaryGuestAvatar';
+import TestPage from 'Util/test/TestPage';
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+import {UserAvatarProps} from './UserAvatar';
+import {AVATAR_SIZE, STATE} from '../ParticipantAvatar';
+
+class TemporaryGuestAvatarPage extends TestPage<UserAvatarProps> {
+  constructor(props?: UserAvatarProps) {
+    super(TemporaryGuestAvatar, props);
+  }
+
+  getInitials = () => this.get('div[data-uie-name="element-avatar-initials"]');
+  getServiceIcon = () => this.get('div[data-uie-name="element-avatar-service-icon"]');
+  getUserBadgeIcon = (state?: STATE) =>
+    this.get(`div[data-uie-name="element-avatar-user-badge-icon"]${state ? `[data-uie-value="${state}"]` : ''}`);
+  getGuestExpirationCircle = () => this.get('svg[data-uie-name="element-avatar-guest-expiration-circle"]');
+}
+
+describe('TemporaryGuestAvatar', () => {
+  it('shows expiration circle', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isTemporaryGuest(true);
+
+    const temporaryGuestAvatar = new TemporaryGuestAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.NONE,
+    });
+
+    expect(temporaryGuestAvatar.getGuestExpirationCircle().exists()).toBe(true);
+  });
+
+  it('shows participant initials', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isTemporaryGuest(true);
+
+    const temporaryGuestAvatar = new TemporaryGuestAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.NONE,
+    });
+
+    expect(temporaryGuestAvatar.getInitials().exists()).toBe(true);
+    expect(temporaryGuestAvatar.getInitials().text()).toBe('AB');
+  });
+
+  it('does not show avatar badge in default state', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isTemporaryGuest(true);
+
+    const temporaryGuestAvatar = new TemporaryGuestAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.NONE,
+    });
+
+    expect(temporaryGuestAvatar.getUserBadgeIcon().exists()).toBe(false);
+  });
+
+  it('shows avatar badge for blocked user', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+    participant.isTemporaryGuest(true);
+
+    const temporaryGuestAvatar = new TemporaryGuestAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.BLOCKED,
+    });
+
+    expect(temporaryGuestAvatar.getUserBadgeIcon(STATE.BLOCKED).exists()).toBe(true);
+  });
+});
diff --git a/src/script/components/participantAvatar/TemporaryGuestAvatar.tsx b/src/script/components/participantAvatar/TemporaryGuestAvatar.tsx
new file mode 100644
index 00000000000..210552a34f9
--- /dev/null
+++ b/src/script/components/participantAvatar/TemporaryGuestAvatar.tsx
@@ -0,0 +1,94 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import {CSS_FILL_PARENT} from 'Util/CSSMixin';
+
+import {User} from '../../entity/User';
+
+import {AVATAR_SIZE, STATE, DIAMETER} from '../ParticipantAvatar';
+import AvatarBackground from './AvatarBackground';
+import AvatarInitials from './AvatarInitials';
+import AvatarBadge from './AvatarBadge';
+import AvatarBorder from './AvatarBorder';
+import AvatarWrapper from './AvatarWrapper';
+import {shouldShowBadge} from './UserAvatar';
+
+export interface TemporaryGuestAvatarProps {
+  noBadge?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  participant: User;
+  size: AVATAR_SIZE;
+  state: STATE;
+}
+
+const TemporaryGuestAvatar: React.FunctionComponent<TemporaryGuestAvatarProps> = ({
+  size,
+  participant,
+  noBadge,
+  state,
+  onClick,
+}) => {
+  const borderScale = 0.9916;
+  const finalBorderWidth = size === AVATAR_SIZE.X_LARGE ? 4 : 1;
+  const remainingTime = participant.expirationRemaining();
+  const normalizedRemainingTime = remainingTime / User.CONFIG.TEMPORARY_GUEST.LIFETIME;
+
+  const borderWidth = (finalBorderWidth / DIAMETER[size]) * 32;
+  const borderRadius = (16 - borderWidth / 2) * borderScale;
+  const timerLength = borderRadius * Math.PI * 2;
+  const timerOffset = timerLength * (normalizedRemainingTime - 1);
+
+  return (
+    <AvatarWrapper
+      color="rgba(50,54,57,0.08)"
+      title={participant.name()}
+      size={size}
+      onClick={onClick}
+      data-uie-name="element-avatar-temporary-guest"
+    >
+      <AvatarBackground />
+      <AvatarInitials color="var(--background)" size={size} initials={participant.initials()} />
+      {!noBadge && shouldShowBadge(size, state) && <AvatarBadge state={state} />}
+      <AvatarBorder />
+      <svg
+        css={{
+          ...CSS_FILL_PARENT,
+          position: 'absolute',
+        }}
+        data-uie-name="element-avatar-guest-expiration-circle"
+        viewBox="0 0 32 32"
+        stroke={participant.accent_color()}
+      >
+        <circle
+          cx="16"
+          cy="16"
+          transform="rotate(-90 16 16)"
+          fill="none"
+          strokeDasharray={timerLength}
+          strokeDashoffset={timerOffset}
+          r={borderRadius}
+          strokeWidth={borderWidth}
+        />
+      </svg>
+    </AvatarWrapper>
+  );
+};
+
+export default TemporaryGuestAvatar;
diff --git a/src/script/components/participantAvatar/UserAvatar.test.tsx b/src/script/components/participantAvatar/UserAvatar.test.tsx
new file mode 100644
index 00000000000..f334413ac6f
--- /dev/null
+++ b/src/script/components/participantAvatar/UserAvatar.test.tsx
@@ -0,0 +1,113 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import UserAvatar, {UserAvatarProps} from './UserAvatar';
+import TestPage from 'Util/test/TestPage';
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+import {AVATAR_SIZE, STATE} from '../ParticipantAvatar';
+
+class UserAvatarPage extends TestPage<UserAvatarProps> {
+  constructor(props?: UserAvatarProps) {
+    super(UserAvatar, props);
+  }
+
+  getInitials = () => this.get('div[data-uie-name="element-avatar-initials"]');
+  getUserBadgeIcon = (state?: STATE) =>
+    this.get(`div[data-uie-name="element-avatar-user-badge-icon"]${state ? `[data-uie-value="${state}"]` : ''}`);
+}
+
+describe('UserAvatar', () => {
+  it('shows participant initials if no avatar is defined', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const userAvatar = new UserAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.NONE,
+    });
+
+    expect(userAvatar.getInitials().exists()).toBe(true);
+    expect(userAvatar.getInitials().text()).toBe('AB');
+  });
+
+  it('shows single initial character when avatar size is extra small', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const userAvatar = new UserAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.X_SMALL,
+      state: STATE.NONE,
+    });
+
+    expect(userAvatar.getInitials().exists()).toBe(true);
+    expect(userAvatar.getInitials().text()).toBe('A');
+  });
+
+  it('does not show avatar badge in default state', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const userAvatar = new UserAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.NONE,
+    });
+
+    expect(userAvatar.getUserBadgeIcon().exists()).toBe(false);
+  });
+
+  it('shows avatar badge for blocked user', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const userAvatar = new UserAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.BLOCKED,
+    });
+
+    expect(userAvatar.getUserBadgeIcon(STATE.BLOCKED).exists()).toBe(true);
+  });
+
+  it('shows avatar badge for connection request', async () => {
+    const assetRepoSpy = (jasmine.createSpy() as unknown) as AssetRepository;
+    const participant = new User('id');
+    participant.name('Anton Bertha');
+
+    const userAvatar = new UserAvatarPage({
+      assetRepository: assetRepoSpy,
+      participant: participant,
+      size: AVATAR_SIZE.LARGE,
+      state: STATE.PENDING,
+    });
+
+    expect(userAvatar.getUserBadgeIcon(STATE.PENDING).exists()).toBe(true);
+  });
+});
diff --git a/src/script/components/participantAvatar/UserAvatar.tsx b/src/script/components/participantAvatar/UserAvatar.tsx
new file mode 100644
index 00000000000..e5f6aeb8764
--- /dev/null
+++ b/src/script/components/participantAvatar/UserAvatar.tsx
@@ -0,0 +1,85 @@
+/*
+ * Wire
+ * Copyright (C) 2020 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React from 'react';
+import {COLOR} from '@wireapp/react-ui-kit';
+
+import {User} from '../../entity/User';
+import {AssetRepository} from '../../assets/AssetRepository';
+
+import {AVATAR_SIZE, STATE} from '../ParticipantAvatar';
+import AvatarBackground from './AvatarBackground';
+import AvatarImage from './AvatarImage';
+import AvatarInitials from './AvatarInitials';
+import AvatarBadge from './AvatarBadge';
+import AvatarBorder from './AvatarBorder';
+import AvatarWrapper from './AvatarWrapper';
+
+export interface UserAvatarProps {
+  assetRepository: AssetRepository;
+  noBadge?: boolean;
+  noFilter?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  participant: User;
+  size: AVATAR_SIZE;
+  state: STATE;
+}
+
+export const shouldShowBadge = (size: AVATAR_SIZE, state: STATE): boolean => {
+  const isTooSmall = [AVATAR_SIZE.X_SMALL, AVATAR_SIZE.XX_SMALL, AVATAR_SIZE.XXX_SMALL].includes(size);
+  const isBadgeState = [STATE.PENDING, STATE.BLOCKED].includes(state);
+  return !isTooSmall && isBadgeState;
+};
+
+const UserAvatar: React.FunctionComponent<UserAvatarProps> = ({
+  assetRepository,
+  participant,
+  size,
+  noBadge,
+  noFilter,
+  state,
+  onClick,
+}) => {
+  const isImageGrey = !noFilter && [STATE.BLOCKED, STATE.IGNORED, STATE.PENDING, STATE.UNKNOWN].includes(state);
+  const backgroundColor = state === STATE.UNKNOWN ? COLOR.GRAY : undefined;
+  return (
+    <AvatarWrapper
+      color={participant.accent_color()}
+      title={participant.name()}
+      size={size}
+      onClick={onClick}
+      data-uie-name="element-avatar-user"
+    >
+      <AvatarBackground backgroundColor={backgroundColor} />
+      <AvatarInitials size={size} initials={participant.initials()} />
+      <AvatarImage
+        assetRepository={assetRepository}
+        size={size}
+        isGrey={isImageGrey}
+        backgroundColor={backgroundColor}
+        previewPicture={participant.previewPictureResource()}
+        mediumPicture={participant.mediumPictureResource()}
+      />
+      {!noBadge && shouldShowBadge(size, state) && <AvatarBadge state={state} />}
+      {!isImageGrey && <AvatarBorder />}
+    </AvatarWrapper>
+  );
+};
+
+export default UserAvatar;
diff --git a/src/script/components/serviceList.ts b/src/script/components/serviceList.ts
index 4a10939ebf6..7abfc63f44c 100644
--- a/src/script/components/serviceList.ts
+++ b/src/script/components/serviceList.ts
@@ -21,7 +21,7 @@ import ko from 'knockout';
 
 import {noop} from 'Util/util';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 
 import 'Components/list/participantItem';
 import type {ServiceEntity} from '../integration/ServiceEntity';
@@ -65,7 +65,7 @@ class ServiceList {
     this.isCompactMode = this.mode === ServiceList.MODE.COMPACT;
     this.isDefaultMode = this.mode === ServiceList.MODE.DEFAULT;
 
-    this.avatarSize = this.isCompactMode ? ParticipantAvatar.SIZE.LARGE : ParticipantAvatar.SIZE.SMALL;
+    this.avatarSize = this.isCompactMode ? AVATAR_SIZE.LARGE : AVATAR_SIZE.SMALL;
 
     this.cssClasses = ko.pureComputed(() => (this.isCompactMode ? 'search-list-sm' : 'search-list-lg'));
   }
diff --git a/src/script/components/topPeople.ts b/src/script/components/topPeople.ts
index b77954e23f0..3d42eaf8044 100644
--- a/src/script/components/topPeople.ts
+++ b/src/script/components/topPeople.ts
@@ -19,7 +19,7 @@
 
 import ko from 'knockout';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import type {User} from '../entity/User';
 
 interface TopPeopleParams {
@@ -32,13 +32,13 @@ class TopPeople {
   click: (userEntity: User, event: Event) => void;
   maxUsers: number;
   userEntities: ko.Observable<User[]>;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   displayedUsers: ko.PureComputed<User[]>;
 
   constructor(params: TopPeopleParams) {
     this.click = params.click;
     this.maxUsers = params.max || 9;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
     this.userEntities = params.users;
 
     this.displayedUsers = ko.pureComputed(() => this.userEntities().slice(0, this.maxUsers));
@@ -55,7 +55,7 @@ ko.components.register('top-people', {
   template: `
     <div class="search-list search-list-sm" data-bind="foreach: {data: displayedUsers}">
       <div class="search-list-item" data-bind="click: $parent.onUserClick, attr: {'data-uie-uid': $data.id, 'data-uie-value': $data.name(), 'data-uie-status': $data.connection().status()}" data-uie-name="item-user">
-        <participant-avatar class="search-list-item-image" params="participant: $data, delay: 300, size: $parent.ParticipantAvatar.SIZE.LARGE"></participant-avatar>
+        <participant-avatar class="search-list-item-image" params="participant: $data, delay: 300, size: $parent.AVATAR_SIZE.LARGE"></participant-avatar>
         <div class="search-list-item-content">
           <div class="search-list-item-content-name" data-bind="text: name"></div>
         </div>
diff --git a/src/script/entity/User.ts b/src/script/entity/User.ts
index 1b3bc7eb750..fb02bd5de89 100644
--- a/src/script/entity/User.ts
+++ b/src/script/entity/User.ts
@@ -144,8 +144,8 @@ export class User {
 
     this.username = ko.observable('');
 
-    this.previewPictureResource = ko.observable();
-    this.mediumPictureResource = ko.observable();
+    this.previewPictureResource = ko.observable().extend({rateLimit: {method: 'notifyWhenChangesStop', timeout: 100}});
+    this.mediumPictureResource = ko.observable().extend({rateLimit: {method: 'notifyWhenChangesStop', timeout: 100}});
 
     this.connection = ko.observable(new ConnectionEntity());
 
diff --git a/src/script/util/CSSMixin.ts b/src/script/util/CSSMixin.ts
index 837cd881103..ae3d3d30107 100644
--- a/src/script/util/CSSMixin.ts
+++ b/src/script/util/CSSMixin.ts
@@ -30,3 +30,31 @@ export const CSS_SQUARE: (size: number | string) => CSSObject = size => ({
   height: size,
   width: size,
 });
+
+export const CSS_FILL_PARENT: CSSObject = {
+  bottom: 0,
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+};
+
+export const CSS_FLEX_CENTER: CSSObject = {
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+};
+
+export const CSS_ICON: (code: string, iconSize?: string | number) => CSSObject = (code, iconSize = '16px') => ({
+  MozOsxFontSmoothing: 'grayscale',
+  WebkitFontSmoothing: 'antialiased',
+  content: `'${code}'`,
+  fontFamily: 'Wire',
+  fontSize: iconSize,
+  fontStyle: 'normal',
+  fontVariant: 'normal',
+  fontWeight: 'normal',
+  lineHeight: 1,
+  speak: 'none',
+  textTransform: 'none',
+});
diff --git a/src/script/util/ComponentUtil.ts b/src/script/util/ComponentUtil.ts
index 4924eea4976..e2781eb1369 100644
--- a/src/script/util/ComponentUtil.ts
+++ b/src/script/util/ComponentUtil.ts
@@ -18,6 +18,7 @@
  */
 
 import ko from 'knockout';
+import {container, InjectionToken} from 'tsyringe';
 
 export function registerReactComponent(
   name: string,
@@ -25,7 +26,13 @@ export function registerReactComponent(
     template,
     component,
     optionalParams = [],
-  }: {component: React.ComponentType; optionalParams?: string[]; template: string},
+    injected = {},
+  }: {
+    component: React.ComponentType;
+    injected?: Record<string, InjectionToken>;
+    optionalParams?: string[];
+    template: string;
+  },
 ) {
   ko.components.register(name, {
     template: template,
@@ -35,6 +42,9 @@ export function registerReactComponent(
           knockoutParams[param] = null;
         }
       });
+      Object.entries(injected).forEach(([injectedName, injectedClass]) => {
+        knockoutParams[injectedName] = container.resolve(injectedClass);
+      });
       Object.assign(this, knockoutParams);
       this.reactComponent = component;
     },
diff --git a/src/script/view_model/content/ConnectRequestsViewModel.ts b/src/script/view_model/content/ConnectRequestsViewModel.ts
index 7c2fc60dd73..6a5f191208f 100644
--- a/src/script/view_model/content/ConnectRequestsViewModel.ts
+++ b/src/script/view_model/content/ConnectRequestsViewModel.ts
@@ -21,7 +21,7 @@ import ko from 'knockout';
 import {scrollToBottom} from 'Util/scroll-helpers';
 import {isLastItem} from 'Util/ArrayUtil';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {MainViewModel} from '../MainViewModel';
 import {UserRepository} from '../../user/UserRepository';
 import {ActionsViewModel} from '../ActionsViewModel';
@@ -30,13 +30,13 @@ import {User} from '../../entity/User';
 export class ConnectRequestsViewModel {
   actionsViewModel: ActionsViewModel;
   connectRequests: ko.Computed<User[]>;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   shouldUpdateScrollbar: ko.Computed<User[]>;
 
   constructor(private readonly mainViewModel: MainViewModel, private readonly userRepository: UserRepository) {
     this.actionsViewModel = this.mainViewModel.actions;
     this.connectRequests = this.userRepository.connectRequests;
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
 
     this.shouldUpdateScrollbar = ko.computed(() => this.connectRequests()).extend({notify: 'always', rateLimit: 500});
   }
diff --git a/src/script/view_model/content/InputBarViewModel.ts b/src/script/view_model/content/InputBarViewModel.ts
index 7b7b5e980af..6e53f3a6f2d 100644
--- a/src/script/view_model/content/InputBarViewModel.ts
+++ b/src/script/view_model/content/InputBarViewModel.ts
@@ -29,7 +29,7 @@ import {afterRender, formatBytes} from 'Util/util';
 import {allowsAllFiles, hasAllowedExtension, getFileExtensionOrName} from 'Util/FileTypeUtil';
 import {renderMessage} from 'Util/messageRenderer';
 import {KEY, isFunctionKey, insertAtCaret} from 'Util/KeyboardUtil';
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 
 import {ModalsViewModel} from '../ModalsViewModel';
 
@@ -77,7 +77,7 @@ export class InputBarViewModel {
   private textarea: HTMLTextAreaElement;
   private readonly selectionStart: ko.Observable<number>;
   private readonly selectionEnd: ko.Observable<number>;
-  readonly participantAvatarSize = ParticipantAvatar.SIZE.X_SMALL;
+  readonly participantAvatarSize = AVATAR_SIZE.X_SMALL;
   readonly conversationEntity: ko.Observable<Conversation>;
   readonly selfUser: ko.Observable<User>;
   private readonly conversationHasFocus: ko.Observable<boolean>;
diff --git a/src/script/view_model/content/PreferencesAccountViewModel.ts b/src/script/view_model/content/PreferencesAccountViewModel.ts
index 2bbb660f26b..a836b8b8735 100644
--- a/src/script/view_model/content/PreferencesAccountViewModel.ts
+++ b/src/script/view_model/content/PreferencesAccountViewModel.ts
@@ -44,7 +44,7 @@ import {ConsentValue} from '../../user/ConsentValue';
 import {validateCharacter, validateHandle} from '../../user/UserHandleGenerator';
 import {UserRepository} from '../../user/UserRepository';
 import {nameFromType} from '../../user/AvailabilityMapper';
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {AvailabilityContextMenu} from '../../ui/AvailabilityContextMenu';
 import {MotionDuration} from '../../motion/MotionDuration';
 import {ContentViewModel} from '../ContentViewModel';
@@ -90,7 +90,7 @@ export class PreferencesAccountViewModel {
   optionReadReceipts: ko.Observable<Confirmation.Type>;
   optionMarketingConsent: ko.Observable<boolean | ConsentValue>;
   optionResetAppLock: boolean;
-  ParticipantAvatar: typeof ParticipantAvatar;
+  AVATAR_SIZE: typeof AVATAR_SIZE;
   isMacOsWrapper: boolean;
   manageTeamUrl: string;
   createTeamUrl: string;
@@ -178,7 +178,7 @@ export class PreferencesAccountViewModel {
     this.optionMarketingConsent = this.propertiesRepository.marketingConsent;
 
     this.optionResetAppLock = isAppLockEnabled();
-    this.ParticipantAvatar = ParticipantAvatar;
+    this.AVATAR_SIZE = AVATAR_SIZE;
 
     this.isMacOsWrapper = Runtime.isDesktopApp() && Runtime.isMacOS();
     this.manageTeamUrl = getManageTeamUrl('client_settings');
diff --git a/src/script/view_model/content/ServiceModalViewModel.ts b/src/script/view_model/content/ServiceModalViewModel.ts
index 1a15f8fa38f..cd9ffafd7f2 100644
--- a/src/script/view_model/content/ServiceModalViewModel.ts
+++ b/src/script/view_model/content/ServiceModalViewModel.ts
@@ -17,7 +17,7 @@
  *
  */
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import ko from 'knockout';
 
 import type {IntegrationRepository} from '../../integration/IntegrationRepository';
@@ -35,7 +35,7 @@ export class ServiceModalViewModel {
   ) {
     this.isVisible = ko.observable(false);
     this.service = ko.observable(null);
-    this.avatarSize = ParticipantAvatar.SIZE.LARGE;
+    this.avatarSize = AVATAR_SIZE.LARGE;
   }
 
   showService = (service: ServiceEntity) => {
diff --git a/src/script/view_model/list/ConversationListViewModel.ts b/src/script/view_model/list/ConversationListViewModel.ts
index 36075b2a054..2d102bfd4e4 100644
--- a/src/script/view_model/list/ConversationListViewModel.ts
+++ b/src/script/view_model/list/ConversationListViewModel.ts
@@ -25,7 +25,7 @@ import 'Components/list/groupedConversations';
 import ko from 'knockout';
 import {amplify} from 'amplify';
 
-import {ParticipantAvatar} from 'Components/participantAvatar';
+import {AVATAR_SIZE} from 'Components/ParticipantAvatar';
 import {PROPERTIES_TYPE} from '../../properties/PropertiesType';
 import {t} from 'Util/LocalizerUtil';
 import {getLogger, Logger} from 'Util/Logger';
@@ -68,7 +68,7 @@ export class ConversationListViewModel {
   readonly showConnectRequests: ko.PureComputed<boolean>;
   readonly selfAvailability: ko.PureComputed<Availability.Type>;
   readonly getConversationUrl: (conversationId: string) => string;
-  readonly participantAvatarSize: typeof ParticipantAvatar.SIZE.SMALL;
+  readonly participantAvatarSize: typeof AVATAR_SIZE.SMALL;
   readonly getIsVisibleFunc: () => (() => boolean) | ((top: number, bottom: number) => boolean);
   private readonly logger: Logger;
   private readonly selfUser: ko.PureComputed<User>;
@@ -95,7 +95,7 @@ export class ConversationListViewModel {
     private readonly userRepository: UserRepository,
     private readonly propertiesRepository: PropertiesRepository,
   ) {
-    this.participantAvatarSize = ParticipantAvatar.SIZE.SMALL;
+    this.participantAvatarSize = AVATAR_SIZE.SMALL;
 
     this.contentViewModel = mainViewModel.content;
     this.callingViewModel = mainViewModel.calling;
diff --git a/src/style/components/list/conversation-list-calling-cell.less b/src/style/components/list/conversation-list-calling-cell.less
index b7bf4756887..2976fb59de2 100644
--- a/src/style/components/list/conversation-list-calling-cell.less
+++ b/src/style/components/list/conversation-list-calling-cell.less
@@ -143,16 +143,6 @@
 
       &__image {
         width: 48px;
-
-        participant-avatar {
-          width: 16px;
-          height: 16px;
-
-          .avatar-initials {
-            font-size: 8px;
-            line-height: 16px;
-          }
-        }
       }
 
       .availability-state-icon {
diff --git a/src/style/components/participant-avatar.less b/src/style/components/participant-avatar.less
deleted file mode 100644
index 75a3a5d46c4..00000000000
--- a/src/style/components/participant-avatar.less
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see http://www.gnu.org/licenses/.
- *
- */
-
-.avatar-size(@size) {
-  @diameter: 'avatar-diameter-@{size}';
-  @initials: 'avatar-initials-@{size}';
-  .square(@@diameter);
-  .avatar-initials {
-    font-size: @@initials;
-    line-height: @@diameter;
-  }
-}
-
-participant-avatar {
-  position: relative;
-  display: inline-block;
-  transform: translateZ(0);
-  user-select: none;
-
-  &.avatar-no-border {
-    .avatar-border {
-      display: none;
-    }
-  }
-
-  &.avatar-no-badge {
-    .avatar-badge {
-      display: none;
-    }
-  }
-
-  &.avatar-no-filter {
-    .avatar-image {
-      filter: none !important;
-    }
-  }
-
-  .avatar-border {
-    border: 1px solid fade(#000, 8%);
-  }
-
-  .participant-avatar {
-    .full-screen;
-
-    overflow: hidden;
-    & > div {
-      .full-screen;
-    }
-
-    &.pending,
-    &.blocked,
-    &.unknown,
-    &.ignored {
-      .avatar-image {
-        filter: grayscale(100%);
-      }
-
-      .avatar-border {
-        display: none;
-      }
-    }
-
-    &.selected,
-    &.pending,
-    &.blocked {
-      .avatar-badge {
-        background-color: fade(#000, 56%);
-      }
-    }
-
-    &.selected {
-      .avatar-badge::before {
-        .icon-mixin('\e102', @icon-size-sm); // icon-check
-      }
-    }
-
-    &.pending {
-      .avatar-badge::before {
-        .icon-mixin('\e165', @icon-size-sm); // icon-pending
-      }
-    }
-
-    &.blocked {
-      .avatar-badge::before {
-        .icon-mixin('\e104', @icon-size-sm); // icon-block
-      }
-    }
-
-    &.camera {
-      .avatar-badge::before {
-        .icon-mixin('\e143', @icon-size-lg); // icon-camera
-      }
-    }
-
-    &.unknown {
-      .avatar-background {
-        background-color: @w-gray;
-      }
-    }
-  }
-
-  &.avatar-xl {
-    .avatar-size(xl);
-
-    .avatar-service-placeholder service-icon svg {
-      width: 100%;
-    }
-  }
-
-  &.avatar-l {
-    .avatar-size(l);
-
-    .avatar-service-placeholder service-icon svg {
-      width: 100%;
-    }
-  }
-
-  &.avatar-m {
-    .avatar-size(m);
-  }
-
-  &.avatar-s {
-    .avatar-size(s);
-  }
-
-  &.avatar-xs {
-    .avatar-size(xs);
-  }
-
-  &.avatar-xxs {
-    .avatar-size(xxs);
-  }
-
-  &.avatar-xxxs {
-    .avatar-size(xxxs);
-  }
-
-  &.avatar-xs,
-  &.avatar-xxs,
-  &.avatar-xxxs {
-    .avatar-image,
-    .avatar-service-placeholder {
-      .no-transition;
-    }
-
-    .avatar-badge {
-      display: none;
-    }
-  }
-
-  .avatar-badge {
-    .flex-center;
-
-    color: #fff;
-  }
-
-  .avatar-initials {
-    .text-center;
-
-    color: #fff;
-    user-select: none;
-  }
-
-  .avatar-background {
-    background-color: currentColor;
-    transform: scale(0.9916);
-  }
-
-  .avatar-image {
-    opacity: 0;
-    transform: scale(0.88);
-
-    > img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &.avatar-loading-transition {
-    .avatar-initials,
-    .avatar-service-placeholder {
-      transition: opacity @animation-timing-faster @ease-in-quart;
-    }
-
-    .avatar-image {
-      transition: all @animation-timing-slow @ease-out-quart @animation-timing-faster;
-    }
-  }
-
-  &.avatar-image-loaded {
-    .avatar-initials,
-    .avatar-service-placeholder {
-      opacity: 0;
-    }
-
-    .avatar-image {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  .avatar-service-placeholder,
-  .avatar-service-placeholder service-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 60%;
-
-      & > path {
-        fill: var(--background-fade-24);
-      }
-    }
-  }
-
-  &.service-avatar {
-    &,
-    .avatar-border,
-    .avatar-background,
-    .avatar-image > img {
-      border-radius: 20%;
-    }
-  }
-
-  &.user-avatar {
-    &,
-    .avatar-border,
-    .avatar-background,
-    .avatar-badge,
-    .avatar-image > img {
-      border-radius: 50%;
-    }
-  }
-}
-
-.avatar-halo {
-  .flex-center;
-  .square(36px);
-
-  &.avatar-halo-active {
-    border-width: 2px;
-    border-style: solid;
-    border-color: var(--accent-color);
-
-    border-radius: 50%;
-  }
-}
-
-&.accent-color-temporary .avatar-initials {
-  color: var(--background);
-}
-
-.avatar-temporary-guest-border {
-  position: absolute;
-}
diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
index 20b07770f76..b173051d1e2 100644
--- a/src/style/content/conversation/message-list.less
+++ b/src/style/content/conversation/message-list.less
@@ -87,10 +87,6 @@
     }
   }
 
-  participant-avatar {
-    cursor: pointer;
-  }
-
   .message-mention {
     color: var(--accent-color);
     font-weight: @font-weight-bold;
diff --git a/src/style/content/preferences/account.less b/src/style/content/preferences/account.less
index 900ad54d8f3..541f58fb46d 100644
--- a/src/style/content/preferences/account.less
+++ b/src/style/content/preferences/account.less
@@ -170,10 +170,6 @@
     }
   }
 
-  > participant-avatar {
-    pointer-events: none;
-  }
-
   > input {
     position: absolute;
     left: @offscreen-left;
diff --git a/src/style/foundation/main.less b/src/style/foundation/main.less
index de16df06661..9897b0b90b7 100644
--- a/src/style/foundation/main.less
+++ b/src/style/foundation/main.less
@@ -55,7 +55,6 @@
 @import '../components/group-list';
 @import '../components/user-list';
 @import '../components/user-input';
-@import '../components/participant-avatar';
 @import '../components/availability-state';
 @import '../components/image';
 @import '../components/context-menu';
diff --git a/test/unit_tests/components/list/conversationListCallingCellSpec.js b/test/unit_tests/components/list/conversationListCallingCellSpec.js
index 63ad79df00a..06bd5858f5d 100644
--- a/test/unit_tests/components/list/conversationListCallingCellSpec.js
+++ b/test/unit_tests/components/list/conversationListCallingCellSpec.js
@@ -43,11 +43,13 @@ describe('conversationListCallingCell', () => {
       isMuted: () => false,
       supportsScreenSharing: () => true,
     };
+    const conversation = new Conversation();
+    conversation.participating_user_ets([new User('id')]);
     defaultParams = {
       call: new Call(),
       callActions: {},
       callingRepository: mockedCallingRepository,
-      conversation: () => new Conversation(),
+      conversation: () => conversation,
       hasAccessToCamera: () => true,
       multitasking: {isMinimized: () => false},
       videoGrid: () => ({grid: []}),
diff --git a/yarn.lock b/yarn.lock
index 9a8f7fbee47..764f35a8579 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1796,6 +1796,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-transition-group@4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@16.9.53":
   version "16.9.53"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.53.tgz#40cd4f8b8d6b9528aedd1fff8fcffe7a112a3d23"