diff --git a/src/element/LNURLTip.css b/src/element/LNURLTip.css index 3fea13cb..3c0d1b73 100644 --- a/src/element/LNURLTip.css +++ b/src/element/LNURLTip.css @@ -1,5 +1,5 @@ .lnurl-tip { - background-color: var(--gray-secondary); + background-color: var(--gray-tertiary); padding: 10px; border-radius: 10px; width: 500px; @@ -9,23 +9,43 @@ .lnurl-tip .btn { background-color: inherit; + width: 210px; + margin: 0 0 10px 0; } .lnurl-tip .btn:hover { background-color: var(--gray); } +.lnurl-tip .pill.active { + color: var(--bg-color); + background-color: var(--font-color); +} + .lnurl-tip .invoice { display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .lnurl-tip .invoice .actions { + display: flex; + flex-direction: column; align-items: flex-start; - text-align: start; + text-align: center; } -.lnurl-tip .invoice .actions > div { - margin: 10px; +.lnurl-tip .invoice .actions .copy-action { + margin: 10px auto; +} + +.lnurl-tip .invoice .actions .pay-actions { + margin: 10px auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } @media(max-width: 720px) { @@ -33,10 +53,4 @@ width: 100vw; margin: 0 10px; } - .lnurl-tip .invoice { - flex-direction: column; - } - .lnurl-tip .invoice .actions { - text-align: center; - } } diff --git a/src/element/LNURLTip.js b/src/element/LNURLTip.js index 3d856b14..5ad391e0 100644 --- a/src/element/LNURLTip.js +++ b/src/element/LNURLTip.js @@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react"; import { bech32ToText } from "../Util"; import Modal from "./Modal"; import QrCode from "./QrCode"; +import Copy from "./Copy"; export default function LNURLTip(props) { const onClose = props.onClose || (() => { }); @@ -132,7 +133,7 @@ export default function LNURLTip(props) { function webLn() { if ("webln" in window) { return ( -
payWebLN()}>Pay with WebLN
+
payWebLN()}>Pay with WebLN
) } return null; @@ -168,15 +169,21 @@ export default function LNURLTip(props) { return ( <>
-
- -
+
- {pr ? <> - {webLn()} -
window.open(`lightning:${pr}`)}>Open Wallet
-
navigator.clipboard.writeText(pr)}>Copy Invoice
- : null} + {pr && ( + <> +
+ +
+
+
window.open(`lightning:${pr}`)}> + Open Wallet +
+
{webLn()}
+
+ + )}
diff --git a/src/index.css b/src/index.css index a7744894..06162afb 100644 --- a/src/index.css +++ b/src/index.css @@ -271,6 +271,10 @@ body.scroll-lock { margin: 0; } +.tabs .active { + font-weight: bold; +} + .error { color: var(--error); } diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index 547eb136..46638702 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -55,6 +55,10 @@ font-size: 10px; } +.profile a { + color: var(--highlight); +} + .profile .lnurl::before { content: '⚡️ '; font-size: 10px; @@ -91,7 +95,7 @@ .tab { margin: 0; - padding: 4px; + padding: 8px 0; border-bottom: 3px solid var(--gray-secondary); } .tab.active { diff --git a/src/pages/Root.css b/src/pages/Root.css index 6363b308..aefc1bc4 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,4 +1,4 @@ .root-tabs > div { - padding: 5px 0; + padding: 8px 0; margin-right: 0; }