From 1ef5514ee25dc71051032426de43423b87856968 Mon Sep 17 00:00:00 2001
From: bir <bir@tutao.de>
Date: Tue, 5 Nov 2024 14:30:27 +0100
Subject: [PATCH] Mail body text color is not visible in reply

close: #7820
Co-authored-by: ivk <ivk@tutao.de>
---
 src/common/gui/main-styles.ts                 |  6 ++++++
 src/mail-app/mail/editor/MailEditor.ts        | 10 +++++++++-
 src/mail-app/mail/view/MailGuiUtils.ts        |  8 ++++++++
 src/mail-app/mail/view/MailViewerViewModel.ts |  7 ++-----
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/common/gui/main-styles.ts b/src/common/gui/main-styles.ts
index c28b0b42ae2..9fae25dea4d 100644
--- a/src/common/gui/main-styles.ts
+++ b/src/common/gui/main-styles.ts
@@ -661,6 +661,12 @@ styles.registerStyle("main", () => {
 		".bg-white": {
 			"background-color": "white",
 		},
+		".bg-fix-quoted blockquote.tutanota_quote": {
+			"background-color": "white",
+			color: "black",
+			// make the border thicker so it is easier to see
+			"border-width": "4px",
+		},
 		".content-black": {
 			color: "black",
 		},
diff --git a/src/mail-app/mail/editor/MailEditor.ts b/src/mail-app/mail/editor/MailEditor.ts
index cdfaaf67d17..3a786de3fb4 100644
--- a/src/mail-app/mail/editor/MailEditor.ts
+++ b/src/mail-app/mail/editor/MailEditor.ts
@@ -45,7 +45,7 @@ import {
 import { FileOpenError } from "../../../common/api/common/error/FileOpenError"
 import type { lazy } from "@tutao/tutanota-utils"
 import { assertNotNull, cleanMatch, downcast, isNotNull, noOp, ofClass, typedValues } from "@tutao/tutanota-utils"
-import { createInlineImage, replaceCidsWithInlineImages, replaceInlineImagesWithCids } from "../view/MailGuiUtils"
+import { createInlineImage, isMailContrastFixNeeded, replaceCidsWithInlineImages, replaceInlineImagesWithCids } from "../view/MailGuiUtils"
 import { client } from "../../../common/misc/ClientDetector"
 import { appendEmailSignature } from "../signature/Signature"
 import { showTemplatePopupInEditor } from "../../templates/view/TemplatePopup"
@@ -195,6 +195,14 @@ export class MailEditor implements Component<MailEditorAttrs> {
 		this.editor.initialized.promise.then(() => {
 			this.editor.setHTML(model.getBody())
 
+			const editorDom = this.editor.getDOM()
+			const contrastFixNeeded = isMailContrastFixNeeded(editorDom)
+			// If mail body cannot be displayed as-is on the dark background then apply the background and text color
+			// fix. This class will change tutanota-quote's inside of it.
+			if (contrastFixNeeded) {
+				editorDom.classList.add("bg-fix-quoted")
+			}
+
 			this.processInlineImages()
 
 			// Add mutation observer to remove attachments when corresponding DOM element is removed
diff --git a/src/mail-app/mail/view/MailGuiUtils.ts b/src/mail-app/mail/view/MailGuiUtils.ts
index cbd5dd705b7..a22dd6d65e6 100644
--- a/src/mail-app/mail/view/MailGuiUtils.ts
+++ b/src/mail-app/mail/view/MailGuiUtils.ts
@@ -423,3 +423,11 @@ export function getConfidentialFontIcon(mail: Mail): String {
 	const confidentialIcon = getConfidentialIcon(mail)
 	return confidentialIcon === Icons.PQLock ? FontIcons.PQConfidential : FontIcons.Confidential
 }
+
+export function isMailContrastFixNeeded(editorDom: ParentNode): boolean {
+	return (
+		Array.from(editorDom.querySelectorAll("*[style]"), (e) => (e as HTMLElement).style).some(
+			(s) => (s.color && s.color !== "inherit") || (s.backgroundColor && s.backgroundColor !== "inherit"),
+		) || editorDom.querySelectorAll("font[color]").length > 0
+	)
+}
diff --git a/src/mail-app/mail/view/MailViewerViewModel.ts b/src/mail-app/mail/view/MailViewerViewModel.ts
index 51299b41463..766d963ede7 100644
--- a/src/mail-app/mail/view/MailViewerViewModel.ts
+++ b/src/mail-app/mail/view/MailViewerViewModel.ts
@@ -43,7 +43,7 @@ import { LoginController } from "../../../common/api/main/LoginController"
 import m from "mithril"
 import { LockedError, NotAuthorizedError, NotFoundError } from "../../../common/api/common/error/RestError"
 import { haveSameId, isSameId } from "../../../common/api/common/utils/EntityUtils"
-import { getReferencedAttachments, isTutanotaTeamMail, loadInlineImages, moveMails } from "./MailGuiUtils"
+import { getReferencedAttachments, isMailContrastFixNeeded, isTutanotaTeamMail, loadInlineImages, moveMails } from "./MailGuiUtils"
 import { SanitizedFragment } from "../../../common/misc/HtmlSanitizer"
 import { CALENDAR_MIME_TYPE, FileController } from "../../../common/file/FileController"
 import { exportMails } from "../export/Exporter.js"
@@ -967,10 +967,7 @@ export class MailViewerViewModel {
 		 *  * any tag with a style attribute that has the background-color set (besides "inherit")
 		 *  * any font tag with the color attribute set
 		 */
-		this.contrastFixNeeded =
-			Array.from(fragment.querySelectorAll("*[style]"), (e) => (e as HTMLElement).style).some(
-				(s) => (s.color && s.color !== "inherit") || (s.backgroundColor && s.backgroundColor !== "inherit"),
-			) || fragment.querySelectorAll("font[color]").length > 0
+		this.contrastFixNeeded = isMailContrastFixNeeded(fragment)
 
 		m.redraw()
 		return {