From 5ef56b7c77b41e9a51c61f14eaa832dc42c88be0 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sun, 27 Feb 2022 21:48:10 +0000
Subject: [PATCH] Improve lightning paywall display

---
 VoidCat/spa/src/FilePaywall.css     | 7 +++++++
 VoidCat/spa/src/FilePaywall.js      | 8 +++++---
 VoidCat/spa/src/InlineProfile.css   | 1 +
 VoidCat/spa/src/LightningPaywall.js | 1 +
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 VoidCat/spa/src/FilePaywall.css

diff --git a/VoidCat/spa/src/FilePaywall.css b/VoidCat/spa/src/FilePaywall.css
new file mode 100644
index 0000000..2546b07
--- /dev/null
+++ b/VoidCat/spa/src/FilePaywall.css
@@ -0,0 +1,7 @@
+.paywall {
+    text-align: center;
+    border: 1px solid lightgreen;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/VoidCat/spa/src/FilePaywall.js b/VoidCat/spa/src/FilePaywall.js
index 29f32fc..4f40931 100644
--- a/VoidCat/spa/src/FilePaywall.js
+++ b/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 {
diff --git a/VoidCat/spa/src/InlineProfile.css b/VoidCat/spa/src/InlineProfile.css
index 1d80d53..9573638 100644
--- a/VoidCat/spa/src/InlineProfile.css
+++ b/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 {
diff --git a/VoidCat/spa/src/LightningPaywall.js b/VoidCat/spa/src/LightningPaywall.js
index ad3942a..a8f716b 100644
--- a/VoidCat/spa/src/LightningPaywall.js
+++ b/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}