Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(explorer): As a user, I want to see Expired and Revoked Attestations with a watermark on the Subject page #794

Merged
merged 3 commits into from
Nov 8, 2024
Merged

feat(explorer): As a user, I want to see Expired and Revoked Attestations with a watermark on the Subject page #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e3ca1e
added revoked watermark and styling for expired on attestation card view
satyajeetkolhapure Nov 6, 2024
edcbc34
lint fixes
satyajeetkolhapure Nov 6, 2024
8d31450
Update explorer/src/pages/Attestation/components/AttestationCard/inde…
alainncls Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions explorer/src/assets/watermarks/revoked-watermark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion explorer/src/pages/Attestation/components/AttestationCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
portalId,
issuanceDate,
expiryDate,
revoked,
}) => {
const {
sdk,
Expand Down Expand Up @@ -102,9 +103,19 @@ 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 && (
<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">
{displayLogo()}
Expand Down
1 change: 1 addition & 0 deletions explorer/src/pages/Attestation/components/AttestationCard/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ export interface IAttestationCardProps {
portalId: string;
issuanceDate: number;
expiryDate?: number;
revoked: boolean;
}
1 change: 1 addition & 0 deletions explorer/src/pages/Attestations/components/CardView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const CardView: React.FC<ICardViewProps> = ({ attestationsList }) => {
portalId={attestation.portal.id}
issuanceDate={attestation.attestedDate}
expiryDate={attestation.expirationDate}
revoked={attestation.revoked}
/>
);
})}
Expand Down
1 change: 1 addition & 0 deletions explorer/src/pages/Attestations/components/CardView/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ export interface ICardViewProps {
};
attestedDate: number;
expirationDate?: number;
revoked: boolean;
}>;
}
Loading