From 67fbf932eed64063b717106da87a4cebfc2ae6da Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 17 Nov 2023 18:53:41 +0530
Subject: [PATCH 1/2] change firends autocomplete default avatar

---
 .../src/components/people/JKFriendsAutoComplete.js  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/jam-ui/src/components/people/JKFriendsAutoComplete.js b/jam-ui/src/components/people/JKFriendsAutoComplete.js
index a40131d82..cd139883c 100644
--- a/jam-ui/src/components/people/JKFriendsAutoComplete.js
+++ b/jam-ui/src/components/people/JKFriendsAutoComplete.js
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PropTypes } from 'prop-types';
 import Avatar from '../common/Avatar';
+import JKProfileAvatar from '../profile/JKProfileAvatar';
 import { useResponsive } from '@farfetch/react-context-responsive';
 
 function JKFriendsAutoComplete({ friends, onSelect }) {
@@ -108,10 +109,14 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
       <ListGroup className={showDropdown ? 'd-block' : 'd-none'} data-testid="autocomplete-list">
         {filteredFriends.map(f => (
           <ListGroupItem key={f.id} onMouseOver={highlight} onMouseOut={unhighlight} onClick={() => handleOnClick(f)}>
-            <Avatar src={f.photo_url} size="m" />
-            <span className="ml-1" style={{ cursor: 'pointer' }}>
-              {f.first_name} {f.last_name}
-            </span>
+            <div style={{ display: "grid", gridTemplateColumns: "30px auto", columnGap: "5px"}}>
+              <div>
+                <JKProfileAvatar src={f.photo_url} size="m" /> 
+              </div>
+              <div>
+                {f.first_name} {f.last_name}
+              </div>
+            </div>
           </ListGroupItem>
         ))}
       </ListGroup>

From 3062238465fd0dd697eda4806eb3c71d18a510c0 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 17 Nov 2023 22:35:40 +0530
Subject: [PATCH 2/2] fix errornious src value to profile avatar image

---
 jam-ui/src/components/people/JKFriendsAutoComplete.js | 1 -
 jam-ui/src/components/people/JKSelectFriendsModal.js  | 4 ++--
 jam-ui/src/components/profile/JKProfileAvatar.js      | 6 +++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/jam-ui/src/components/people/JKFriendsAutoComplete.js b/jam-ui/src/components/people/JKFriendsAutoComplete.js
index cd139883c..aedcaa5b1 100644
--- a/jam-ui/src/components/people/JKFriendsAutoComplete.js
+++ b/jam-ui/src/components/people/JKFriendsAutoComplete.js
@@ -4,7 +4,6 @@ import JKSelectFriendsModal from './JKSelectFriendsModal';
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { PropTypes } from 'prop-types';
-import Avatar from '../common/Avatar';
 import JKProfileAvatar from '../profile/JKProfileAvatar';
 import { useResponsive } from '@farfetch/react-context-responsive';
 
diff --git a/jam-ui/src/components/people/JKSelectFriendsModal.js b/jam-ui/src/components/people/JKSelectFriendsModal.js
index 6acb931f1..a6b0dff3d 100644
--- a/jam-ui/src/components/people/JKSelectFriendsModal.js
+++ b/jam-ui/src/components/people/JKSelectFriendsModal.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, ListGroup, ListGroupItem, Input } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import Avatar from '../common/Avatar';
+import JKProfileAvatar from '../profile/JKProfileAvatar';
 
 function JKSelectFriendsModal({ show, friends, onSubmit, toggleVisibility }) {
   const [modal, setModal] = useState(false);
@@ -44,7 +44,7 @@ function JKSelectFriendsModal({ show, friends, onSubmit, toggleVisibility }) {
             {friends.map(f => (
               <ListGroupItem key={f.id}>
                 <Input type="checkbox" onClick={onCheckBoxClick} value={f.id} />
-                <Avatar src={f.photo_url} size="m" />
+                <JKProfileAvatar src={f.photo_url} size="m" />
                 <span className='ml-1'>
                   {f.first_name} {f.last_name}
                 </span>
diff --git a/jam-ui/src/components/profile/JKProfileAvatar.js b/jam-ui/src/components/profile/JKProfileAvatar.js
index 7d6fe408e..1ad241e80 100644
--- a/jam-ui/src/components/profile/JKProfileAvatar.js
+++ b/jam-ui/src/components/profile/JKProfileAvatar.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import defaultAvatarUrl from '../../assets/img/team/avatar.png';
 import Avatar from '../common/Avatar';
 
-const JKProfileAvatar = ({ url, size, className }) => {
+const JKProfileAvatar = ({ src, size, className }) => {
   const avatarUrl = () => {
-    if (url) {
-      return url;
+    if (src) {
+      return src;
     } else {
       return defaultAvatarUrl;
     }