GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify country flag card backdrop

Browse Source
This commit is contained in:
lemon
2026-05-16 11:04:18 -07:00
parent d3fadeca09
commit b5f2d9bebb
2 changed files with 7 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CommentContext.tsx
+3 -24
View File
@@ -987,7 +987,7 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
alt=""
decoding="async"
onError={() => setImageFailed(true)}
className="w-full h-full object-cover opacity-30 saturate-75 brightness-125 dark:opacity-60 dark:saturate-100 dark:brightness-100 select-none"
className="w-full h-full object-cover opacity-[0.12] select-none"
style={{
maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
@@ -995,11 +995,11 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
/>
) : paletteGradient ? (
// Wikipedia not yet resolved (or its image failed) — paint the
// flag-color gradient as a placeholder/fallback. Same theme-aware opacity and
// flag-color gradient as a placeholder/fallback. Same opacity and
// mask shape as the image so the visual swap is seamless when the
// image arrives.
<div
className="absolute inset-0 opacity-30 saturate-75 brightness-125 dark:opacity-60 dark:saturate-100 dark:brightness-100"
className="absolute inset-0 opacity-[0.12]"
style={{
backgroundImage: paletteGradient,
maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
@@ -1007,27 +1007,6 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
}}
/>
) : null}
{/* Light mode washes/brightens the flag for dark text; dark mode keeps
the original dimmed treatment for white text. Both washes mirror
the mask shape so they fade with no hard edge. */}
<div
className="absolute inset-0 dark:hidden"
style={{
backgroundImage:
'linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.84) 50%, rgba(255,255,255,0) 100%)',
maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
}}
/>
<div
className="absolute inset-0 hidden dark:block"
style={{
backgroundImage:
'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%)',
maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
}}
/>
</div>
</div>
);
src/components/NoteCard.tsx
+4 -32
View File
@@ -39,7 +39,7 @@ import {
ColorMomentContent,
ColorMomentEyeButton,
} from "@/components/ColorMomentContent";
import { CommentContext, CountryCommentPill, CountryFlagBackdrop, useIsCountryRooted } from "@/components/CommentContext";
import { CommentContext, CountryCommentPill, CountryFlagBackdrop } from "@/components/CommentContext";
import { CommunityContentWarning } from "@/components/CommunityContentWarning";
import { ContentWarningGuard } from "@/components/ContentWarningGuard";
import { EmojifiedText, ReactionEmoji } from "@/components/CustomEmoji";
@@ -467,10 +467,6 @@ export const NoteCard = memo(function NoteCard({
!isProfile;
const isComment = event.kind === 1111;
// True when CountryFlagBackdrop is rendering — used to flip the header
// strip to high-contrast white text in dark mode so the author/timestamp
// stay legible against the dark wash overlaid on the flag.
const flagMode = useIsCountryRooted(event);
const isReply = isTextNote && !isComment && isReplyEvent(event);
// Find all people being replied to (for "Replying to @user1 and @user2")
@@ -1038,12 +1034,7 @@ export const NoteCard = memo(function NoteCard({
absolute backdrop layer rendered by CountryFlagBackdrop. */}
<div className="relative">
{threadedKindHeader && (
<div
className={cn(
flagMode &&
"dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
)}
>
<div>
{threadedKindHeader}
</div>
)}
@@ -1056,16 +1047,7 @@ export const NoteCard = memo(function NoteCard({
</div>
<div className={cn("flex-1 min-w-0", threaded && "pb-3")}>
<div className="flex items-center justify-between gap-2">
{/* authorInfo wears flag-mode white text + shadow when a flag
backdrop is showing; the pill stays in its own gradient
styling so we scope the flip to authorInfo only. */}
<div
className={cn(
"min-w-0 flex-1",
flagMode &&
"dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
)}
>
<div className="min-w-0 flex-1">
{authorInfo}
</div>
<CountryCommentPill event={event} className="shrink-0 [text-shadow:none]" />
@@ -1104,17 +1086,7 @@ export const NoteCard = memo(function NoteCard({
{/* Foreground wrapper — `relative` lifts the entire post above the
absolute backdrop layer rendered by CountryFlagBackdrop. */}
<div className="relative">
{/* Header strip — sits over the flag backdrop when present. In dark
mode it flips to white text with a drop shadow so the
name/handle/timestamp stay legible against the dimmed flag.
CountryCommentPill is rendered outside this wrapper so it keeps
its own gradient/text-shadow styling untouched. */}
<div
className={cn(
flagMode &&
"dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
)}
>
<div>
{/* Action header — repost takes priority, otherwise derived from event kind */}
{repostedBy ? (
<EventActionHeader