From 9364e7d0e4bf680ca9bc73d290ca0dc1c9d39c92 Mon Sep 17 00:00:00 2001
From: Mara <mara-li@outlook.fr>
Date: Fri, 4 Oct 2024 11:20:09 +0200
Subject: [PATCH] refactor(modal): adjust display for modal editing summary

---
 src/settings/modals/list_changed.ts | 24 ++++++++++++------------
 src/styles.css                      | 21 +++++++++++++++++++--
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/settings/modals/list_changed.ts b/src/settings/modals/list_changed.ts
index 5c63a83e..5a27941f 100644
--- a/src/settings/modals/list_changed.ts
+++ b/src/settings/modals/list_changed.ts
@@ -11,7 +11,7 @@ export class ListChangedFiles extends Modal {
 
 	displayListOfFile(toDisplay: string[], contentEl: HTMLElement) {
 		if (!toDisplay.length) return;
-		const ul = contentEl.createEl("ul");
+		const ul = contentEl.createEl("ul", {cls: "list"});
 		toDisplay.forEach((file) => {
 			let emoji = "❓";
 			const ext = file.split(".").pop() ?? "";
@@ -61,33 +61,33 @@ export class ListChangedFiles extends Modal {
 				text: `🗑️ ${i18next.t("modals.listChangedFiles.deleted")}`,
 			});
 			this.displayListOfFile(this.listChanged.deleted, contentEl);
-
-			contentEl.createEl("h2", {
+			
+			const span = contentEl.createDiv({cls: "error"});
+			span.createEl("h2", {
 				text: `❌ ${i18next.t("modals.listChangedFiles.error")}`,
-				cls: "error",
 			});
-			contentEl.createEl("h3", {
+			span.createEl("h3", {
 				text: `📤 ${i18next.t("modals.listChangedFiles.unpublished")}`,
 			});
-			this.displayListOfFile(this.listChanged.unpublished, contentEl);
-			contentEl.createEl("h3", {
+			this.displayListOfFile(this.listChanged.unpublished, span);
+			span.createEl("h3", {
 				text: `♻️ ${i18next.t("modals.listChangedFiles.notDeleted")}`,
 			});
-			this.displayListOfFile(this.listChanged.notDeleted, contentEl);
+			this.displayListOfFile(this.listChanged.notDeleted, span);
 		} else {
 			this.listChanged = this.listChanged as Deleted;
 			contentEl.createEl("h3", {
 				text: `🗑️ ${i18next.t("modals.listChangedFiles.deleted")}`,
 			});
 			this.displayListOfFile(this.listChanged.deleted, contentEl);
-			contentEl.createEl("h3", {
+			const span = contentEl.createSpan({cls: "error"});
+			span.createEl("h3", {
 				text: `❌ ${i18next.t("modals.listChangedFiles.error")}`,
-				cls: "error",
 			});
-			contentEl.createEl("h3", {
+			span.createEl("h3", {
 				text: `♻️ ${i18next.t("modals.listChangedFiles.notDeleted")}`,
 			});
-			this.displayListOfFile(this.listChanged.undeleted, contentEl);
+			this.displayListOfFile(this.listChanged.undeleted, span);
 		}
 	}
 
diff --git a/src/styles.css b/src/styles.css
index 31314685..2ee16fb4 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -331,9 +331,26 @@ span.enveloppe.icons {
 	color: var(--color-green);
 }
 
-.enveloppe.list-changed h2.error {
+.enveloppe.list-changed .error {
 	color: var(--text-error);
-	padding: 10px 10px;
+	border-radius: 5px;
+	background-color: rgba(var(--color-red-rgb), 0.1);
+	box-shadow: none;
+	margin-top: 3px;
+	padding-bottom: 10px;
+}
+
+.enveloppe.list-changed .error h3 {
+	margin-left: 1em;
+}
+
+.enveloppe.list-changed .error .list {
+	margin-left: 1em;
+}
+
+.enveloppe.list-changed .error h2 {
+	padding-top: 10px;
+	margin-left: 3px;
 }
 
 .enveloppe.list-changed .emoji {