From 5e9cf92922a757dac49e0c9373cf8af8717442a8 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 13 Jan 2023 08:55:28 +0100
Subject: [PATCH] minor UI improvements to Verification screen

---
 src/element/Nip5Service.tsx | 4 ++--
 src/pages/Verification.css  | 3 +++
 src/pages/Verification.tsx  | 6 ++++--
 3 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/Verification.css

diff --git a/src/element/Nip5Service.tsx b/src/element/Nip5Service.tsx
index 16d11e3..1c52997 100644
--- a/src/element/Nip5Service.tsx
+++ b/src/element/Nip5Service.tsx
@@ -183,9 +183,9 @@ export default function Nip5Service(props: Nip05ServiceProps) {
             <LNURLTip invoice={registerResponse?.invoice} show={showInvoice} onClose={() => setShowInvoice(false)} title={`Buying ${handle}@${domain}`} />
             {registerStatus?.paid && <div className="flex f-col">
                 <h4>Order Paid!</h4>
-                Your new NIP-05 handle is: <code>{handle}@{domain}</code>
+                <p>Your new NIP-05 handle is: <code>{handle}@{domain}</code></p>
                 <h3>Account Support</h3>
-                Please make sure to save the following password in order to manage your handle in the future
+                <p>Please make sure to save the following password in order to manage your handle in the future</p>
                 <Copy text={registerStatus.password} />
                 <p>Go to <a href={props.supportLink} target="_blank" rel="noreferrer">account page</a></p>
                 <h4>Activate Now</h4>
diff --git a/src/pages/Verification.css b/src/pages/Verification.css
new file mode 100644
index 0000000..22ce987
--- /dev/null
+++ b/src/pages/Verification.css
@@ -0,0 +1,3 @@
+.verification a {
+    color: var(--highlight);
+}
diff --git a/src/pages/Verification.tsx b/src/pages/Verification.tsx
index aa1cbf6..4d21cac 100644
--- a/src/pages/Verification.tsx
+++ b/src/pages/Verification.tsx
@@ -1,5 +1,7 @@
 import Nip5Service from "../element/Nip5Service";
 
+import './Verification.css'
+
 export default function VerificationPage() {
     const services = [
         /*{
@@ -20,7 +22,7 @@ export default function VerificationPage() {
     ];
 
     return (
-        <>
+        <div className="verification">
             <h2>Get Verified</h2>
             <p>
                 NIP-05 is a DNS based verification spec which helps to validate you as a real user.
@@ -33,6 +35,6 @@ export default function VerificationPage() {
             </ul>
 
             {services.map(a => <Nip5Service key={a.name} {...a} />)}
-        </>
+        </div>
     )
 }
\ No newline at end of file