Ln invoice styling (#187)

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;
 }

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 (
-                <>
-                    <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
-                    <p>{info?.description}</p>
-                    <LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
-                </>
-            )
-        } else {
-            return (
-                <>
-                    <h4>⚡️ Invoice for {info?.amount?.toLocaleString()} sats</h4>
-                    <LNURLTip invoice={invoice} show={showInvoice} onClose={() => setShowInvoice(false)} />
-                </>
-            )
-        }
+      return (
+          <>
+              <h4>Lightning Invoice</h4>
+              <ZapCircle className="zap-circle" />
+              <LNURLTip invoice={invoice} show={showInvoice} onClose={() => 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 (
         <>
-            <div className="note-invoice flex">
-                <div className="f-grow flex f-col">
-                    {header()}
-                    {info?.expire ? <small>{info?.expired ? "Expired" : "Expires"} <NoteTime from={info.expire * 1000} /></small> : null}
-                </div>
+          <div className={`note-invoice flex ${isExpired ? 'expired' : ''} ${isPaid ? 'paid' : ''}`}>
+            <div className="invoice-header">
+              {header()}
+            </div>
+
+            <p className="invoice-amount">
+              {amount > 0 && (
+                <>
+                 {amount.toLocaleString()} <span className="sats">sat{amount === 1 ? '' : 's'}</span>
+                </>
+              )}
+            </p>
+
+            <div className="invoice-body">
+              {description && <p>{description}</p>}
+              {isPaid ? (
+                <div className="paid">
+                  Paid
+                </div>
+              ) : (
+                <button disabled={isExpired} type="button" onClick={payInvoice}>
+                  {isExpired ? "Expired" : "Pay"}
+                </button>
+              )}
+            </div>
 
-                {info?.expired ? <div className="btn">Expired</div> : (
-                  <button type="button" onClick={payInvoice}>
-                    Pay
-                  </button>
-                )}
             </div>
 
         </>
     )
-}
+}

src/Element/ProfilePreview.css

@@ -1,6 +1,5 @@
 .profile-preview {
     display: flex;
-    padding: 5px 0;
     align-items: center;
     min-height: 40px;
 }