diff --git a/src/Element/Invoice.css b/src/Element/Invoice.css index 824ea481..a2e88c56 100644 --- a/src/Element/Invoice.css +++ b/src/Element/Invoice.css @@ -1,14 +1,88 @@ .note-invoice { - border: 1px solid var(--font-secondary-color); - border-radius: 16px; - padding: 12px; - margin: 10px auto; + border: 1px solid var(--gray-superdark); + border-radius: 16px; + padding: 26px 26px 20px 26px; + flex-direction: column; + align-items: flex-start; + position: relative; + background: var(--invoice-gradient); } -.note-invoice h2, .note-invoice h4, .note-invoice p { - margin: 10px 0; +.note-invoice.expired { + background: var(--expired-invoice-gradient); + color: var(--font-secondary-color); + cursor: not-allowed; } -.note-invoice small { - color: var(--font-secondary-color); +.note-invoice.paid { + background: var(--paid-invoice-gradient); + cursor: not-allowed; +} + +.invoice-header h4 { + margin: 0; + padding: 0; + font-weight: 400; + font-size: 16px; + line-height: 19px; + margin-bottom: 10px; +} + +.note-invoice .invoice-amount { + margin-bottom: 16px; +} + +.note-invoice .invoice-body { + color: var(--font-secondary-color); + width: 100%; + font-size: 16px; + line-height: 19px; +} + +.note-invoice .invoice-body p { + margin-bottom: 16px; +} + +.note-invoice .invoice-body button { + width: 100%; + height: 44px; + font-weight: 600; + font-size: 19px; + line-height: 23px; +} + +.note-invoice.expired .invoice-body button { + color: var(--font-secondary-color); +} + +.note-invoice .invoice-body .paid { + width: 100%; + height: 44px; + font-weight: 600; + font-size: 19px; + line-height: 23px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--success); + color: white; + border-radius: 16px; +} + +.note-invoice .invoice-amount { + font-weight: 400; + font-size: 37px; + line-height: 45px; +} + +.note-invoice .invoice-amount .sats { + color: var(--font-secondary-color); + text-transform: uppercase; + font-size: 21px; +} + +.zap-circle { + position: absolute; + top: 26px; + right: 20px; } diff --git a/src/Element/Invoice.tsx b/src/Element/Invoice.tsx index 80ad2cb5..0bba9364 100644 --- a/src/Element/Invoice.tsx +++ b/src/Element/Invoice.tsx @@ -5,6 +5,7 @@ import { decode as invoiceDecode } from "light-bolt11-decoder"; import { useMemo } from "react"; import NoteTime from "Element/NoteTime"; import LNURLTip from "Element/LNURLTip"; +import ZapCircle from "Icons/ZapCircle"; import useWebln from "Hooks/useWebln"; export interface InvoiceProps { @@ -38,30 +39,27 @@ export default function Invoice(props: InvoiceProps) { } }, [invoice]); + const [isPaid, setIsPaid] = useState(false); + const isExpired = info?.expired + const amount = info?.amount ?? 0 + const description = info?.description + function header() { - if (info?.description?.length > 0) { - return ( - <> -
{info?.description}
-+ {amount > 0 && ( + <> + {amount.toLocaleString()} sat{amount === 1 ? '' : 's'} + > + )} +
+ +{description}
} + {isPaid ? ( +