add back button

src/Element/BackButton.css

@@ -0,0 +1,21 @@
+.back-button {
+  background: none;
+  padding: 0;
+  color: var(--highlight);
+  font-weight: 400;
+  font-size: var(--font-size);
+}
+
+.back-button svg {
+  margin-right: .5em;
+}
+
+.back-button:hover {
+  text-decoration: underline;
+}
+
+.back-button:hover {
+  background: none;
+  color: var(--font-color);
+  text-decoration: underline;
+}

src/Element/BackButton.tsx

@@ -0,0 +1,17 @@
+import "./BackButton.css"
+
+import { useNavigate } from "react-router-dom";
+
+import ArrowBack from "Icons/ArrowBack";
+
+const BackButton = () => {
+  const navigate = useNavigate()
+
+  return (
+    <button className="back-button" type="button" onClick={() => navigate(-1)}>
+      <ArrowBack />Back
+    </button>
+  )
+}
+
+export default BackButton

src/Element/FollowListBase.tsx

@@ -18,7 +18,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
         <div className="main-content">
             <div className="flex mt10">
                 <div className="f-grow bold">{title}</div>
-                <button type="button" onClick={() => followAll()}>Follow All</button>
+                <button className="transparent" type="button" onClick={() => followAll()}>Follow All</button>
             </div>
             {pubkeys?.map(a => <ProfilePreview pubkey={a} key={a} />)}
         </div>

src/Element/Thread.tsx

@@ -1,10 +1,12 @@
 import "./Thread.css";
 import { useMemo } from "react";
 import { Link } from "react-router-dom";
+
 import { TaggedRawEvent, u256 } from "Nostr";
 import { default as NEvent } from "Nostr/Event";
 import EventKind from "Nostr/EventKind";
 import { eventLink } from "Util";
+import BackButton from "Element/BackButton";
 import Note from "Element/Note";
 import NoteGhost from "Element/NoteGhost";
 
@@ -83,6 +85,8 @@ export default function Thread(props: ThreadProps) {
     }
 
     return (
+      <>
+        <BackButton />
         <div className="thread-container">
             {renderRoot()}
             {root ? renderChain(root.Id) : null}
@@ -100,5 +104,6 @@ export default function Thread(props: ThreadProps) {
                 })}
             </>}
         </div>
+      </>
     );
-}
+}

src/Icons/ArrowBack.tsx

@@ -0,0 +1,9 @@
+const ArrowBack = () => {
+  return (
+    <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14.6667 6.5H1.33334M1.33334 6.5L6.33334 11.5M1.33334 6.5L6.33334 1.5" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  )
+}
+
+export default ArrowBack

src/index.css

@@ -120,6 +120,7 @@ button {
   border-radius: 16px;
   outline: none;
 }
+
 button:hover {
   background-color: var(--font-color);
   color: var(--bg-color);
@@ -129,13 +130,27 @@ button.secondary {
   color: var(--font-color);
   background-color: var(--gray-dark);
 }
+
+button.transparent {
+  background-color: transparent;
+  border: 1px solid var(--gray-superdark);
+}
+
 .light button.secondary {
   background-color: var(--gray);
 }
+
 button.secondary:hover {
+  border: none;
   color: var(--font-color);
   background-color: var(--gray-superdark);
 }
+
+button.transparent:hover {
+  color: var(--bg-color);
+  background-color: var(--font-color);
+}
+
 .light button.secondary:hover {
   background-color: var(--gray-secondary);
 }