diff --git a/src/components/CommentContext.tsx b/src/components/CommentContext.tsx index c78c0cf8..e114e9e2 100644 --- a/src/components/CommentContext.tsx +++ b/src/components/CommentContext.tsx @@ -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.
) : 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. */} -
-
); diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx index ed6d411a..caa9838b 100644 --- a/src/components/NoteCard.tsx +++ b/src/components/NoteCard.tsx @@ -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. */}
{threadedKindHeader && ( -
+
{threadedKindHeader}
)} @@ -1056,16 +1047,7 @@ export const NoteCard = memo(function NoteCard({
- {/* 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. */} -
+
{authorInfo}
@@ -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. */}
- {/* 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. */} -
+
{/* Action header — repost takes priority, otherwise derived from event kind */} {repostedBy ? (