From 038fe37dba4459737e7eea91d9bd9ef86e399bce Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 27 Apr 2025 21:35:47 +0200
Subject: [PATCH] courrier multi account restore compose

---
 components/email/ComposeEmail.tsx | 104 ++++++++++++++++--------------
 1 file changed, 54 insertions(+), 50 deletions(-)

diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index e092322a..ebbe8e9a 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -360,11 +360,11 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   }, []);
   
   return (
-    <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl bg-white rounded-lg shadow-xl flex flex-col">
+    <div className="fixed inset-0 bg-white/70 z-[100] flex items-center justify-center">
+      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
         {/* Modal Header */}
-        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
             {type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
           </h3>
           <Button
@@ -379,21 +379,21 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
 
         {/* Modal Body */}
         <div className="flex-1 overflow-hidden">
-          <div className="flex flex-col p-4 space-y-3 overflow-y-auto">
+          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
             {/* To Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
               <Input
                 id="to"
                 value={to}
                 onChange={(e) => setTo(e.target.value)}
                 placeholder="recipient@example.com"
-                className="w-full mt-1 border-gray-300 text-gray-900"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
 
             {/* CC/BCC Toggle Buttons */}
-            <div className="flex items-center gap-4">
+            <div className="flex-none flex items-center gap-4">
               <button
                 type="button"
                 className="text-blue-600 hover:text-blue-700 text-sm font-medium"
@@ -412,59 +412,61 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
 
             {/* CC Field */}
             {showCc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
                 <Input
                   id="cc"
                   value={cc}
                   onChange={(e) => setCc(e.target.value)}
                   placeholder="cc@example.com"
-                  className="w-full mt-1 border-gray-300 text-gray-900"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                 />
               </div>
             )}
 
             {/* BCC Field */}
             {showBcc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
                 <Input
                   id="bcc"
                   value={bcc}
                   onChange={(e) => setBcc(e.target.value)}
                   placeholder="bcc@example.com"
-                  className="w-full mt-1 border-gray-300 text-gray-900"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                 />
               </div>
             )}
 
             {/* Subject Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
               <Input
                 id="subject"
                 value={subject}
                 onChange={(e) => setSubject(e.target.value)}
                 placeholder="Enter subject"
-                className="w-full mt-1 border-gray-300 text-gray-900"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
 
             {/* Message Body */}
-            <div className="min-h-[300px] flex flex-col">
-              <Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label>
-              <RichEmailEditor
-                initialContent={emailContent}
-                onChange={setEmailContent}
-                minHeight="300px"
-                maxHeight="400px"
-                preserveFormatting={true}
-              />
+            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
+              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
+              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
+                <RichEmailEditor
+                  initialContent={emailContent}
+                  onChange={setEmailContent}
+                  minHeight="200px"
+                  maxHeight="none"
+                  preserveFormatting={true}
+                />
+              </div>
             </div>
             
             {/* Attachments */}
             {attachments.length > 0 && (
-              <div className="border rounded-md p-3">
+              <div className="border rounded-md p-3 mt-4">
                 <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
                 <div className="space-y-2">
                   {attachments.map((file, index) => (
@@ -487,7 +489,7 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
         </div>
 
         {/* Modal Footer */}
-        <div className="flex items-center justify-between px-4 py-2 border-t border-gray-200">
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
           <div className="flex items-center gap-2">
             {/* File Input for Attachments */}
             <input
@@ -718,11 +720,11 @@ function LegacyAdapter({
   if (!showCompose) return null;
   
   return (
-    <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl bg-white rounded-lg shadow-xl flex flex-col">
+    <div className="fixed inset-0 bg-white/70 z-[100] flex items-center justify-center">
+      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
         {/* Modal Header */}
-        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
             {determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'}
           </h3>
           <Button
@@ -740,21 +742,21 @@ function LegacyAdapter({
 
         {/* Modal Body */}
         <div className="flex-1 overflow-hidden">
-          <div className="flex flex-col p-4 space-y-3 overflow-y-auto">
+          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
             {/* To Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
               <Input
                 id="to"
                 value={composeTo}
                 onChange={(e) => setComposeTo(e.target.value)}
                 placeholder="recipient@example.com"
-                className="w-full mt-1 border-gray-300 text-gray-900"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
 
             {/* CC/BCC Toggle Buttons */}
-            <div className="flex items-center gap-4">
+            <div className="flex-none flex items-center gap-4">
               <button
                 type="button"
                 className="text-blue-600 hover:text-blue-700 text-sm font-medium"
@@ -773,59 +775,61 @@ function LegacyAdapter({
 
             {/* CC Field */}
             {showCc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
                 <Input
                   id="cc"
                   value={composeCc}
                   onChange={(e) => setComposeCc(e.target.value)}
                   placeholder="cc@example.com"
-                  className="w-full mt-1 border-gray-300 text-gray-900"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                 />
               </div>
             )}
 
             {/* BCC Field */}
             {showBcc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
                 <Input
                   id="bcc"
                   value={composeBcc}
                   onChange={(e) => setComposeBcc(e.target.value)}
                   placeholder="bcc@example.com"
-                  className="w-full mt-1 border-gray-300 text-gray-900"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                 />
               </div>
             )}
 
             {/* Subject Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
               <Input
                 id="subject"
                 value={composeSubject}
                 onChange={(e) => setComposeSubject(e.target.value)}
                 placeholder="Enter subject"
-                className="w-full mt-1 border-gray-300 text-gray-900"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
 
             {/* Message Body */}
-            <div className="min-h-[300px] flex flex-col">
-              <Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label>
-              <RichEmailEditor
-                initialContent={composeBody}
-                onChange={setComposeBody}
-                minHeight="300px"
-                maxHeight="400px"
-                preserveFormatting={true}
-              />
+            <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
+              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
+              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
+                <RichEmailEditor
+                  initialContent={composeBody}
+                  onChange={setComposeBody}
+                  minHeight="200px"
+                  maxHeight="none"
+                  preserveFormatting={true}
+                />
+              </div>
             </div>
             
             {/* Attachments */}
             {attachments.length > 0 && (
-              <div className="border rounded-md p-3">
+              <div className="border rounded-md p-3 mt-4">
                 <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
                 <div className="space-y-2">
                   {attachments.map((file, index) => (
@@ -848,7 +852,7 @@ function LegacyAdapter({
         </div>
 
         {/* Modal Footer */}
-        <div className="flex items-center justify-between px-4 py-2 border-t border-gray-200">
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
           <div className="flex items-center gap-2">
             {/* File Input for Attachments */}
             <input