From 849b9ed0928ba42cdcc169bb223ace88a85e3311 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Tue, 18 Apr 2023 10:28:19 +0100
Subject: [PATCH] chore: tweak donate page

---
 packages/app/src/Element/ZapButton.tsx | 10 ++++-----
 packages/app/src/Pages/DonatePage.tsx  | 28 +++++++++++++++-----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/app/src/Element/ZapButton.tsx b/packages/app/src/Element/ZapButton.tsx
index 48eb8cc8..4d7cdd1a 100644
--- a/packages/app/src/Element/ZapButton.tsx
+++ b/packages/app/src/Element/ZapButton.tsx
@@ -1,13 +1,12 @@
 import "./ZapButton.css";
-import { faBolt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useState } from "react";
 import { HexKey } from "@snort/nostr";
 
 import { useUserProfile } from "Hooks/useUserProfile";
 import SendSats from "Element/SendSats";
+import Icon from "Icons/Icon";
 
-const ZapButton = ({ pubkey, lnurl }: { pubkey: HexKey; lnurl?: string }) => {
+const ZapButton = ({ pubkey, lnurl, children }: { pubkey: HexKey; lnurl?: string; children?: React.ReactNode }) => {
   const profile = useUserProfile(pubkey);
   const [zap, setZap] = useState(false);
   const service = lnurl ?? (profile?.lud16 || profile?.lud06);
@@ -15,8 +14,9 @@ const ZapButton = ({ pubkey, lnurl }: { pubkey: HexKey; lnurl?: string }) => {
 
   return (
     <>
-      <div className="zap-button" onClick={() => setZap(true)}>
-        <FontAwesomeIcon icon={faBolt} />
+      <div className="zap-button flex" onClick={() => setZap(true)}>
+        <Icon name="zap" className={children ? "mr5" : ""} size={15} />
+        {children}
       </div>
       <SendSats
         target={profile?.display_name || profile?.name}
diff --git a/packages/app/src/Pages/DonatePage.tsx b/packages/app/src/Pages/DonatePage.tsx
index 0ebeb601..2846408e 100644
--- a/packages/app/src/Pages/DonatePage.tsx
+++ b/packages/app/src/Pages/DonatePage.tsx
@@ -98,20 +98,24 @@ const DonatePage = () => {
       <p>
         <FormattedMessage defaultMessage="Each contributor will get paid a percentage of all donations and NIP-05 orders, you can see the split amounts below" />
       </p>
-      <div className="flex">
-        <div className="mr10">
-          <FormattedMessage defaultMessage="Lightning Donation: " />
+      <div className="card">
+        <div className="flex">
+          <div className="mr10">
+            <FormattedMessage defaultMessage="Lightning Donation: " />
+          </div>
+          <ZapButton pubkey={bech32ToHex(SnortPubKey)} lnurl={DonateLNURL}>
+            <FormattedMessage defaultMessage="Donate" />
+          </ZapButton>
         </div>
-        <ZapButton pubkey={bech32ToHex(SnortPubKey)} lnurl={DonateLNURL} />
+        {today && (
+          <small>
+            <FormattedMessage
+              defaultMessage="Total today (UTC): {amount} sats"
+              values={{ amount: today.donations.toLocaleString() }}
+            />
+          </small>
+        )}
       </div>
-      {today && (
-        <small>
-          <FormattedMessage
-            defaultMessage="Total today (UTC): {amount} sats"
-            values={{ amount: today.donations.toLocaleString() }}
-          />
-        </small>
-      )}
       <h3>
         <FormattedMessage defaultMessage="Primary Developers" />
       </h3>