forked from Kieran/snort
remove remaining pill styles
This commit is contained in:
parent
00b54d6641
commit
fb60572954
@ -6,6 +6,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.relay > div {
|
||||
@ -18,4 +19,24 @@
|
||||
background-color: var(--gray-tertiary);
|
||||
border-radius: 0 0 5px 5px;
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
padding: 2px 10px;
|
||||
border-radius: 10px;
|
||||
background-color: var(--gray);
|
||||
user-select: none;
|
||||
color: var(--font-color);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
margin-left: .5em;
|
||||
padding: 2px 10px;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
}
|
@ -44,13 +44,13 @@ export default function Relay(props: RelayProps) {
|
||||
<b className="f-2">{name}</b>
|
||||
<div className="f-1">
|
||||
Write
|
||||
<span className="pill" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
|
||||
<span className="checkmark" onClick={() => configure({ write: !relaySettings.write, read: relaySettings.read })}>
|
||||
<FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
|
||||
</span>
|
||||
</div>
|
||||
<div className="f-1">
|
||||
Read
|
||||
<span className="pill" onClick={() => configure({ write: relaySettings.write, read: !relaySettings.read })}>
|
||||
<span className="checkmark" onClick={() => configure({ write: relaySettings.write, read: !relaySettings.read })}>
|
||||
<FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
|
||||
</span>
|
||||
</div>
|
||||
@ -62,7 +62,7 @@ export default function Relay(props: RelayProps) {
|
||||
<FontAwesomeIcon icon={faPlugCircleXmark} /> {state?.disconnects}
|
||||
</div>
|
||||
<div>
|
||||
<span className="pill" onClick={() => setShowExtra(s => !s)}>
|
||||
<span className="icon-btn" onClick={() => setShowExtra(s => !s)}>
|
||||
<FontAwesomeIcon icon={faEllipsisVertical} />
|
||||
</span>
|
||||
</div>
|
||||
@ -79,7 +79,7 @@ export default function Relay(props: RelayProps) {
|
||||
|
||||
<div className="f-1">
|
||||
Delete
|
||||
<span className="pill" onClick={() => dispatch(removeRelay(props.addr))}>
|
||||
<span className="icon-btn" onClick={() => dispatch(removeRelay(props.addr))}>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</span>
|
||||
</div>
|
||||
|
@ -23,6 +23,7 @@
|
||||
|
||||
.text p {
|
||||
margin: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text pre {
|
||||
|
6
src/element/ZapButton.css
Normal file
6
src/element/ZapButton.css
Normal file
@ -0,0 +1,6 @@
|
||||
.zap-button {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--highlight);
|
||||
padding: 4px 8px;
|
||||
border-radius: 16px;
|
||||
}
|
@ -1,3 +1,4 @@
|
||||
import "./ZapButton.css";
|
||||
import { faBolt } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useState } from "react";
|
||||
@ -14,7 +15,7 @@ const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="pill" onClick={(e) => setZap(true)}>
|
||||
<div className="zap-button" onClick={(e) => setZap(true)}>
|
||||
<FontAwesomeIcon icon={faBolt} />
|
||||
</div>
|
||||
<LNURLTip svc={svc} show={zap} onClose={() => setZap(false)} />
|
||||
|
@ -351,3 +351,5 @@ body.scroll-lock {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight { color: var(--highlight); }
|
||||
|
@ -18,7 +18,7 @@ const DonatePage = () => {
|
||||
Your donations are greatly appreciated
|
||||
</p>
|
||||
<p>
|
||||
Check out the code here: <a href="https://github.com/v0l/snort" rel="noreferrer" target="_blank">https://github.com/v0l/snort</a>
|
||||
Check out the code here: <a className="highlight" href="https://github.com/v0l/snort" rel="noreferrer" target="_blank">https://github.com/v0l/snort</a>
|
||||
</p>
|
||||
<h3>Developers</h3>
|
||||
{Developers.map(a => <ProfilePreview pubkey={a} key={a} actions={<ZapButton pubkey={a} />} />)}
|
||||
|
@ -39,3 +39,7 @@
|
||||
max-height: 300px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.settings .actions {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
@ -230,7 +230,7 @@ export default function SettingsPage() {
|
||||
<div className="flex f-col">
|
||||
{Object.keys(relays || {}).map(a => <Relay addr={a} key={a} />)}
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex actions">
|
||||
<div className="f-grow"></div>
|
||||
<div className="btn" onClick={() => saveRelays()}>Save</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user