forked from Kieran/snort
commit
ac71d93dd7
@ -1,5 +1,5 @@
|
|||||||
.lnurl-tip {
|
.lnurl-tip {
|
||||||
background-color: var(--gray-secondary);
|
background-color: var(--gray-tertiary);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
@ -9,23 +9,43 @@
|
|||||||
|
|
||||||
.lnurl-tip .btn {
|
.lnurl-tip .btn {
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
|
width: 210px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnurl-tip .btn:hover {
|
.lnurl-tip .btn:hover {
|
||||||
background-color: var(--gray);
|
background-color: var(--gray);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lnurl-tip .pill.active {
|
||||||
|
color: var(--bg-color);
|
||||||
|
background-color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
.lnurl-tip .invoice {
|
.lnurl-tip .invoice {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnurl-tip .invoice .actions {
|
.lnurl-tip .invoice .actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
text-align: start;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lnurl-tip .invoice .actions > div {
|
.lnurl-tip .invoice .actions .copy-action {
|
||||||
margin: 10px;
|
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) {
|
@media(max-width: 720px) {
|
||||||
@ -33,10 +53,4 @@
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
.lnurl-tip .invoice {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.lnurl-tip .invoice .actions {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
|
|||||||
import { bech32ToText } from "../Util";
|
import { bech32ToText } from "../Util";
|
||||||
import Modal from "./Modal";
|
import Modal from "./Modal";
|
||||||
import QrCode from "./QrCode";
|
import QrCode from "./QrCode";
|
||||||
|
import Copy from "./Copy";
|
||||||
|
|
||||||
export default function LNURLTip(props) {
|
export default function LNURLTip(props) {
|
||||||
const onClose = props.onClose || (() => { });
|
const onClose = props.onClose || (() => { });
|
||||||
@ -132,7 +133,7 @@ export default function LNURLTip(props) {
|
|||||||
function webLn() {
|
function webLn() {
|
||||||
if ("webln" in window) {
|
if ("webln" in window) {
|
||||||
return (
|
return (
|
||||||
<div className="btn mb10" onClick={() => payWebLN()}>Pay with WebLN</div>
|
<div className="btn" onClick={() => payWebLN()}>Pay with WebLN</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
@ -168,15 +169,21 @@ export default function LNURLTip(props) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="invoice">
|
<div className="invoice">
|
||||||
<div>
|
|
||||||
<QrCode data={pr} link={`lightning:${pr}`} />
|
<QrCode data={pr} link={`lightning:${pr}`} />
|
||||||
</div>
|
|
||||||
<div className="actions">
|
<div className="actions">
|
||||||
{pr ? <>
|
{pr && (
|
||||||
{webLn()}
|
<>
|
||||||
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>Open Wallet</div>
|
<div className="copy-action">
|
||||||
<div className="btn" onClick={() => navigator.clipboard.writeText(pr)}>Copy Invoice</div>
|
<Copy text={pr} maxSize={26} />
|
||||||
</> : null}
|
</div>
|
||||||
|
<div className="pay-actions">
|
||||||
|
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
|
||||||
|
Open Wallet
|
||||||
|
</div>
|
||||||
|
<div>{webLn()}</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -271,6 +271,10 @@ body.scroll-lock {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs .active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: var(--error);
|
color: var(--error);
|
||||||
}
|
}
|
||||||
|
@ -55,6 +55,10 @@
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile a {
|
||||||
|
color: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
.profile .lnurl::before {
|
.profile .lnurl::before {
|
||||||
content: '⚡️ ';
|
content: '⚡️ ';
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
@ -91,7 +95,7 @@
|
|||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 4px;
|
padding: 8px 0;
|
||||||
border-bottom: 3px solid var(--gray-secondary);
|
border-bottom: 3px solid var(--gray-secondary);
|
||||||
}
|
}
|
||||||
.tab.active {
|
.tab.active {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
.root-tabs > div {
|
.root-tabs > div {
|
||||||
padding: 5px 0;
|
padding: 8px 0;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user