3-column layout #699
@ -5,10 +5,6 @@
|
|||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.note > .header .reply {
|
.note > .header .reply {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--font-secondary-color);
|
color: var(--font-secondary-color);
|
||||||
|
@ -23,6 +23,7 @@ export interface NoteProps {
|
|||||||
threadChains?: Map<string, Array<NostrEvent>>;
|
threadChains?: Map<string, Array<NostrEvent>>;
|
||||||
context?: ReactNode;
|
context?: ReactNode;
|
||||||
options?: {
|
options?: {
|
||||||
|
isRoot?: boolean;
|
||||||
showHeader?: boolean;
|
showHeader?: boolean;
|
||||||
showContextMenu?: boolean;
|
showContextMenu?: boolean;
|
||||||
showTime?: boolean;
|
showTime?: boolean;
|
||||||
|
@ -382,7 +382,13 @@ export function NoteInner(props: NoteProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const note = (
|
const note = (
|
||||||
<div className={classNames(baseClassName, { active: highlight })} onClick={e => goToEvent(e, ev)} ref={ref}>
|
<div
|
||||||
|
className={classNames(baseClassName, {
|
||||||
|
active: highlight,
|
||||||
|
"hover:bg-nearly-bg-color cursor-pointer": !opt?.isRoot,
|
||||||
|
})}
|
||||||
|
onClick={e => goToEvent(e, ev)}
|
||||||
|
ref={ref}>
|
||||||
{content()}
|
{content()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -261,7 +261,7 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
|
|||||||
key={note.id}
|
key={note.id}
|
||||||
data={note}
|
data={note}
|
||||||
related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
|
related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
|
||||||
options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight }}
|
options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight, isRoot: true }}
|
||||||
onClick={navigateThread}
|
onClick={navigateThread}
|
||||||
threadChains={thread.chains}
|
threadChains={thread.chains}
|
||||||
/>
|
/>
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #000;
|
--bg-color: #000;
|
||||||
|
--nearly-bg-color: #090909;
|
||||||
--font-color: #fff;
|
--font-color: #fff;
|
||||||
--font-secondary-color: #a7a7a7;
|
--font-secondary-color: #a7a7a7;
|
||||||
--font-tertiary-color: #a3a3a3;
|
--font-tertiary-color: #a3a3a3;
|
||||||
@ -80,6 +81,7 @@ html {
|
|||||||
|
|
||||||
html.light {
|
html.light {
|
||||||
--bg-color: #fff;
|
--bg-color: #fff;
|
||||||
|
--nearly-bg-color: #f9f9f9;
|
||||||
--font-color: #2f3f64;
|
--font-color: #2f3f64;
|
||||||
--font-secondary-color: #5c6c92;
|
--font-secondary-color: #5c6c92;
|
||||||
--font-tertiary-color: #52525b;
|
--font-tertiary-color: #52525b;
|
||||||
|
@ -5,7 +5,7 @@ module.exports = {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
"neutral-999": "#090909",
|
"nearly-bg-color": "var(--nearly-bg-color)",
|
||||||
},
|
},
|
||||||
textColor: {
|
textColor: {
|
||||||
"nostr-blue": "var(--repost)",
|
"nostr-blue": "var(--repost)",
|
||||||
|
Loading…
Reference in New Issue
Block a user