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,50 @@ 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) => {
+  const finalImageSource =
+    imageSource || (rank === 100 ? Mary : rank === 101 ? Oliver : undefined);
+
   return (
     <IonButton
       shape="round"
       className={`avatar-button rank-${rank}${
         !handleClick ? " no-ripple" : ""
-      }`}
+      }${finalImageSource ? " custom-image" : ""}`}
       data-testid="avatar-button"
       onClick={handleClick}
     >
-      <span>{firstLetter}</span>
+      {finalImageSource ? (
+        <img
+          src={finalImageSource}
+          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 +61,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";
 import KeribloxLogo from "../../assets/images/Keriblox-logo.png";
 
 const CardInfo = <T extends object = object>({
@@ -64,6 +67,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/CredentialDetailModule.scss

@@ -76,37 +76,47 @@
     }
   }
 
-  .related-identifier {
-    ion-button.avatar-button {
-      margin: 0;
-      min-height: 1.5rem;
-      border-radius: 1.5rem;
-      padding: 0.2rem;
+  .fallback-logo {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 1.5rem;
+    padding: 0;
+
+    @media screen and (min-width: 250px) and (max-width: 374px) {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+  }
+
+  .related-identifier ion-button.avatar-button {
+    margin: 0;
+    min-height: 1.5rem;
+    border-radius: 1.5rem;
+    padding: 0.2rem;
+
+    &::part(native) {
+      width: 1.5rem;
+      height: 1.5rem;
+      padding: 0;
+    }
+
+    span {
+      font-size: 0.95rem;
+      line-height: 1.22rem;
+    }
+
+    @media screen and (min-width: 250px) and (max-width: 374px) {
+      min-height: 1.2rem;
+      padding: 0;
 
       &::part(native) {
-        width: 1.5rem;
-        height: 1.5rem;
+        width: 1.2rem;
+        height: 1.2rem;
         padding: 0;
       }
 
       span {
-        font-size: 0.95rem;
-        line-height: 1.22rem;
-      }
-
-      @media screen and (min-width: 250px) and (max-width: 374px) {
-        min-height: 1.2rem;
-        padding: 0;
-
-        &::part(native) {
-          width: 1.2rem;
-          height: 1.2rem;
-          padding: 0;
-        }
-
-        span {
-          font-size: 0.8rem;
-        }
+        font-size: 0.8rem;
       }
     }
   }

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

@@ -34,6 +34,11 @@ import { MemberAcceptStatus } from "./MultisigMember.types";
 import { getProfiles } from "../../../../store/reducers/profileCache";
 import { Avatar } from "../../Avatar";
 import { openBrowserLink } from "../../../utils/openBrowserLink";
+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 IGNORE_KEYS = ["i", "dt", "d", "u"];
 const DOCUMENTATION_LINK = "https://secure.utah.gov/vitalrecords/index.html";
@@ -62,7 +67,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"
@@ -92,6 +105,29 @@ const Issuer = ({
 
   const closeAlert = () => setShowMissingIssuerModal(false);
 
+  const logo = (() => {
+    if (connectionShortDetails?.label === "Citizen Portal") {
+      return CitizenPortal;
+    }
+
+    if (connectionShortDetails?.label === "Socialbook") {
+      return Socialbook;
+    }
+
+    if (connectionShortDetails?.label === "Mary") {
+      return Mary;
+    }
+
+    if (connectionShortDetails?.label === "Oliver") {
+      return Oliver;
+    }
+
+    if (connectionShortDetails?.label === "Vital Records Admin") {
+      return VitalRecordsAdmin;
+    }
+    return connectionShortDetails?.logo;
+  })();
+
   return (
     <>
       <CardBlock
@@ -105,7 +141,12 @@ const Issuer = ({
               ? connectionShortDetails.label
               : i18n.t("tabs.connections.unknown")
           }
-          startSlot={<FallbackIcon />}
+          startSlot={
+            <FallbackIcon
+              src={logo}
+              alt="connection-logo"
+            />
+          }
           className="member"
           testId={"credential-details-issuer"}
         />

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/ConnectionDetails/ConnectionDetails.tsx

@@ -13,14 +13,12 @@ import "./ConnectionDetails.scss";
 
 import { Agent } from "../../../core/agent/agent";
 import {
-  ConnectionDetails as ConnectionData,
   ConnectionHistoryItem,
   ConnectionNoteDetails,
-  RegularConnectionDetails,
   RegularConnectionDetailsFull,
 } from "../../../core/agent/agent.types";
 import { RoutePath } from "../../../routes";
-import { useAppDispatch, useAppSelector } from "../../../store/hooks";
+import { useAppDispatch } from "../../../store/hooks";
 import { removeConnectionCache } from "../../../store/reducers/profileCache";
 import {
   setCurrentOperation,