From e80f413b3d5ca0f1180abe37e27dba466cb49c2c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 8 Jun 2026 17:08:10 +0000
Subject: [PATCH] Style validation success message to match design: green bg,
 checkmark icon

Green filled circle checkmark SVG + "All good. The form is ready to download."
on #d1fae5 background with #166534 text, matching the screenshot.

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
---
 app/config.yml | 8 ++++----
 app/index.html | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/config.yml b/app/config.yml
index fe982f7..486014e 100644
--- a/app/config.yml
+++ b/app/config.yml
@@ -468,10 +468,10 @@ translations:
     fr: Valider
     "no": Valider
   val-ok:
-    en: All required fields are filled.
-    de: Alle Pflichtfelder sind ausgefüllt.
-    fr: Tous les champs obligatoires sont remplis.
-    "no": Alle obligatoriske felt er fylt ut.
+    en: All good. The form is ready to download.
+    de: Alles in Ordnung. Das Formular ist bereit zum Herunterladen.
+    fr: Tout est bon. Le formulaire est prêt à télécharger.
+    "no": Alt er i orden. Skjemaet er klart til nedlasting.
   val-invoice-no:
     en: Invoice number is required
     de: Rechnungsnummer ist erforderlich
diff --git a/app/index.html b/app/index.html
index fe12f87..417a8de 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1462,11 +1462,11 @@ function validateInvoice() {
   if (existing) existing.remove();
   const msg = document.createElement("div");
   msg.id = "validate-msg";
-  msg.style.cssText = "margin-top:8px;padding:10px 14px;border-radius:8px;font-size:var(--fs-small)";
+  msg.style.cssText = "margin-top:8px;padding:10px 14px;border-radius:8px;font-size:var(--fs-small);display:flex;align-items:center;gap:10px";
   if (errors.length === 0) {
-    msg.style.background = "color-mix(in srgb, var(--accent) 12%, transparent)";
-    msg.style.color = "var(--accent)";
-    msg.textContent = t("val-ok") || "All required fields are filled.";
+    msg.style.background = "#d1fae5";
+    msg.style.color = "#166534";
+    msg.innerHTML = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" style="flex-shrink:0"><circle cx="9" cy="9" r="9" fill="#22c55e"/><path d="M5 9l3 3 5-5" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>${h(t("val-ok") || "All good. The form is ready to download.")}`;
   } else {
     msg.style.background = "color-mix(in srgb, #e74c3c 12%, transparent)";
     msg.style.color = "#e74c3c";