From 1e3ca1e10116d7b25d83592724fc3337afd904d1 Mon Sep 17 00:00:00 2001
From: Satyajeet Kolhapure <satyajeet.kolhapure@consensys.net>
Date: Wed, 6 Nov 2024 10:33:35 +0000
Subject: [PATCH 1/3] added revoked watermark and styling for expired on
 attestation card view

---
 explorer/src/assets/watermarks/revoked-watermark.svg   | 10 ++++++++++
 .../Attestation/components/AttestationCard/index.tsx   |  6 +++++-
 .../components/AttestationCard/interface.ts            |  1 +
 .../pages/Attestations/components/CardView/index.tsx   |  1 +
 .../Attestations/components/CardView/interface.ts      |  1 +
 5 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 explorer/src/assets/watermarks/revoked-watermark.svg

diff --git a/explorer/src/assets/watermarks/revoked-watermark.svg b/explorer/src/assets/watermarks/revoked-watermark.svg
new file mode 100644
index 00000000..eff44a98
--- /dev/null
+++ b/explorer/src/assets/watermarks/revoked-watermark.svg
@@ -0,0 +1,10 @@
+ <svg
+  viewBox="0 0 100 100"
+  preserveAspectRatio="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100" height="100" fill="none" stroke="#f87171" strokeWidth="1" rx="4" ry="4" />
+  <line x1="1" y1="1" x2="99" y2="99" stroke="#f87171" strokeWidth="1" />
+  <text x="50" y="50" fill="#f87171" fontSize="5" textAnchor="middle" transform="rotate(45, 50, 50)" dy="-.3em">
+    Revoked
+  </text>
+</svg>
\ No newline at end of file
diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
index cbcbe001..9b237a62 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
+++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
@@ -23,6 +23,7 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   portalId,
   issuanceDate,
   expiryDate,
+  revoked,
 }) => {
   const {
     sdk,
@@ -102,9 +103,12 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   return (
     <div
       key={`${id}`}
-      className="group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem]"
+      className={`relative group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem] ${(isExpired || revoked) && "bg-surface-darkGrey dark:bg-surface-darkGreyDark"}`}
     >
       <div>
+        {revoked && (
+          <RevokedWatermark className="absolute inset-0 w-full h-full pointer-events-none"></RevokedWatermark>
+        )}
         <div className="flex items-start gap-3 text-xl md:text-md font-semibold text-blackDefault dark:text-whiteDefault">
           <div className="w-[2.5rem] h-[2.5rem] md:w-[3rem] md:h-[3rem] flex items-center mr-2 justify-center">
             {displayLogo()}
diff --git a/explorer/src/pages/Attestation/components/AttestationCard/interface.ts b/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
index bbdf149c..e0b03a76 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
+++ b/explorer/src/pages/Attestation/components/AttestationCard/interface.ts
@@ -4,4 +4,5 @@ export interface IAttestationCardProps {
   portalId: string;
   issuanceDate: number;
   expiryDate?: number;
+  revoked: boolean;
 }
diff --git a/explorer/src/pages/Attestations/components/CardView/index.tsx b/explorer/src/pages/Attestations/components/CardView/index.tsx
index 8a3267fd..a8e97393 100644
--- a/explorer/src/pages/Attestations/components/CardView/index.tsx
+++ b/explorer/src/pages/Attestations/components/CardView/index.tsx
@@ -15,6 +15,7 @@ export const CardView: React.FC<ICardViewProps> = ({ attestationsList }) => {
               portalId={attestation.portal.id}
               issuanceDate={attestation.attestedDate}
               expiryDate={attestation.expirationDate}
+              revoked={attestation.revoked}
             />
           );
         })}
diff --git a/explorer/src/pages/Attestations/components/CardView/interface.ts b/explorer/src/pages/Attestations/components/CardView/interface.ts
index 6c63b2bf..2b3695d4 100644
--- a/explorer/src/pages/Attestations/components/CardView/interface.ts
+++ b/explorer/src/pages/Attestations/components/CardView/interface.ts
@@ -9,5 +9,6 @@ export interface ICardViewProps {
     };
     attestedDate: number;
     expirationDate?: number;
+    revoked: boolean;
   }>;
 }

From edcbc3473790afcb0b2ac1d54fff7783f5ec7e68 Mon Sep 17 00:00:00 2001
From: Satyajeet Kolhapure <satyajeet.kolhapure@consensys.net>
Date: Wed, 6 Nov 2024 10:34:18 +0000
Subject: [PATCH 2/3] lint fixes

---
 explorer/src/assets/watermarks/revoked-watermark.svg       | 7 ++-----
 .../pages/Attestation/components/AttestationCard/index.tsx | 4 +++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/explorer/src/assets/watermarks/revoked-watermark.svg b/explorer/src/assets/watermarks/revoked-watermark.svg
index eff44a98..7caa1907 100644
--- a/explorer/src/assets/watermarks/revoked-watermark.svg
+++ b/explorer/src/assets/watermarks/revoked-watermark.svg
@@ -1,10 +1,7 @@
- <svg
-  viewBox="0 0 100 100"
-  preserveAspectRatio="none"
-  xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="0" y="0" width="100" height="100" fill="none" stroke="#f87171" strokeWidth="1" rx="4" ry="4" />
   <line x1="1" y1="1" x2="99" y2="99" stroke="#f87171" strokeWidth="1" />
   <text x="50" y="50" fill="#f87171" fontSize="5" textAnchor="middle" transform="rotate(45, 50, 50)" dy="-.3em">
     Revoked
   </text>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
index 9b237a62..c5364f12 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
+++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
@@ -103,7 +103,9 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   return (
     <div
       key={`${id}`}
-      className={`relative group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem] ${(isExpired || revoked) && "bg-surface-darkGrey dark:bg-surface-darkGreyDark"}`}
+      className={`relative group flex flex-col justify-between gap-4 border border-border-card dark:border-border-cardDark rounded-xl p-4 md:p-6 hover:bg-surface-secondary dark:hover:bg-surface-secondaryDark transition md:min-h-[20rem] ${
+        (isExpired || revoked) && "bg-surface-darkGrey dark:bg-surface-darkGreyDark"
+      }`}
     >
       <div>
         {revoked && (

From 8d314500ab7d8eeae99e2823ed323d8d0e9c51a0 Mon Sep 17 00:00:00 2001
From: Alain Nicolas <alainncls@users.noreply.github.com>
Date: Fri, 8 Nov 2024 23:55:13 +0700
Subject: [PATCH 3/3] Update
 explorer/src/pages/Attestation/components/AttestationCard/index.tsx

---
 .../pages/Attestation/components/AttestationCard/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
index c5364f12..56b0519c 100644
--- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
+++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
@@ -109,7 +109,12 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
     >
       <div>
         {revoked && (
-          <RevokedWatermark className="absolute inset-0 w-full h-full pointer-events-none"></RevokedWatermark>
+          <div
+            className="absolute inset-0 flex items-center justify-center text-red-500 text-4xl md:text-6xl font-bold opacity-50 pointer-events-none"
+            style={{ transform: "rotate(-45deg)" }}
+          >
+            Revoked
+          </div>
         )}
         <div className="flex items-start gap-3 text-xl md:text-md font-semibold text-blackDefault dark:text-whiteDefault">
           <div className="w-[2.5rem] h-[2.5rem] md:w-[3rem] md:h-[3rem] flex items-center mr-2 justify-center">