diff --git a/src/Element/BackButton.css b/src/Element/BackButton.css new file mode 100644 index 00000000..0ebb52b8 --- /dev/null +++ b/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; +} diff --git a/src/Element/BackButton.tsx b/src/Element/BackButton.tsx new file mode 100644 index 00000000..25564c41 --- /dev/null +++ b/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 ( + + ) +} + +export default BackButton diff --git a/src/Element/FollowListBase.tsx b/src/Element/FollowListBase.tsx index e65d4ec4..99e063e9 100644 --- a/src/Element/FollowListBase.tsx +++ b/src/Element/FollowListBase.tsx @@ -18,7 +18,7 @@ export default function FollowListBase({ pubkeys, title }: FollowListBaseProps)
{title}
- +
{pubkeys?.map(a => )}
diff --git a/src/Element/Thread.tsx b/src/Element/Thread.tsx index bc3fbef9..70ec56d4 100644 --- a/src/Element/Thread.tsx +++ b/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 ( + <> +
{renderRoot()} {root ? renderChain(root.Id) : null} @@ -100,5 +104,6 @@ export default function Thread(props: ThreadProps) { })} }
+ ); -} \ No newline at end of file +} diff --git a/src/Icons/ArrowBack.tsx b/src/Icons/ArrowBack.tsx new file mode 100644 index 00000000..78c0cc3d --- /dev/null +++ b/src/Icons/ArrowBack.tsx @@ -0,0 +1,9 @@ +const ArrowBack = () => { + return ( + + + + ) +} + +export default ArrowBack diff --git a/src/index.css b/src/index.css index f75d7a74..fb3dbbf0 100644 --- a/src/index.css +++ b/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); }