feat: replace avatars with real images

src/ui/components/Avatar/Avatar.scss

@@ -30,6 +30,18 @@ ion-button.avatar-button {
     --background-activated: transparent;
   }
 
+  &.custom-image {
+    --background: transparent;
+    overflow: hidden;
+
+    .avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+  }
+
   span {
     color: var(--ion-color-neutral-700);
     text-align: center;

src/ui/components/Avatar/Avatar.tsx

@@ -3,29 +3,47 @@ import { useAppSelector } from "../../../store/hooks";
 import "./Avatar.scss";
 import { AvatarProps, MemberAvatarProps } from "./Avatar.types";
 import { getProfiles } from "../../../store/reducers/profileCache";
+import Mary from "../../assets/images/Mary.jpg";
+import Oliver from "../../assets/images/Oliver.jpg";
 
 const MemberAvatar = ({
   firstLetter,
   handleClick,
   rank,
+  imageSource,
 }: MemberAvatarProps) => {
   return (
     <IonButton
       shape="round"
       className={`avatar-button rank-${rank}${
         !handleClick ? " no-ripple" : ""
-      }`}
+      }${imageSource ? " custom-image" : ""}`}
       data-testid="avatar-button"
       onClick={handleClick}
     >
-      <span>{firstLetter}</span>
+      {imageSource ? (
+        <img
+          src={imageSource}
+          alt="Avatar"
+          className="avatar-image"
+        />
+      ) : (
+        <span>{firstLetter}</span>
+      )}
     </IonButton>
   );
 };
 
 const Avatar = ({ id, handleAvatarClick }: AvatarProps) => {
   const profiles = useAppSelector(getProfiles) || {};
   const getAvatarContent = (id: string) => {
+    if (id === "100") {
+      return { firstLetter: "", rank: 100, imageSource: Mary };
+    }
+    if (id === "101") {
+      return { firstLetter: "", rank: 101, imageSource: Oliver };
+    }
+
     const cache = profiles;
     const entries = Object.entries(cache).sort(
       ([, a], [, b]) =>
@@ -40,13 +58,14 @@ const Avatar = ({ id, handleAvatarClick }: AvatarProps) => {
     return { firstLetter, rank };
   };
 
-  const { firstLetter, rank } = getAvatarContent(id);
+  const { firstLetter, rank, imageSource } = getAvatarContent(id);
 
   return (
     <MemberAvatar
       firstLetter={firstLetter}
       rank={rank}
       handleClick={handleAvatarClick}
+      imageSource={imageSource}
     />
   );
 };

src/ui/components/Avatar/Avatar.types.ts

@@ -7,6 +7,7 @@ interface MemberAvatarProps {
   rank: number;
   firstLetter: string;
   handleClick?: () => void;
+  imageSource?: string;
 }
 
 export type { AvatarProps, MemberAvatarProps };

src/ui/components/CardList/CardList.tsx

@@ -11,6 +11,9 @@ import "./CardList.scss";
 import { CardItemProps, CardListProps } from "./CardList.types";
 import CitizenPortal from "../../assets/images/citizen-portal.svg";
 import Socialbook from "../../assets/images/socialbook.svg";
+import Mary from "../../assets/images/Mary.jpg";
+import Oliver from "../../assets/images/Oliver.jpg";
+import VitalRecordsAdmin from "../../assets/images/vital-records-admin.png";
 
 const CardInfo = <T extends object = object>({
   index,
@@ -51,6 +54,39 @@ const CardInfo = <T extends object = object>({
       );
     }
 
+    if (card.title === "Mary") {
+      return (
+        <img
+          src={Mary}
+          alt={card.title}
+          className="card-logo"
+          data-testid="card-logo"
+        />
+      );
+    }
+
+    if (card.title === "Oliver") {
+      return (
+        <img
+          src={Oliver}
+          alt={card.title}
+          className="card-logo"
+          data-testid="card-logo"
+        />
+      );
+    }
+
+    if (card.title === "Vital Records Admin") {
+      return (
+        <img
+          src={VitalRecordsAdmin}
+          alt={card.title}
+          className="card-logo"
+          data-testid="card-logo"
+        />
+      );
+    }
+
     if (card.image) {
       return (
         <img

src/ui/components/CredentialDetailModule/components/CredentialContent.tsx

@@ -60,7 +60,15 @@ const RelatedProfile = ({ identifierId }: IssuedIdentifierProps) => {
             className="related-identifier"
             data-testid="related-identifier-detail"
           >
-            <Avatar id={profile.identity.id} />
+            <Avatar
+              id={
+                profile.identity.displayName === "Mary"
+                  ? "100"
+                  : profile.identity.displayName === "Oliver"
+                  ? "101"
+                  : profile.identity.id
+              }
+            />
             <IonText
               className="identifier-name"
               data-testid="related-identifier-name"

src/ui/components/ProfileDetailsModal/ProfileDetailsModal.tsx

@@ -358,7 +358,15 @@ const ProfileDetailsModule = ({
                   <PageHeader
                     title={defaultName}
                     additionalButtons={
-                      <Avatar id={defaultProfile?.identity.id || ""} />
+                      <Avatar
+                        id={
+                          defaultProfile?.identity.displayName === "Mary"
+                            ? "100"
+                            : defaultProfile?.identity.displayName === "Oliver"
+                            ? "101"
+                            : defaultProfile?.identity.id || ""
+                        }
+                      />
                     }
                   />
                 }

src/ui/components/ProfileDetailsModal/components/IdentifierAttributeDetailModal/IdentifierAttributeDetailModal.tsx

@@ -51,7 +51,7 @@ const IdentifierAttributeDetailModal = ({
         avatar: (
           <MemberAvatar
             firstLetter={name.at(0)?.toLocaleUpperCase() || ""}
-            rank={rank}
+            rank={name === "Mary" ? 100 : name === "Oliver" ? 101 : rank}
           />
         ),
       };

src/ui/components/ProfileDetailsModal/components/ProfileContent.tsx

@@ -132,7 +132,15 @@ const ProfileContent = ({
   return (
     <>
       <div className="profile-info">
-        <Avatar id={cardData.id} />
+        <Avatar
+          id={
+            cardData.displayName === "Mary"
+              ? "100"
+              : cardData.displayName === "Oliver"
+              ? "101"
+              : cardData.id
+          }
+        />
         <IonGrid>
           <IonRow className="profile-info-row">
             <ProfileInformation
@@ -242,7 +250,13 @@ const ProfileContent = ({
                           firstLetter={
                             item.name.at(0)?.toLocaleUpperCase() || ""
                           }
-                          rank={item.rank}
+                          rank={
+                            item.name === "Mary"
+                              ? 100
+                              : item.name === "Oliver"
+                              ? 101
+                              : item.rank
+                          }
                         />
                       }
                       className="member"

src/ui/components/layout/TabLayout/TabLayout.scss

@@ -43,8 +43,10 @@
         margin-left: 0.5rem;
       }
 
-      &::part(native) {
-        padding: 0.5rem;
+      &:not(.avatar-button.custom-image) {
+        &::part(native) {
+          padding: 0.5rem;
+        }
       }
     }
 

src/ui/pages/Connections/Connections.tsx

@@ -215,7 +215,13 @@ const Connections = () => {
           />
         </IonButton>
         <Avatar
-          id={currentProfile?.identity.id || ""}
+          id={
+            currentProfile?.identity.displayName === "Mary"
+              ? "100"
+              : currentProfile?.identity.displayName === "Oliver"
+              ? "101"
+              : currentProfile?.identity.id || ""
+          }
           handleAvatarClick={handleAvatarClick}
         />
       </>

src/ui/pages/Credentials/Credentials.tsx

@@ -267,7 +267,13 @@ const Credentials = () => {
   }) => {
     return (
       <Avatar
-        id={currentProfile?.identity.id || ""}
+        id={
+          currentProfile?.identity.displayName === "Mary"
+            ? "100"
+            : currentProfile?.identity.displayName === "Oliver"
+            ? "101"
+            : currentProfile?.identity.id || ""
+        }
         handleAvatarClick={handleAvatarClick}
       />
     );

src/ui/pages/NotificationDetails/components/CredentialIssuanceRequest/CredentialIssuanceRequest.tsx

@@ -140,7 +140,13 @@ const CredentialIssuanceRequest = ({
           <IonItem lines="none">
             <MemberAvatar
               firstLetter={`${connectionName?.charAt(0)}`}
-              rank={0}
+              rank={
+                connectionName === "Mary"
+                  ? 100
+                  : connectionName === "Oliver"
+                  ? 101
+                  : 0
+              }
             />
             <IonText>{connectionName}</IonText>
           </IonItem>

src/ui/pages/NotificationDetails/components/ReceiveCredential/ReceiveCredential.scss

@@ -166,6 +166,15 @@
         height: 4.875rem;
         margin: 0 auto;
       }
+
+      .user-avatar-image,
+      .provider-avatar-image {
+        width: 4.875rem;
+        height: 4.875rem;
+        border-radius: 50%;
+        object-fit: cover;
+        margin: 0 auto;
+      }
     }
 
     .request-checkmark-logo {