feat(ui): Use real credential miniature icons (#872)

* feat(ui): update miniature icon * feat(ui): update identifier color selector * feat(ui): update hardcode color value * feat(ui): update hardcode color value * feat(ui): update hardcode color value * feat(ui): update color --------- Co-authored-by: Vu Van Duc <[email protected]>
cardano-foundation · Dec 18, 2024 · ca483e2 · ca483e2
1 parent c7b87c6
commit ca483e2
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 55 deletions.
diff --git a/src/ui/assets/images/minicred.jpg b/src/ui/assets/images/minicred.jpg
diff --git a/src/ui/components/ArchivedCredentials/ArchivedCredentials.scss b/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;
         }
       }
     }

diff --git a/src/ui/components/ArchivedCredentials/CredentialItem.tsx b/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>

diff --git a/...mponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.scss b/...mponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.scss
@@ -57,30 +57,24 @@
       background: var(--ion-color-primary-gradient);
     }
 
-    &.green {
-      background: linear-gradient(
-        90.04deg,
-        #667745 28.46%,
-        #879e54 78.5%,
-        #a8c55f 123.53%,
-        #b9cf7c 165.71%
-      );
+    &.card-theme-one {
+      background: var(--ion-color-card-theme-one);
     }
 
-    &.dark {
-      background: linear-gradient(91.22deg, #222222 -5.14%, #697949 165.6%);
+    &.card-theme-two {
+      background: var(--ion-color-card-theme-two);
     }
 
-    &.brown {
-      background: linear-gradient(90.04deg, #986c32 28.46%, #4c371a 165.71%);
+    &.card-theme-three {
+      background: var(--ion-color-card-theme-three);
     }
 
-    &.primary {
-      background: linear-gradient(91.86deg, #92ffc0 28.76%, #00a5e6 119.14%);
+    &.card-theme-primary {
+      background: var(--ion-color-primary-gradient);
     }
 
-    &.secondary {
-      background: linear-gradient(91.86deg, #363c4a 28.76%, #030321 119.14%);
+    &.card-theme-secondary {
+      background: var(--ion-color-secondary-gradient);
     }
   }
 }
diff --git a/...omponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.tsx b/...omponents/CreateIdentifier/components/IdentifierColorSelector/IdentifierColorSelector.tsx
@@ -7,7 +7,7 @@ import {
 } from "./IdentifierColorSelector.types";
 import "./IdentifierColorSelector.scss";
 
-const ColorClassMapping = ["green", "dark", "brown", "primary", "secondary"];
+const ColorClassMapping = ["one", "two", "three", "primary", "secondary"];
 
 const ColorConfigs = [
   IdentifierColor.Green,
@@ -42,7 +42,7 @@ const IdentifierColorSelector = ({
       {ColorConfigs.map((color) => {
         const classes = combineClassNames(
           "color",
-          ColorClassMapping[color] || ColorClassMapping[0],
+          `card-theme-${ColorClassMapping[color] || ColorClassMapping[0]}`,
           {
             selected: value === color,
           }

diff --git a/src/ui/components/PasswordModule/components/PasswordMeter/PasswordMeter.scss b/src/ui/components/PasswordModule/components/PasswordMeter/PasswordMeter.scss
@@ -15,7 +15,7 @@
       }
 
       &.medium > div.level:not(:last-child) {
-        background: #de7513;
+        background: var(--ion-color-warning);
       }
 
       &.strong > div.level {

diff --git a/src/ui/pages/ConnectionDetails/ConnectionDetails.scss b/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;
           }
         }
       }

diff --git a/src/ui/pages/ConnectionDetails/components/ConnectionHistoryEvent.tsx b/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"
             />

diff --git a/src/ui/pages/Menu/components/ConfirmConnectModal/ConfirmConnectModal.scss b/src/ui/pages/Menu/components/ConfirmConnectModal/ConfirmConnectModal.scss
@@ -44,7 +44,7 @@
     .confirm-modal-id {
       margin: 0 0 1.5rem;
       padding: 1rem 1.5rem;
-      background-color: #fff;
+      background-color: var(--ion-color-white);
       border-radius: 1.875rem;
 
       display: flex;
@@ -92,7 +92,7 @@
       background: var(--ion-color-danger) !important;
 
       & > ion-icon {
-        --ion-color-base: #fff !important;
+        --ion-color-base: var(--ion-color-white) !important;
         width: 1.5rem;
         height: 1.5rem;
       }

diff --git a/src/ui/pages/NotificationDetails/components/MultiSigRequest/ErrorPage.scss b/src/ui/pages/NotificationDetails/components/MultiSigRequest/ErrorPage.scss
@@ -12,7 +12,7 @@
     margin-bottom: 1.75rem;
 
     .card-details-info-block-inner {
-      background: rgba(var(--ion-color-secondary-danger-rgb), 0.1);
+      background: rgba(var(--ion-color-danger-rgb), 0.1);
       padding: 1rem 1.25rem;
       display: flex;
 

diff --git a/src/ui/pages/NotificationDetails/components/ReceiveCredential/ReceiveCredential.scss b/src/ui/pages/NotificationDetails/components/ReceiveCredential/ReceiveCredential.scss
@@ -116,7 +116,7 @@
 
     .alert {
       &.info-card {
-        background: rgba(var(--ion-color-secondary-danger-rgb), 0.1);
+        background: rgba(var(--ion-color-danger-rgb), 0.1);
 
         .alert-icon {
           ion-icon {

diff --git a/src/ui/pages/Notifications/Notifications.scss b/src/ui/pages/Notifications/Notifications.scss
@@ -70,11 +70,7 @@
         &.unread {
           background: var(
             --primary-gradient-light,
-            linear-gradient(
-              92deg,
-              rgba(146, 255, 192, 0.15) 28.76%,
-              rgba(0, 165, 230, 0.15) 119.14%
-            )
+            var(--ion-color-secondary-gradient-light)
           );
         }
 

diff --git a/src/ui/styles/colors.scss b/src/ui/styles/colors.scss
@@ -17,40 +17,80 @@
 
   --ion-color-danger: #d41630;
   --ion-color-danger-rgb: 212, 24, 48;
-  --ion-color-secondary-danger-rgb: 212, 22, 48;
   --ion-color-light-red: #ff7d7a;
+  --ion-color-warning: #de7513;
   --ion-color-dark-green: #377657;
   --ion-color-green: #438f68;
   --ion-color-light-green: #92ffc0;
+  --ion-color-light-green-rgb: 146, 255, 192;
+  --ion-color-alt-green: #47ff94
   --ion-color-action-blue: #0066cc;
   --ion-color-blue: #017eff;
   --ion-color-light-blue: #00a5e6;
+  --ion-color-light-blue-rgb: 0, 165, 230;
+  --ion-color-alt-blue: #0075a3;
 
+  // Theme card colors
+  --ion-color-theme-one-color-one: #667745;
+  --ion-color-theme-one-color-two: #879e54;
+  --ion-color-theme-one-color-three: #a8c55f;
+  --ion-color-theme-one-color-four: #b9cf7c;
+
+  --ion-color-theme-two-color-one: #222222;
+  --ion-color-theme-two-color-two: #697949;
+
+  --ion-color-theme-three-color-one: #986c32;
+  --ion-color-theme-three-color-two: #4c371a;
+
+  // Gradients
   --ion-color-primary-gradient: linear-gradient(
     94.29deg,
-    #92ffc0 20.19%,
-    #00a5e6 119.98%
+    var(--ion-color-light-green) 20.19%,
+    var(--ion-color-light-blue) 119.98%
   );
 
   --ion-color-primary-gradient-light: linear-gradient(
     94.29deg,
-    #92ffc0 15%,
-    #00a5e6 15%
+    var(--ion-color-light-green) 15%,
+    var(--ion-color-light-blue) 15%
   );
 
+  --ion-color-secondary-gradient-light: linear-gradient(
+    92deg,
+    rgba(var(--ion-color-light-green-rgb), 0.15) 28.76%,
+    rgba(var(--ion-color-light-blue-rgb), 0.15) 119.14%
+  );
+
+  --ion-color-secondary-gradient: linear-gradient(91.86deg, var(--ion-color-secondary) 28.76%, var(--ion-color-primary) 119.14%);
+
   --ion-color-gradient-blue: linear-gradient(
     91.86deg,
-    #00a5e6 28.76%,
-    #0075a3 119.14%
+    var(--ion-color-light-blue) 28.76%,
+    var(--ion-color-alt-blue) 119.14%
   );
 
   --ion-color-gradient-green: linear-gradient(
     91.86deg,
-    #92ffc0 28.76%,
-    #47ff94 119.14%
+    var(--ion-color-light-green) 28.76%,
+    var(--ion-color-alt-green) 119.14%
   );
+
+  --ion-color-card-theme-one: linear-gradient(
+    90.04deg,
+    var(--ion-color-theme-one-color-one) 28.46%,
+    var(--ion-color-theme-one-color-two) 78.5%,
+    var(--ion-color-theme-one-color-three) 123.53%,
+    var(--ion-color-theme-one-color-four) 165.71%
+  );
+
+  --ion-color-card-theme-two: linear-gradient(
+    91.22deg, var(--ion-color-theme-two-color-one) -5.14%, var(--ion-color-theme-two-color-two) 165.6%);
+
+  --ion-color-card-theme-three: linear-gradient(
+    90.04deg, var(--ion-color-theme-three-color-one) 28.46%, var(--ion-color-theme-three-color-two) 165.71%);
 }
 
+// ion-colors classes
 .ion-color-dark-grey {
   --ion-color-base: var(--ion-color-dark-grey);
 }
@@ -83,4 +123,4 @@
 }
 .ion-color-primary-gradient {
   --ion-color-base: var(--ion-color-primary-gradient);
-}
+}