From fb605729546cd78b7fca641e4318180eb58ea69c Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Thu, 19 Jan 2023 12:14:41 +0100
Subject: [PATCH] remove remaining pill styles

---
 src/element/Relay.css      | 23 ++++++++++++++++++++++-
 src/element/Relay.tsx      |  8 ++++----
 src/element/Text.css       |  1 +
 src/element/ZapButton.css  |  6 ++++++
 src/element/ZapButton.tsx  |  5 +++--
 src/index.css              |  2 ++
 src/pages/DonatePage.tsx   |  4 ++--
 src/pages/SettingsPage.css |  4 ++++
 src/pages/SettingsPage.tsx |  4 ++--
 9 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/element/ZapButton.css

diff --git a/src/element/Relay.css b/src/element/Relay.css
index 76bf2a6..e9c2220 100644
--- a/src/element/Relay.css
+++ b/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;
-}
\ No newline at end of file
+    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;
+}
diff --git a/src/element/Relay.tsx b/src/element/Relay.tsx
index 47c6f73..d165d01 100644
--- a/src/element/Relay.tsx
+++ b/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>
diff --git a/src/element/Text.css b/src/element/Text.css
index 10086df..4ec9e40 100644
--- a/src/element/Text.css
+++ b/src/element/Text.css
@@ -23,6 +23,7 @@
 
 .text p {
     margin: 0;
+    margin-bottom: 4px;
 }
 
 .text pre {
diff --git a/src/element/ZapButton.css b/src/element/ZapButton.css
new file mode 100644
index 0000000..8f8641d
--- /dev/null
+++ b/src/element/ZapButton.css
@@ -0,0 +1,6 @@
+.zap-button {
+  color: var(--bg-color);
+  background-color: var(--highlight);
+  padding: 4px 8px;
+  border-radius: 16px;
+}
diff --git a/src/element/ZapButton.tsx b/src/element/ZapButton.tsx
index 46986ab..9271b02 100644
--- a/src/element/ZapButton.tsx
+++ b/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;
\ No newline at end of file
+export default ZapButton;
diff --git a/src/index.css b/src/index.css
index f11c2f3..b940691 100644
--- a/src/index.css
+++ b/src/index.css
@@ -351,3 +351,5 @@ body.scroll-lock {
     align-items: flex-start;
   }
 }
+
+.highlight { color: var(--highlight); }
diff --git a/src/pages/DonatePage.tsx b/src/pages/DonatePage.tsx
index aac68ab..9d940ac 100644
--- a/src/pages/DonatePage.tsx
+++ b/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;
\ No newline at end of file
+export default DonatePage;
diff --git a/src/pages/SettingsPage.css b/src/pages/SettingsPage.css
index 154c0dc..a5ed604 100644
--- a/src/pages/SettingsPage.css
+++ b/src/pages/SettingsPage.css
@@ -39,3 +39,7 @@
     max-height: 300px;
     min-height: 40px;
 }
+
+.settings .actions {
+  margin-top: 16px;
+}
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 0e3b933..3c8c80a 100644
--- a/src/pages/SettingsPage.tsx
+++ b/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>
     );
-}
\ No newline at end of file
+}