From 2bcd8e3e3dd43e17634086d2bed28a59f043e646 Mon Sep 17 00:00:00 2001
From: Simona Domnisoru <simona.domnisoru@gmail.com>
Date: Mon, 22 Jan 2024 15:05:21 +0100
Subject: [PATCH] feat: use UserAvatar component

---
 i18n/en.pot                                     | 17 +++++++----------
 .../WidgetAssignee/DisplayMode.component.js     | 17 +++++++++++------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index f0122cd94e..cfe2c464c0 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-01-05T14:09:35.742Z\n"
-"PO-Revision-Date: 2024-01-05T14:09:35.742Z\n"
+"POT-Creation-Date: 2024-01-22T13:52:51.172Z\n"
+"PO-Revision-Date: 2024-01-22T13:52:51.172Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1098,12 +1098,15 @@ msgstr "To work with the selected program,"
 msgid "open the Tracker Capture app"
 msgstr "open the Tracker Capture app"
 
-msgid "Event assigned to {{name}}"
-msgstr "Event assigned to {{name}}"
+msgid "Assigned to"
+msgstr "Assigned to"
 
 msgid "You don't have access to edit this assignee"
 msgstr "You don't have access to edit this assignee"
 
+msgid "Edit"
+msgstr "Edit"
+
 msgid "No one is assigned to this event"
 msgstr "No one is assigned to this event"
 
@@ -1188,9 +1191,6 @@ msgstr "Latitude"
 msgid "Longitude"
 msgstr "Longitude"
 
-msgid "Edit"
-msgstr "Edit"
-
 msgid "Set coordinates"
 msgstr "Set coordinates"
 
@@ -1386,9 +1386,6 @@ msgstr "This stage can only have one event"
 msgid "Events could not be retrieved. Please try again later."
 msgstr "Events could not be retrieved. Please try again later."
 
-msgid "Assigned to"
-msgstr "Assigned to"
-
 msgid "{{ totalEvents }} events"
 msgstr "{{ totalEvents }} events"
 
diff --git a/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js b/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
index e0ff6861da..41216aa6ad 100644
--- a/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
+++ b/src/core_modules/capture-core/components/WidgetAssignee/DisplayMode.component.js
@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { IconEdit24, Button, spacers } from '@dhis2/ui';
+import { Button, spacers, UserAvatar } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { Assignee } from './WidgetAssignee.types';
@@ -12,14 +12,14 @@ const styles = () => ({
         alignItems: 'center',
     },
     editButton: {
-        border: 'none !important',
-        borderRadius: '50% !important',
-        padding: '0px 6px !important',
         margin: spacers.dp4,
     },
     assignButton: {
         margin: spacers.dp4,
     },
+    avatar: {
+        margin: spacers.dp4,
+    },
 });
 
 type Props = {
@@ -32,7 +32,11 @@ type Props = {
 const DisplayModePlain = ({ assignee, onEdit, writeAccess, classes }: Props) => (
     assignee ? (
         <div className={classes.wrapper}>
-            {i18n.t('Event assigned to {{name}}', { name: assignee.name })}
+            <div>
+                {i18n.t('Assigned to')}
+                <UserAvatar name={assignee.name} className={classes.avatar} />
+                {assignee.name}
+            </div>
             <ConditionalTooltip
                 content={i18n.t("You don't have access to edit this assignee")}
                 enabled={!writeAccess}
@@ -42,8 +46,9 @@ const DisplayModePlain = ({ assignee, onEdit, writeAccess, classes }: Props) =>
                     className={classes.editButton}
                     dataTest="widget-assignee-edit"
                     disabled={!writeAccess}
+                    secondary
                 >
-                    <IconEdit24 />
+                    {i18n.t('Edit')}
                 </Button>
             </ConditionalTooltip>
         </div>