Fix: Change the color of the date chip

components/identities/identityCard.tsx

@@ -41,11 +41,14 @@ 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}>
       <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,17 +98,36 @@ 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={
+                    isDomainExpired
+                      ? styles.expiryContainer // Expired (red)
+                      : styles.notExpiryContainer // Not expired (green)
+                  }
+                >
+                  <CalendarIcon
+                    width="16"
+                    color={
+                      isDomainExpired
+                        ? theme.palette.error.main // Red for expired
+                        : theme.palette.primary.main // Green for active
+                    }
+                  />
+                  <p
+                    className={
+                      isDomainExpired
+                        ? styles.expiryText // Red for expired text
+                        : styles.notExpiryText // Green for active text
+                    }
+                  >
                     {timestampToReadableDate(identity.domainExpiry)}
                   </p>
                 </div>
               </Tooltip>
             ) : 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 +156,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 +172,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 +222,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]"

styles/components/identityCard.module.css

@@ -126,14 +126,39 @@
   gap: 8px;
   border-radius: 8px;
   margin-top: 8px;
-  background: var(--primary-700, #dcf2e9);
+  background: var(--negative-light);
+
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+}
+
+.notExpiryContainer {
+  display: inline-flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 8px;
+  margin-top: 8px;
+  background: var(--primary300);
 
   /* Small Shadow */
   box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
 }
 
 .expiryText {
-  color: var(--primary-700, #000);
+  color: var(--secondary);
+  text-align: center;
+
+  /* Body/micro/medium */
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+}
+
+.notExpiryText {
+  color: var(--black);
   text-align: center;
 
   /* Body/micro/medium */
@@ -363,4 +388,3 @@
     padding-bottom: 0;
   }
 }
-

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;

styles/theme.ts

@@ -17,6 +17,10 @@ const theme = createTheme({
       200: "#CDCCCC",
       800: "#454545",
     },
+    error: {
+      main: "#d32f2f",
+      light: "#f6d5d5",
+    },
   },
 });