Fix: ensure email text is visible in light mode (issue #1966) (#1994)

Author: tanayyo1

apps/mail/components/mail/mail-content.tsx

@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { defaultUserSettings } from '@zero/server/schemas';
-import { fixNonReadableColors } from '@/lib/email-utils';
 import { useTRPC } from '@/providers/query-provider';
 import { getBrowserTimezone } from '@/lib/timezones';
 import { useSettings } from '@/hooks/use-settings';
@@ -107,33 +106,6 @@ export function MailContent({ id, html, senderEmail }: MailContentProps) {
     shadowRootRef.current.innerHTML = processedData.html;
   }, [processedData]);
 
-  useEffect(() => {
-    if (!shadowRootRef.current) return;
-
-    const root = shadowRootRef.current;
-
-    const applyFix: () => void = () => {
-      const topLevelEls = Array.from(root.children) as HTMLElement[];
-      topLevelEls.forEach((el) => {
-        try {
-          fixNonReadableColors(el, {
-            defaultBackground: resolvedTheme === 'dark' ? 'rgb(10,10,10)' : '#ffffff',
-          });
-        } catch (err) {
-          console.error('Failed to fix colors in email content:', err);
-        }
-      });
-    };
-
-    requestAnimationFrame(applyFix);
-  }, [processedData, resolvedTheme]);
-
-  useEffect(() => {
-    if (isTrustedSender || temporaryImagesEnabled) {
-      setCspViolation(false);
-    }
-  }, [isTrustedSender, temporaryImagesEnabled]);
-
   const handleImageError = useCallback(
     (e: Event) => {
       const target = e.target as HTMLImageElement;
@@ -150,7 +122,10 @@ export function MailContent({ id, html, senderEmail }: MailContentProps) {
   useEffect(() => {
     if (!shadowRootRef.current) return;
 
-    shadowRootRef.current.addEventListener('error', handleImageError, true);
+    const root = shadowRootRef.current;
+
+    // Add event listeners for image errors and link clicks
+    root.addEventListener('error', handleImageError, true);
 
     const handleClick = (e: Event) => {
       const target = e.target as HTMLElement;
@@ -165,13 +140,19 @@ export function MailContent({ id, html, senderEmail }: MailContentProps) {
       }
     };
 
-    shadowRootRef.current.addEventListener('click', handleClick);
+    root.addEventListener('click', handleClick);
 
     return () => {
-      shadowRootRef.current?.removeEventListener('error', handleImageError, true);
-      shadowRootRef.current?.removeEventListener('click', handleClick);
+      root.removeEventListener('error', handleImageError, true);
+      root.removeEventListener('click', handleClick);
     };
-  }, [handleImageError, processedData]);
+  }, [processedData, handleImageError]);
+
+  useEffect(() => {
+    if (isTrustedSender || temporaryImagesEnabled) {
+      setCspViolation(false);
+    }
+  }, [isTrustedSender, temporaryImagesEnabled]);
 
   return (
     <>