From 39927182049f039f16a55de391bc66a0e54f7279 Mon Sep 17 00:00:00 2001 From: alma Date: Sun, 27 Apr 2025 00:09:18 +0200 Subject: [PATCH] courrier refactor rebuild preview --- app/globals.css | 152 +++--------------------------- components/email/EmailContent.tsx | 2 +- components/email/EmailPreview.tsx | 4 +- 3 files changed, 16 insertions(+), 142 deletions(-) diff --git a/app/globals.css b/app/globals.css index c36495d6..7dbbcf1f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -74,144 +74,6 @@ } } -/* Email specific styles */ -.email-content table { width: 100%; border-collapse: collapse; } -.email-content table.table-container { width: auto; margin-bottom: 20px; } -.email-content td, .email-content th { padding: 8px; border: 1px solid #e5e7eb; } -.email-content img { max-width: 100%; height: auto; } -.email-content div[style] { max-width: 100% !important; } -.email-content * { max-width: 100% !important; word-wrap: break-word; } -.email-content font { font-family: inherit; } -.email-content .total-row td { border-top: 1px solid #e5e7eb; } -.email-content a { color: #3b82f6; text-decoration: underline; } -.email-content p { margin-bottom: 0.75em; } -.email-content .header { margin-bottom: 1em; } -.email-content .footer { font-size: 0.875rem; color: #6b7280; margin-top: 1em; } - -/* Email editor styles */ -.email-editor { - /* Allow text direction to be controlled by component */ - direction: inherit; - unicode-bidi: isolate; - text-align: inherit; -} - -/* Email content wrapper should respect natural text direction */ -.email-content-wrapper { - direction: rtl; - unicode-bidi: isolate; - text-align: right; - border: 1px solid #e2e8f0; - border-radius: 0.375rem; - overflow: hidden; -} - -.email-content { - direction: rtl; - text-align: right; -} - -.email-content-wrapper * { - max-width: 100%; - word-wrap: break-word; -} - -/* Styles for forwarded/replied content */ -.email-original-content { - padding-left: 10px; - border-left: 2px solid #e0e0e0; - margin: 10px 0; - color: #555; - font-size: 13px; -} - -.quote-header { - margin: 10px 0; - color: #666; - font-size: 13px; -} - -blockquote.quoted-content { - padding-left: 10px; - border-left: 3px solid #ddd; - margin: 5px 0; - color: #555; - background-color: #f8f8f8; - border-radius: 4px; - font-size: 13px; -} - -/* Forwarded message header styling */ -div[style*="---------- Forwarded message ---------"] { - color: #555; - font-family: Arial, sans-serif; - margin-bottom: 15px; -} - -/* Make sure reply-body class is properly styled */ -.reply-body { - margin-top: 20px; -} - -/* Match spacing in ComposerEmail */ -.email-content > div[style*="min-height"] { - padding: 16px; -} - -/* Enhanced email content preservation */ -.preserve-email-formatting button, -.preserve-email-formatting a[role="button"], -.preserve-email-formatting a.button, -.preserve-email-formatting .button, -.preserve-email-formatting [class*="btn"], -.preserve-email-formatting [class*="button"] { - display: inline-block; - padding: 0.5rem 1rem; - border-radius: 0.25rem; - background-color: #f97316; /* Orange for the Confirm Now button */ - color: white !important; - text-decoration: none; - font-weight: 500; - text-align: center; - cursor: pointer; - border: none; - margin: 0.5rem 0; -} - -/* Ensure images are displayed properly */ -.preserve-email-formatting img { - max-width: 100%; - height: auto; - display: inline-block; -} - -/* Ensure divs with background images are displayed */ -.preserve-email-formatting [style*="background-image"] { - background-size: contain; - background-repeat: no-repeat; - background-position: center; - min-height: 40px; -} - -/* Preserve text styling */ -.preserve-email-formatting p, -.preserve-email-formatting div, -.preserve-email-formatting span { - margin-bottom: 0.75rem; - max-width: 100%; - word-break: break-word; -} - -/* Ensure the prose class doesn't override important email styling */ -.prose.preserve-email-formatting a { - text-decoration: none; - color: #3b82f6; -} - -.prose.preserve-email-formatting img { - margin: 0; -} - /* Email display styles */ .email-content-display { max-width: 100%; @@ -311,3 +173,17 @@ div[style*="---------- Forwarded message ---------"] { margin-bottom: 0; } +/* Forwarded message header styling */ +.email-content-display div { + color: #555; +} + +/* Forwarded message styling */ +.email-content-display div[style*="forwarded message"], +.email-content-display div[class*="forwarded-message"], +.email-content-display div[class*="forwarded_message"] { + color: #555; + font-family: Arial, sans-serif; + margin-bottom: 15px; +} + diff --git a/components/email/EmailContent.tsx b/components/email/EmailContent.tsx index 81a4be00..c20782b7 100644 --- a/components/email/EmailContent.tsx +++ b/components/email/EmailContent.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { Loader2, Paperclip, Download } from 'lucide-react'; import { sanitizeHtml } from '@/lib/utils/email-formatter'; import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; diff --git a/components/email/EmailPreview.tsx b/components/email/EmailPreview.tsx index d07fb418..4c6ade51 100644 --- a/components/email/EmailPreview.tsx +++ b/components/email/EmailPreview.tsx @@ -52,8 +52,6 @@ interface EmailPreviewProps { } export default function EmailPreview({ email, loading = false, onReply }: EmailPreviewProps) { - const [contentLoading, setContentLoading] = useState(false); - // Format the date const formatDate = (date: Date | string) => { if (!date) return ''; @@ -81,7 +79,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP }; // Display loading state - if (loading || contentLoading) { + if (loading) { return (