refactor: remove text shadows from publication date

- Remove text-shadow from CSS for .publish-date-topright
- Remove shadowColor from useAdaptiveTextColor hook
- Only apply adaptive text color, no shadows or backgrounds
- Cleaner appearance with color-based readability only

src/components/ReaderHeader.tsx

@@ -35,7 +35,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
   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<ReaderHeaderProps> = ({
             <div 
               className="publish-date-topright"
               style={{ 
-                color: textColor,
-                textShadow: `0 2px 4px ${shadowColor}`
+                color: textColor
               }}
             >
               {formattedDate}
@@ -136,8 +135,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
             <div 
               className="publish-date-topright"
               style={{ 
-                color: textColor,
-                textShadow: `0 2px 4px ${shadowColor}`
+                color: textColor
               }}
             >
               {formattedDate}

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<AdaptiveTextColor>({
-    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'
       })
     }
     

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); }