remove remaining pill styles

src/element/Relay.css

@@ -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;
+}

src/element/Relay.tsx

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

src/element/Text.css

@@ -23,6 +23,7 @@
 
 .text p {
     margin: 0;
+    margin-bottom: 4px;
 }
 
 .text pre {

src/element/ZapButton.css

@@ -0,0 +1,6 @@
+.zap-button {
+  color: var(--bg-color);
+  background-color: var(--highlight);
+  padding: 4px 8px;
+  border-radius: 16px;
+}

src/element/ZapButton.tsx

@@ -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)} />
@@ -22,4 +23,4 @@ const ZapButton = ({ pubkey }: { pubkey: HexKey }) => {
     )
 }
 
-export default ZapButton;
+export default ZapButton;

src/index.css

@@ -351,3 +351,5 @@ body.scroll-lock {
     align-items: flex-start;
   }
 }
+
+.highlight { color: var(--highlight); }

src/pages/DonatePage.tsx

@@ -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} />} />)}
@@ -26,4 +26,4 @@ const DonatePage = () => {
     );
 }
 
-export default DonatePage;
+export default DonatePage;

src/pages/SettingsPage.css

@@ -39,3 +39,7 @@
     max-height: 300px;
     min-height: 40px;
 }
+
+.settings .actions {
+  margin-top: 16px;
+}

src/pages/SettingsPage.tsx

@@ -230,11 +230,11 @@ 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>
             {addRelay()}
         </div>
     );
-}
+}