feat(ui): Use real credential miniature icons

src/ui/components/ArchivedCredentials/ArchivedCredentials.scss

@@ -113,8 +113,7 @@ ion-modal.archived-credentials-modal {
         flex-direction: row;
 
         img.credential-miniature {
-          height: 2.75rem;
-          width: 4rem;
+          height: 2.5rem;
           border-radius: 0.25rem;
         }
 
@@ -188,8 +187,7 @@ ion-modal.archived-credentials-modal {
         }
 
         img.credential-miniature {
-          height: 2.2rem;
-          width: 3.2rem;
+          height: 2rem;
         }
       }
     }

src/ui/components/ArchivedCredentials/CredentialItem.tsx

@@ -6,14 +6,13 @@ import {
   IonItemSliding,
   IonLabel,
 } from "@ionic/react";
+import { CredentialStatus } from "../../../core/agent/services/credentialService.types";
+import { IpexCommunicationService } from "../../../core/agent/services/ipexCommunicationService";
 import { i18n } from "../../../i18n";
-import "./ArchivedCredentials.scss";
+import { CREDENTIAL_BG } from "../../globals/types";
 import { formatShortDate } from "../../utils/formatters";
+import "./ArchivedCredentials.scss";
 import { CredentialItemProps } from "./ArchivedCredentials.types";
-import Minicred from "../../assets/images/minicred.jpg";
-import RareEvoBackground from "../../assets/images/rare-evo-bg.jpg";
-import { CredentialStatus } from "../../../core/agent/services/credentialService.types";
-import { IpexCommunicationService } from "../../../core/agent/services/ipexCommunicationService";
 
 const CredentialItem = ({
   credential,
@@ -28,7 +27,7 @@ const CredentialItem = ({
   const isRareEvo =
     credential.schema === IpexCommunicationService.SCHEMA_SAID_RARE_EVO_DEMO;
 
-  const image = isRareEvo ? RareEvoBackground : Minicred;
+  const image = isRareEvo ? CREDENTIAL_BG.RARE : CREDENTIAL_BG.KERI;
 
   return (
     <IonItemSliding>

src/ui/components/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.scss

@@ -58,29 +58,23 @@
     }
 
     &.green {
-      background: linear-gradient(
-        90.04deg,
-        #667745 28.46%,
-        #879e54 78.5%,
-        #a8c55f 123.53%,
-        #b9cf7c 165.71%
-      );
+      background: var(--ion-color-secondary-gradient-green);
     }
 
     &.dark {
-      background: linear-gradient(91.22deg, #222222 -5.14%, #697949 165.6%);
+      background: var(--ion-color-gradient-dark);
     }
 
     &.brown {
-      background: linear-gradient(90.04deg, #986c32 28.46%, #4c371a 165.71%);
+      background: var(--ion-color-gradient-brown);
     }
 
     &.primary {
-      background: linear-gradient(91.86deg, #92ffc0 28.76%, #00a5e6 119.14%);
+      background: var(--ion-color-primary-gradient);
     }
 
     &.secondary {
-      background: linear-gradient(91.86deg, #363c4a 28.76%, #030321 119.14%);
+      background: var(--ion-color-secondary-gradient);
     }
   }
 }

src/ui/pages/ConnectionDetails/ConnectionDetails.scss

@@ -72,7 +72,7 @@
         &.credential-miniature {
           height: 1.56rem;
           width: 2.75rem;
-          border-radius: 0.125rem;
+          border-radius: 0.2rem;
         }
       }
 
@@ -133,7 +133,7 @@
           &.credential-miniature {
             height: 1.248rem;
             width: 2.2rem;
-            border-radius: 0.125rem;
+            border-radius: 0.2rem;
           }
         }
       }

src/ui/pages/ConnectionDetails/components/ConnectionHistoryEvent.tsx

@@ -1,13 +1,13 @@
 import i18next from "i18next";
-import Minicred from "../../../assets/images/minicred.jpg";
-import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
-import { formatShortDate, formatTimeToSec } from "../../../utils/formatters";
 import {
   ConnectionDetails,
   ConnectionHistoryItem,
 } from "../../../../core/agent/agent.types";
-import { i18n } from "../../../../i18n";
 import { ConnectionHistoryType } from "../../../../core/agent/services/connectionService.types";
+import { i18n } from "../../../../i18n";
+import KeriLogo from "../../../assets/images/KeriGeneric.jpg";
+import { CREDENTIAL_BG } from "../../../globals/types";
+import { formatShortDate, formatTimeToSec } from "../../../utils/formatters";
 
 const ConnectionHistoryEvent = ({
   index,
@@ -18,6 +18,11 @@ const ConnectionHistoryEvent = ({
   historyItem?: ConnectionHistoryItem;
   connectionDetails?: ConnectionDetails;
 }) => {
+
+  const isRareEvo = historyItem?.credentialType === "Rare EVO 2024 Attendee";
+
+  const image = isRareEvo ? CREDENTIAL_BG.RARE : CREDENTIAL_BG.KERI;
+
   return historyItem ? (
     <div
       className="connection-details-history-event"
@@ -33,7 +38,7 @@ const ConnectionHistoryEvent = ({
             />
           ) : (
             <img
-              src={Minicred}
+              src={image}
               alt="credential-miniature"
               className="credential-miniature"
             />

src/ui/styles/colors.scss

@@ -49,6 +49,18 @@
     #92ffc0 28.76%,
     #47ff94 119.14%
   );
+
+  --ion-color-secondary-gradient-green: linear-gradient(
+    90.04deg,
+    #667745 28.46%,
+    #879e54 78.5%,
+    #a8c55f 123.53%,
+    #b9cf7c 165.71%
+  );
+
+  --ion-color-gradient-dark: linear-gradient(91.22deg, #222222 -5.14%, #697949 165.6%);
+  --ion-color-gradient-brown: linear-gradient(90.04deg, #986c32 28.46%, #4c371a 165.71%);
+  --ion-color-secondary-gradient: linear-gradient(91.86deg, #363c4a 28.76%, #030321 119.14%);
 }
 
 .ion-color-dark-grey {