From e4d6d0fadcf9406c58d2e236ef66d5310c26ea5b Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 01:37:44 +0100
Subject: [PATCH 1/6] Fix: Change the color of the date chip

---
 components/identities/identityCard.tsx    | 35 +++++++++++++++++------
 styles/components/identityCard.module.css | 30 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx
index 07fb6939..92c3cb53 100644
--- a/components/identities/identityCard.tsx
+++ b/components/identities/identityCard.tsx
@@ -45,7 +45,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <div className="lg:mt-10 flex-col flex items-center lg:justify-between justify-center sm:text-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row sm:flex-col">
+        <div className="flex flex-col flex-wrap items-center justify-center gap-3 my-2 lg:mt-10 lg:justify-between sm:text-center sm:gap-5 lg:flex-row sm:flex-col">
           <div className="my-2 text-center">
             <div
               className={styles.pfpSection}
@@ -95,9 +95,28 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
             </div>
             {identity?.domainExpiry ? (
               <Tooltip title="Expiry date of this domain" arrow>
-                <div className={styles.expiryContainer}>
-                  <CalendarIcon width="16" color={theme.palette.primary.main} />
-                  <p className={styles.expiryText}>
+                <div
+                  className={
+                    new Date(identity.domainExpiry * 1000) < new Date()
+                      ? styles.expiryContainer // Expired (red)
+                      : styles.notExpiryContainer // Not expired (green)
+                  }
+                >
+                  <CalendarIcon
+                    width="16"
+                    color={
+                      new Date(identity.domainExpiry * 1000) < new Date()
+                        ? styles.expiryContainerIcon // Red for expired
+                        : theme.palette.primary.main // Green for active
+                    }
+                  />
+                  <p
+                    className={
+                      new Date(identity.domainExpiry * 1000) < new Date()
+                        ? styles.expiryText // Red for expired text
+                        : styles.notExpiryText // Green for active text
+                    }
+                  >
                     {timestampToReadableDate(identity.domainExpiry)}
                   </p>
                 </div>
@@ -105,7 +124,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
             ) : null}
           </div>
           {minting ? (
-            <div className="text-left h-full py-2">
+            <div className="h-full py-2 text-left">
               <h1 className="text-3xl font-bold font-quickZap">
                 Minting your identity...
               </h1>
@@ -134,7 +153,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
                               <h2>{minifyAddress(identity.targetAddress)}</h2>
                               <CopyContent
                                 value={identity?.targetAddress}
-                                className="cursor-pointer ml-3"
+                                className="ml-3 cursor-pointer"
                               />
                             </div>
                           ) : null}
@@ -150,7 +169,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
                               <h2>{minifyAddress(identity.targetAddress)}</h2>
                               <CopyContent
                                 value={identity?.targetAddress}
-                                className="cursor-pointer ml-3"
+                                className="ml-3 cursor-pointer"
                               />
                             </div>
                           ) : null}
@@ -200,7 +219,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
       </div>
       <div className={styles.cardCode}>
         <p>
-          <span >{convertNumberToFixedLengthString(tokenId)}</span>
+          <span>{convertNumberToFixedLengthString(tokenId)}</span>
         </p>
         <svg
           className="w-full hidden sm:block sm:w-[200px] md:w-[300px]"
diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index cec34bca..141d21c3 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -119,6 +119,24 @@
 }
 
 .expiryContainer {
+  display: inline-flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  margin-top: 8px;
+  background: var(--primary-700, #f6d5d5);
+
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+}
+
+.expiryContainerIcon {
+  color: "#D32F2F";
+}
+
+.notExpiryContainer {
   display: inline-flex;
   padding: 4px 8px;
   justify-content: center;
@@ -133,6 +151,17 @@
 }
 
 .expiryText {
+  color: var(--primary-700, #454545);
+  text-align: center;
+
+  /* Body/micro/medium */
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+}
+
+.notExpiryText {
   color: var(--primary-700, #000);
   text-align: center;
 
@@ -363,4 +392,3 @@
     padding-bottom: 0;
   }
 }
-

From d85796e4507133a467c450af5ea1bf30d0fee82e Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 02:00:14 +0100
Subject: [PATCH 2/6] remove quotes

---
 styles/components/identityCard.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index 141d21c3..976180a6 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -133,7 +133,7 @@
 }
 
 .expiryContainerIcon {
-  color: "#D32F2F";
+  color: #d32f2f;
 }
 
 .notExpiryContainer {

From 41534f116881eac021e6a48e2b9d30189a9bda58 Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 02:03:31 +0100
Subject: [PATCH 3/6] Extracted the condition into a variable before the return
 statement

---
 components/identities/identityCard.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx
index 92c3cb53..99853ce5 100644
--- a/components/identities/identityCard.tsx
+++ b/components/identities/identityCard.tsx
@@ -41,6 +41,9 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   const handleMouseLeave = debounce(() => setIsHovered(false), 50);
   const searchParams = useSearchParams();
   const minting = searchParams.get("minting") === "true";
+  const isDomainExpired = identity?.domainExpiry
+    ? new Date(identity.domainExpiry * 1000) < new Date()
+    : false;
 
   return (
     <div className={styles.wrapper}>
@@ -97,7 +100,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
               <Tooltip title="Expiry date of this domain" arrow>
                 <div
                   className={
-                    new Date(identity.domainExpiry * 1000) < new Date()
+                    isDomainExpired
                       ? styles.expiryContainer // Expired (red)
                       : styles.notExpiryContainer // Not expired (green)
                   }
@@ -105,14 +108,14 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
                   <CalendarIcon
                     width="16"
                     color={
-                      new Date(identity.domainExpiry * 1000) < new Date()
+                      isDomainExpired
                         ? styles.expiryContainerIcon // Red for expired
                         : theme.palette.primary.main // Green for active
                     }
                   />
                   <p
                     className={
-                      new Date(identity.domainExpiry * 1000) < new Date()
+                      isDomainExpired
                         ? styles.expiryText // Red for expired text
                         : styles.notExpiryText // Green for active text
                     }

From 216b99ae107268f1eec04020d3eb88d54927e607 Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 13:32:20 +0100
Subject: [PATCH 4/6] resolve the reviews

---
 styles/components/identityCard.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index 976180a6..bca6edff 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -133,7 +133,7 @@
 }
 
 .expiryContainerIcon {
-  color: #d32f2f;
+  color: var(--negative);
 }
 
 .notExpiryContainer {
@@ -151,7 +151,7 @@
 }
 
 .expiryText {
-  color: var(--primary-700, #454545);
+  color: var(--secondary);
   text-align: center;
 
   /* Body/micro/medium */
@@ -162,7 +162,7 @@
 }
 
 .notExpiryText {
-  color: var(--primary-700, #000);
+  color: var(--black);
   text-align: center;
 
   /* Body/micro/medium */

From ee55236213627d7c83594f6913bc8c8e97f010a3 Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 14:06:47 +0100
Subject: [PATCH 5/6] resolve review issue

---
 components/identities/identityCard.tsx    | 2 +-
 styles/components/identityCard.module.css | 4 ----
 styles/theme.ts                           | 4 ++++
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx
index 99853ce5..38a0910d 100644
--- a/components/identities/identityCard.tsx
+++ b/components/identities/identityCard.tsx
@@ -109,7 +109,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
                     width="16"
                     color={
                       isDomainExpired
-                        ? styles.expiryContainerIcon // Red for expired
+                        ? theme.palette.error.main // Red for expired
                         : theme.palette.primary.main // Green for active
                     }
                   />
diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index bca6edff..f0e0bb4a 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -132,10 +132,6 @@
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
 }
 
-.expiryContainerIcon {
-  color: var(--negative);
-}
-
 .notExpiryContainer {
   display: inline-flex;
   padding: 4px 8px;
diff --git a/styles/theme.ts b/styles/theme.ts
index 2dbc3114..542680d5 100644
--- a/styles/theme.ts
+++ b/styles/theme.ts
@@ -17,6 +17,10 @@ const theme = createTheme({
       200: "#CDCCCC",
       800: "#454545",
     },
+    error: {
+      main: "#d32f2f",
+      light: "#f6d5d5",
+    },
   },
 });
 

From e9b872e9768532d472216db781003896e47f53b4 Mon Sep 17 00:00:00 2001
From: dicethedev <dicethedev@gmail.com>
Date: Mon, 3 Mar 2025 14:44:17 +0100
Subject: [PATCH 6/6] resolve review issue

---
 styles/components/identityCard.module.css | 4 ++--
 styles/globals.css                        | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index f0e0bb4a..e262aa10 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -126,7 +126,7 @@
   gap: 8px;
   border-radius: 8px;
   margin-top: 8px;
-  background: var(--primary-700, #f6d5d5);
+  background: var(--negative-light);
 
   /* Small Shadow */
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
@@ -140,7 +140,7 @@
   gap: 8px;
   border-radius: 8px;
   margin-top: 8px;
-  background: var(--primary-700, #dcf2e9);
+  background: var(--primary300);
 
   /* Small Shadow */
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
diff --git a/styles/globals.css b/styles/globals.css
index 2b96cf86..59cbe139 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -34,6 +34,7 @@
   --dark-content: #454545;
   --content600: #8c8989;
   --negative: #d32f2f;
+  --negative-light: #f6d5d5;
   --black: #000000;
   --identity-card-footer-text: #e2dfde;
   --identity-card-border-color: #293e28;