diff --git a/src/Element/Invoice.css b/src/Element/Invoice.css index 824ea48..a2e88c5 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 80ad2cb..0bba936 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 ( - <> -

⚡️ Invoice for {info?.amount?.toLocaleString()} sats

-

{info?.description}

- setShowInvoice(false)} /> - - ) - } else { - return ( - <> -

⚡️ Invoice for {info?.amount?.toLocaleString()} sats

- setShowInvoice(false)} /> - - ) - } + return ( + <> +

Lightning Invoice

+ + setShowInvoice(false)} /> + + ) } - function payInvoice(e: any) { + async function payInvoice(e: any) { e.stopPropagation(); if (webln?.enabled) { try { - webln.sendPayment(invoice); + await webln.sendPayment(invoice); + setIsPaid(true) } catch (error) { setShowInvoice(true); } @@ -72,19 +70,34 @@ export default function Invoice(props: InvoiceProps) { return ( <> -
-
- {header()} - {info?.expire ? {info?.expired ? "Expired" : "Expires"} : null} -
+
+
+ {header()} +
+ +

+ {amount > 0 && ( + <> + {amount.toLocaleString()} sat{amount === 1 ? '' : 's'} + + )} +

+ +
+ {description &&

{description}

} + {isPaid ? ( +
+ Paid +
+ ) : ( + + )} +
- {info?.expired ?
Expired
: ( - - )}
) -} \ No newline at end of file +} diff --git a/src/Element/ProfilePreview.css b/src/Element/ProfilePreview.css index 8b98ed1..f46c0de 100644 --- a/src/Element/ProfilePreview.css +++ b/src/Element/ProfilePreview.css @@ -1,6 +1,5 @@ .profile-preview { display: flex; - padding: 5px 0; align-items: center; min-height: 40px; } diff --git a/src/Icons/ArrowBack.tsx b/src/Icons/ArrowBack.tsx index 78c0cc3..542b829 100644 --- a/src/Icons/ArrowBack.tsx +++ b/src/Icons/ArrowBack.tsx @@ -1,7 +1,7 @@ const ArrowBack = () => { return ( - + ) } diff --git a/src/Icons/Bell.tsx b/src/Icons/Bell.tsx index 14038bb..6ff14f2 100644 --- a/src/Icons/Bell.tsx +++ b/src/Icons/Bell.tsx @@ -1,7 +1,7 @@ const Bell = () => { return ( - + ) } diff --git a/src/Icons/Dislike.tsx b/src/Icons/Dislike.tsx index 8ee3db8..31f5bd5 100644 --- a/src/Icons/Dislike.tsx +++ b/src/Icons/Dislike.tsx @@ -1,7 +1,7 @@ const Dislike = () => { return ( - + ) } diff --git a/src/Icons/Dots.tsx b/src/Icons/Dots.tsx index 03dc29c..c094849 100644 --- a/src/Icons/Dots.tsx +++ b/src/Icons/Dots.tsx @@ -1,9 +1,9 @@ const Dots = () => { return ( - - - + + + ) } diff --git a/src/Icons/Envelope.tsx b/src/Icons/Envelope.tsx index 7ed1bc5..8160ff8 100644 --- a/src/Icons/Envelope.tsx +++ b/src/Icons/Envelope.tsx @@ -3,7 +3,7 @@ import type IconProps from './IconProps' const Envelope = (props: IconProps) => { return ( - + ) } diff --git a/src/Icons/Heart.tsx b/src/Icons/Heart.tsx index 0c61d7d..19f188b 100644 --- a/src/Icons/Heart.tsx +++ b/src/Icons/Heart.tsx @@ -1,7 +1,7 @@ const Heart = () => { return ( - + ) } diff --git a/src/Icons/IconProps.ts b/src/Icons/IconProps.ts index ac1a710..e54c784 100644 --- a/src/Icons/IconProps.ts +++ b/src/Icons/IconProps.ts @@ -1,4 +1,5 @@ export default interface IconProps { + className?: string width?: number height?: number } diff --git a/src/Icons/Link.tsx b/src/Icons/Link.tsx index abb5c16..d0d4089 100644 --- a/src/Icons/Link.tsx +++ b/src/Icons/Link.tsx @@ -1,7 +1,7 @@ const Link = () => { return ( - + ) } diff --git a/src/Icons/Plus.tsx b/src/Icons/Plus.tsx index aa1e583..5147ce1 100644 --- a/src/Icons/Plus.tsx +++ b/src/Icons/Plus.tsx @@ -1,7 +1,7 @@ const Plus = () => { return ( - + ) } diff --git a/src/Icons/ZapCircle.tsx b/src/Icons/ZapCircle.tsx new file mode 100644 index 0000000..d789c8d --- /dev/null +++ b/src/Icons/ZapCircle.tsx @@ -0,0 +1,11 @@ +import type IconProps from './IconProps' + +const ZapCircle = (props: IconProps) => { + return ( + + + + ) +} + +export default ZapCircle diff --git a/src/index.css b/src/index.css index b3e4939..2928897 100644 --- a/src/index.css +++ b/src/index.css @@ -23,8 +23,11 @@ --gray-dark: #2B2B2B; --gray-superdark: #171717; --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light)); - --snort-gradient: linear-gradient(180deg, #FFC7B7 0%, #4F1B73 100%); + --snort-gradient: linear-gradient(90deg, #A178FF 0%, #FF6BAF 108.33%); --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5); + --invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, 0.2), rgba(255, 107, 175, .2) 108.33%); + --paid-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, .6), rgba(255, 107, 175, .6) 108.33%); + --expired-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, var(--gray), var(--gray-superdark)); --strike-army-gradient: linear-gradient(to bottom right, #CCFF00, #a1c900); } @@ -47,7 +50,10 @@ html.light { --gray-superlight: #333; --gray-light: #555; --gray-dark: #2B2B2B; - --gray-superdark: #171717; + --gray-superdark: #EEE; + + --invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgb(247, 183, 51, 0.2), rgb(252, 74, 26, 0.2)); + --paid-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgb(247, 183, 51, 0.6), rgb(252, 74, 26, 0.6)); } body { @@ -122,7 +128,17 @@ button { button:disabled { cursor: not-allowed; - color: var(--gray); + color: var(--font-color); + background-color: transparent; + border: 1px solid var(--font-secondary-color); +} + +button:disabled:hover { + cursor: not-allowed; + color: var(--font-color); + background-color: transparent; + background-color: var(--gray-superdark); + border: 1px solid var(--font-secondary-color); } .light button.transparent { @@ -522,4 +538,4 @@ body.scroll-lock { .bold { font-weight: 700; -} \ No newline at end of file +}