Improve lightning paywall display

VoidCat/spa/src/FilePaywall.css

@@ -0,0 +1,7 @@
+.paywall {
+    text-align: center;
+    border: 1px solid lightgreen;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+}

VoidCat/spa/src/FilePaywall.js

@@ -1,3 +1,4 @@
+import "./FilePaywall.css";
 import {FormatCurrency} from "./Util";
 import {PaywallServices} from "./Const";
 import {useState} from "react";
@@ -35,9 +36,10 @@ export function FilePaywall(props) {
     if (!order) {
         return (
             <div className="paywall">
-                <h3>You must pay {FormatCurrency(pw.cost.amount, pw.cost.currency)} to view this
-                    file.</h3>
-                <button onClick={fetchOrder}>Pay</button>
+                <h3>
+                    You must pay {FormatCurrency(pw.cost.amount, pw.cost.currency)} to view this file.
+                </h3>
+                <div className="btn" onClick={fetchOrder}>Pay</div>
             </div>
         );
     } else {

VoidCat/spa/src/InlineProfile.css

@@ -11,6 +11,7 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
+    border: 2px solid;
 }
 
 .small-profile .name {

VoidCat/spa/src/LightningPaywall.js

@@ -36,6 +36,7 @@ export function LightningPaywall(props) {
 
     return (
         <div className="lightning-invoice" onClick={openInvoice}>
+            <h1>Pay with Lightning ⚡</h1>
             <QRCode
                 value={link}
                 size={512}