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 ( -