diff --git a/src/components/ReaderHeader.tsx b/src/components/ReaderHeader.tsx index 618c5bfb..83edd1c2 100644 --- a/src/components/ReaderHeader.tsx +++ b/src/components/ReaderHeader.tsx @@ -35,7 +35,7 @@ const ReaderHeader: React.FC = ({ highlightVisibility = { nostrverse: true, friends: true, mine: true } }) => { const cachedImage = useImageCache(image) - const { textColor, shadowColor } = useAdaptiveTextColor(cachedImage) + const { textColor } = useAdaptiveTextColor(cachedImage) const formattedDate = published ? format(new Date(published * 1000), 'MMM d, yyyy') : null const isLongSummary = summary && summary.length > 150 @@ -88,8 +88,7 @@ const ReaderHeader: React.FC = ({
{formattedDate} @@ -136,8 +135,7 @@ const ReaderHeader: React.FC = ({
{formattedDate} diff --git a/src/hooks/useAdaptiveTextColor.ts b/src/hooks/useAdaptiveTextColor.ts index 55412db0..69f33e2f 100644 --- a/src/hooks/useAdaptiveTextColor.ts +++ b/src/hooks/useAdaptiveTextColor.ts @@ -3,28 +3,25 @@ import { FastAverageColor } from 'fast-average-color' interface AdaptiveTextColor { textColor: string - shadowColor: string } /** - * Hook to determine optimal text and shadow colors based on image background + * Hook to determine optimal text color based on image background * Samples the top-right corner of the image to ensure publication date is readable * * @param imageUrl - The URL of the image to analyze - * @returns Object containing textColor and shadowColor for optimal contrast + * @returns Object containing textColor for optimal contrast */ export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveTextColor { const [colors, setColors] = useState({ - textColor: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.5)' + textColor: '#ffffff' }) useEffect(() => { if (!imageUrl) { // No image, use default white text setColors({ - textColor: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.5)' + textColor: '#ffffff' }) return } @@ -57,22 +54,19 @@ export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveText if (color.isLight) { console.log('Light background detected, using black text') setColors({ - textColor: '#000000', - shadowColor: 'rgba(255, 255, 255, 0.8)' + textColor: '#000000' }) } else { console.log('Dark background detected, using white text') setColors({ - textColor: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.8)' + textColor: '#ffffff' }) } } catch (error) { // Fallback to default on error console.error('Error analyzing image color:', error) setColors({ - textColor: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.5)' + textColor: '#ffffff' }) } } @@ -80,8 +74,7 @@ export function useAdaptiveTextColor(imageUrl: string | undefined): AdaptiveText img.onerror = () => { // Fallback to default if image fails to load setColors({ - textColor: '#ffffff', - shadowColor: 'rgba(0, 0, 0, 0.5)' + textColor: '#ffffff' }) } diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index faa9cb27..d8e144b0 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -30,7 +30,7 @@ .reader-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .publish-date { display: flex; align-items: center; gap: 0.4rem; font-size: 0.813rem; color: var(--color-text-muted); opacity: 0.85; } .publish-date svg { font-size: 0.75rem; opacity: 0.6; } -.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); z-index: 10; } +.publish-date-topright { position: absolute; top: 1rem; right: 1rem; font-size: 0.813rem; color: var(--color-text); padding: 0.4rem 0.75rem; z-index: 10; } .reading-time { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.875rem; color: var(--color-text-secondary); } .reading-time svg { font-size: 0.875rem; } .highlight-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; font-size: 0.875rem; color: var(--color-text); }