forked from Kieran/snort
add back button
This commit is contained in:
parent
dd1a556eac
commit
d60b636d34
21
src/Element/BackButton.css
Normal file
21
src/Element/BackButton.css
Normal file
@ -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;
|
||||
}
|
17
src/Element/BackButton.tsx
Normal file
17
src/Element/BackButton.tsx
Normal file
@ -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
|
@ -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>
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
9
src/Icons/ArrowBack.tsx
Normal file
9
src/Icons/ArrowBack.tsx
Normal file
@ -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
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user