diff --git a/apps/passport-client/components/core/RedactedText.tsx b/apps/passport-client/components/core/RedactedText.tsx new file mode 100644 index 0000000000..de47442e91 --- /dev/null +++ b/apps/passport-client/components/core/RedactedText.tsx @@ -0,0 +1,26 @@ +import styled, { css } from "styled-components"; + +export const RedactedText = styled.div<{ redacted: boolean }>` + ${({ redacted }) => + redacted + ? css` + background-color: var(--bg-dark-primary); + color: var(--bg-dark-primary); + &:before { + content: "REDACTED"; + color: white; + font-weight: bold; + left: 25%; + position: absolute; + } + ` + : css``} + border-radius: 4px; + margin-bottom: 4px; + padding: 2px; + position: relative; + transition-property: color, background-color; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + /* Same duration as the toggle slide */ + transition-duration: 300ms; +`; diff --git a/apps/passport-client/components/shared/cards/DevconnectTicket.tsx b/apps/passport-client/components/shared/cards/DevconnectTicket.tsx index d9147bc1f9..31d227556f 100644 --- a/apps/passport-client/components/shared/cards/DevconnectTicket.tsx +++ b/apps/passport-client/components/shared/cards/DevconnectTicket.tsx @@ -5,6 +5,7 @@ import { } from "@pcd/eddsa-ticket-pcd"; import { QRDisplayWithRegenerateAndStorage, + Spacer, encodeQRPayload } from "@pcd/passport-ui"; import { ArgumentTypeName } from "@pcd/pcd-types"; @@ -13,6 +14,7 @@ import { ZKEdDSAEventTicketPCDPackage } from "@pcd/zk-eddsa-event-ticket-pcd"; import { useCallback, useState } from "react"; import styled from "styled-components"; import { usePCDCollection } from "../../../src/appHooks"; +import { RedactedText } from "../../core/RedactedText"; import { ToggleSwitch } from "../../core/Toggle"; import { icons } from "../../icons"; @@ -115,7 +117,7 @@ function TicketQR({ pcd, zk }: { pcd: EdDSATicketPCD; zk: boolean }) { key={pcd.id} generateQRPayload={generate} maxAgeMs={1000 * 60} - uniqueId={`${pcd.id}`} + uniqueId={pcd.id} fgColor={getQRCodeColorOverride(pcd)} /> ); @@ -132,8 +134,11 @@ export function DevconnectCardBody({ pcd }: { pcd: EdDSATicketPCD }) { - {ticketData?.attendeeName} - {ticketData?.attendeeEmail} + + {ticketData?.attendeeName && ( + {ticketData?.attendeeName} + )} + {ticketData?.attendeeEmail} diff --git a/apps/passport-client/components/shared/cards/ZKTicket.tsx b/apps/passport-client/components/shared/cards/ZKTicket.tsx index a0283fa7ca..c41b1e7bd6 100644 --- a/apps/passport-client/components/shared/cards/ZKTicket.tsx +++ b/apps/passport-client/components/shared/cards/ZKTicket.tsx @@ -5,6 +5,7 @@ import { } from "@pcd/eddsa-ticket-pcd"; import { QRDisplayWithRegenerateAndStorage, + Spacer, encodeQRPayload } from "@pcd/passport-ui"; import { ArgumentTypeName } from "@pcd/pcd-types"; @@ -14,6 +15,7 @@ import { useCallback, useState } from "react"; import styled from "styled-components"; import { usePCDCollection } from "../../../src/appHooks"; import { makeEncodedVerifyLink } from "../../../src/qr"; +import { RedactedText } from "../../core/RedactedText"; import { ToggleSwitch } from "../../core/Toggle"; import { icons } from "../../icons"; @@ -128,8 +130,9 @@ export function ZKTicketPCDCard({ pcd }: { pcd: EdDSATicketPCD }) { - {ticketData?.attendeeName} - {ticketData?.attendeeEmail} + + {ticketData?.attendeeName} + {ticketData?.attendeeEmail}