From 2a372fdb15db8e9a57b4ad5984d1f4fe70f0589f Mon Sep 17 00:00:00 2001
From: Md Bayazid  Bostame <bostame@bostame-2349.local>
Date: Thu, 26 Mar 2026 00:37:13 +0100
Subject: [PATCH] snapshot: preserve app-wide alert standardization

---
 .../static/workflows/css/admin_tools.css      |  4 +-
 .../static/workflows/css/app_chrome.css       | 53 +++++++++++++++++++
 .../static/workflows/css/form_builder.css     | 14 +----
 .../workflows/static/workflows/css/home.css   | 14 +----
 .../workflows/static/workflows/css/login.css  | 19 ++-----
 .../css/onboarding_intro_session.css          |  2 +-
 .../workflows/css/requests_dashboard.css      | 10 +---
 .../templates/registration/login.html         |  8 +--
 .../templates/workflows/form_builder.html     |  6 +--
 .../workflows/templates/workflows/home.html   |  6 +--
 .../workflows/includes/messages.html          | 10 ++++
 .../workflows/integrations_setup.html         |  6 +--
 .../templates/workflows/intro_builder.html    |  6 +--
 .../workflows/onboarding_intro_session.html   |  6 +--
 .../workflows/requests_dashboard.html         |  6 +--
 .../templates/workflows/welcome_emails.html   |  6 +--
 16 files changed, 83 insertions(+), 93 deletions(-)
 create mode 100644 backend/workflows/templates/workflows/includes/messages.html

diff --git a/backend/workflows/static/workflows/css/admin_tools.css b/backend/workflows/static/workflows/css/admin_tools.css
index 715150c..0849a7d 100644
--- a/backend/workflows/static/workflows/css/admin_tools.css
+++ b/backend/workflows/static/workflows/css/admin_tools.css
@@ -2,9 +2,7 @@ body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #0
 .shell { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid #d8e3f0; border-radius: 14px; padding: 16px; }
 h1 { margin: 12px 0 6px; color: #000078; }
 .sub { margin: 0 0 12px; color: #54657c; }
-.flash, .msg { border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid #d6e1ef; background: #f8fbff; color: #1f3a5f; }
-.flash.error, .msg.error { border-color: #fecaca; background: #fff1f2; color: #991b1b; }
-.flash.success { border-color: #bfe6c9; background: #edf9f1; color: #116634; }
+.app-messages { margin-bottom: 12px; }
 .card { border: 1px solid #d8e3f0; border-radius: 12px; background: #fbfdff; padding: 12px; margin-bottom: 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 .grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px; }
 label { display: block; margin-bottom: 4px; font-size: 12px; color: #334155; font-weight: 700; }
diff --git a/backend/workflows/static/workflows/css/app_chrome.css b/backend/workflows/static/workflows/css/app_chrome.css
index 2ccb206..ec01873 100644
--- a/backend/workflows/static/workflows/css/app_chrome.css
+++ b/backend/workflows/static/workflows/css/app_chrome.css
@@ -134,6 +134,59 @@
   }
 }
 
+.app-messages {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 16px;
+}
+
+.app-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid #d6e1ef;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(241,247,255,0.94));
+  color: #1f3a5f;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
+  transition:
+    border-color var(--motion-fast) var(--motion-ease),
+    background-color var(--motion-fast) var(--motion-ease),
+    box-shadow var(--motion-fast) var(--motion-ease);
+}
+
+.app-alert-body {
+  min-width: 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.app-alert-success {
+  border-color: #bfe6c9;
+  background: linear-gradient(180deg, #f3fcf6, #ecf9f0);
+  color: #116634;
+}
+
+.app-alert-warning {
+  border-color: #f3d9a7;
+  background: linear-gradient(180deg, #fffaf0, #fff4dd);
+  color: #8a5a00;
+}
+
+.app-alert-error {
+  border-color: #f0c8c8;
+  background: linear-gradient(180deg, #fff7f7, #fff1f1);
+  color: #991b1b;
+}
+
+.app-alert-info,
+.app-alert-debug {
+  border-color: #d6e1ef;
+  background: linear-gradient(180deg, rgba(248,251,255,0.98), rgba(241,247,255,0.94));
+  color: #1f3a5f;
+}
+
 .confirm-modal[hidden] {
   display: none;
 }
diff --git a/backend/workflows/static/workflows/css/form_builder.css b/backend/workflows/static/workflows/css/form_builder.css
index 09b08db..8de88a6 100644
--- a/backend/workflows/static/workflows/css/form_builder.css
+++ b/backend/workflows/static/workflows/css/form_builder.css
@@ -71,20 +71,8 @@ body {
   font-size: 14px;
 }
 
-.flash {
+.app-messages {
   margin-top: 10px;
-  border: 1px solid #bbf7d0;
-  background: #f0fdf4;
-  color: #166534;
-  border-radius: 10px;
-  padding: 8px 10px;
-  font-size: 14px;
-}
-
-.flash.error {
-  border-color: #fecaca;
-  background: #fff1f2;
-  color: #991b1b;
 }
 
 .status.error {
diff --git a/backend/workflows/static/workflows/css/home.css b/backend/workflows/static/workflows/css/home.css
index 7b66da9..a9976a1 100644
--- a/backend/workflows/static/workflows/css/home.css
+++ b/backend/workflows/static/workflows/css/home.css
@@ -563,20 +563,8 @@
       max-width: 26ch;
     }
 
-    .msg {
-      border-radius: 10px;
-      padding: 10px 12px;
+    .app-messages {
       margin: 0 0 14px;
-      border: 1px solid #d6e1ef;
-      background: #f8fbff;
-      color: #1f3a5f;
-      font-size: 14px;
-    }
-
-    .msg.error {
-      border-color: #fecaca;
-      background: #fff1f2;
-      color: #991b1b;
     }
 
     .footer-note {
diff --git a/backend/workflows/static/workflows/css/login.css b/backend/workflows/static/workflows/css/login.css
index 5de49cb..5efb371 100644
--- a/backend/workflows/static/workflows/css/login.css
+++ b/backend/workflows/static/workflows/css/login.css
@@ -86,33 +86,20 @@ body {
   width: 100%;
 }
 
-.login-alert {
+.login-card .app-alert {
   margin: 0 0 12px;
-  padding: 12px 14px;
-  border-radius: 12px;
-  border: 1px solid #d6e1ef;
-  background: #f8fbff;
-  display: grid;
-  gap: 4px;
-  font-size: 14px;
 }
 
-.login-alert strong {
+.login-card .app-alert strong {
   font-size: 14px;
   line-height: 1.2;
 }
 
-.login-alert span {
+.login-card .app-alert span {
   color: #5f6f85;
   line-height: 1.45;
 }
 
-.login-alert-error {
-  color: #991b1b;
-  border-color: #f0c8c8;
-  background: linear-gradient(180deg, #fff7f7, #fff1f1);
-}
-
 @media (max-width: 760px) {
   body {
     padding: 14px;
diff --git a/backend/workflows/static/workflows/css/onboarding_intro_session.css b/backend/workflows/static/workflows/css/onboarding_intro_session.css
index e4f7223..36c5c65 100644
--- a/backend/workflows/static/workflows/css/onboarding_intro_session.css
+++ b/backend/workflows/static/workflows/css/onboarding_intro_session.css
@@ -18,7 +18,7 @@
     .hero h1 { margin: 0; font-size: 32px; line-height: 1.08; color: var(--brand-blue); }
     .sub { margin: 8px 0 0; color: var(--muted); max-width: 780px; }
     .content { padding: 20px 22px 24px; }
-    .flash { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid #bfe6c9; background: var(--ok-bg); color: var(--ok-ink); }
+    .app-messages { margin: 0 0 12px; }
     .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
     .card { border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px; }
     .card h2 { margin: 0 0 10px; font-size: 16px; color: #1b3764; }
diff --git a/backend/workflows/static/workflows/css/requests_dashboard.css b/backend/workflows/static/workflows/css/requests_dashboard.css
index 9af2e0e..ca6f26a 100644
--- a/backend/workflows/static/workflows/css/requests_dashboard.css
+++ b/backend/workflows/static/workflows/css/requests_dashboard.css
@@ -872,18 +872,10 @@
       font-size: 12px;
     }
 
-    .flash {
+    .app-messages {
       margin: 0 24px 14px;
-      padding: 12px 14px;
-      border-radius: 16px;
-      border: 1px solid rgba(217, 227, 238, 0.9);
-      background: rgba(248, 251, 255, 0.95);
     }
 
-    .flash.success { border-color: #bfe6c9; background: #edf9f1; color: #116634; }
-    .flash.warning { border-color: #f5d8a8; background: #fff8ea; color: #8a5a00; }
-    .flash.error { border-color: #f4c7c7; background: #fff1f1; color: #8e1e1e; }
-
     .empty-state {
       text-align: center;
       color: var(--muted);
diff --git a/backend/workflows/templates/registration/login.html b/backend/workflows/templates/registration/login.html
index 121a34e..1bb0957 100644
--- a/backend/workflows/templates/registration/login.html
+++ b/backend/workflows/templates/registration/login.html
@@ -25,9 +25,11 @@
         <input type="hidden" name="next" value="{{ next }}" />
       {% endif %}
       {% if form.errors %}
-        <div class="login-alert login-alert-error" role="alert" aria-live="assertive">
-          <strong>{% trans "Anmeldung fehlgeschlagen" %}</strong>
-          <span>{% trans "Benutzername oder Passwort sind nicht korrekt. Bitte versuchen Sie es erneut." %}</span>
+        <div class="app-alert app-alert-error" role="alert" aria-live="assertive">
+          <div class="app-alert-body">
+            <strong>{% trans "Anmeldung fehlgeschlagen" %}</strong><br />
+            <span>{% trans "Benutzername oder Passwort sind nicht korrekt. Bitte versuchen Sie es erneut." %}</span>
+          </div>
         </div>
       {% endif %}
       <div class="field{% if form.errors %} has-error{% endif %}">{{ form.username.label_tag }}{{ form.username }}</div>
diff --git a/backend/workflows/templates/workflows/form_builder.html b/backend/workflows/templates/workflows/form_builder.html
index 7ef692f..58697b3 100644
--- a/backend/workflows/templates/workflows/form_builder.html
+++ b/backend/workflows/templates/workflows/form_builder.html
@@ -15,11 +15,7 @@
       <p>{% trans "Felder per Drag-and-Drop sortieren und pro Schritt gruppieren." %}</p>
     </header>
 
-    {% if messages %}
-      {% for message in messages %}
-        <div class="flash {% if message.tags == 'error' %}error{% endif %}">{{ message }}</div>
-      {% endfor %}
-    {% endif %}
+    {% include 'workflows/includes/messages.html' %}
 
     <div class="toolbar">
       {% for key, label in form_types %}
diff --git a/backend/workflows/templates/workflows/home.html b/backend/workflows/templates/workflows/home.html
index f3abc38..afbbc86 100644
--- a/backend/workflows/templates/workflows/home.html
+++ b/backend/workflows/templates/workflows/home.html
@@ -49,11 +49,7 @@
     </div>
 
     <main class="main">
-      {% if messages %}
-        {% for message in messages %}
-          <div class="msg {% if message.tags == 'error' %}error{% endif %}">{{ message }}</div>
-        {% endfor %}
-      {% endif %}
+      {% include 'workflows/includes/messages.html' %}
 
       <div class="section-head">
 <h2>{% trans "Apps" %}</h2>
diff --git a/backend/workflows/templates/workflows/includes/messages.html b/backend/workflows/templates/workflows/includes/messages.html
new file mode 100644
index 0000000..8f811cc
--- /dev/null
+++ b/backend/workflows/templates/workflows/includes/messages.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+{% if messages %}
+  <div class="app-messages" aria-live="polite">
+    {% for message in messages %}
+      <div class="app-alert {% if message.tags %}app-alert-{{ message.tags|cut:' ' }}{% else %}app-alert-info{% endif %}" role="alert">
+        <div class="app-alert-body">{{ message }}</div>
+      </div>
+    {% endfor %}
+  </div>
+{% endif %}
diff --git a/backend/workflows/templates/workflows/integrations_setup.html b/backend/workflows/templates/workflows/integrations_setup.html
index e5419a4..662d648 100644
--- a/backend/workflows/templates/workflows/integrations_setup.html
+++ b/backend/workflows/templates/workflows/integrations_setup.html
@@ -21,11 +21,7 @@
       <a class="tab {% if kind == 'rules' %}active{% endif %}" href="/admin-tools/integrations/?kind=rules">{% trans "Workflow-Regeln" %}</a>
     </div>
 
-    {% if messages %}
-      {% for message in messages %}
-        <div class="msg {% if message.tags == 'error' %}error{% endif %}">{{ message }}</div>
-      {% endfor %}
-    {% endif %}
+    {% include 'workflows/includes/messages.html' %}
 
     {% if kind == 'nextcloud' %}
       <form class="card" method="post" action="/admin-tools/integrations/save-nextcloud/">
diff --git a/backend/workflows/templates/workflows/intro_builder.html b/backend/workflows/templates/workflows/intro_builder.html
index 2f7acad..691eb40 100644
--- a/backend/workflows/templates/workflows/intro_builder.html
+++ b/backend/workflows/templates/workflows/intro_builder.html
@@ -19,11 +19,7 @@
       </div>
     </div>
 
-    {% if messages %}
-      {% for message in messages %}
-        <div class="flash {% if message.tags == 'error' %}error{% else %}success{% endif %}">{{ message }}</div>
-      {% endfor %}
-    {% endif %}
+    {% include 'workflows/includes/messages.html' %}
 
     <form class="card" method="post" action="/admin-tools/intro-builder/">
       {% csrf_token %}
diff --git a/backend/workflows/templates/workflows/onboarding_intro_session.html b/backend/workflows/templates/workflows/onboarding_intro_session.html
index a36bcd3..a76c898 100644
--- a/backend/workflows/templates/workflows/onboarding_intro_session.html
+++ b/backend/workflows/templates/workflows/onboarding_intro_session.html
@@ -18,11 +18,7 @@
     </div>
 
     <div class="content">
-      {% if messages %}
-        {% for message in messages %}
-          <div class="flash">{{ message }}</div>
-        {% endfor %}
-      {% endif %}
+      {% include 'workflows/includes/messages.html' %}
 
       <div class="meta">
         <div class="card">
diff --git a/backend/workflows/templates/workflows/requests_dashboard.html b/backend/workflows/templates/workflows/requests_dashboard.html
index 8f306e3..20e6536 100644
--- a/backend/workflows/templates/workflows/requests_dashboard.html
+++ b/backend/workflows/templates/workflows/requests_dashboard.html
@@ -105,11 +105,7 @@
     </section>
     </section>
 
-    {% if messages %}
-      {% for message in messages %}
-        <div class="flash {{ message.tags }}">{{ message }}</div>
-      {% endfor %}
-    {% endif %}
+    {% include 'workflows/includes/messages.html' %}
 
     <section class="content-grid">
       <section class="table-card" id="vorgaenge">
diff --git a/backend/workflows/templates/workflows/welcome_emails.html b/backend/workflows/templates/workflows/welcome_emails.html
index 94eb5e9..d2175cb 100644
--- a/backend/workflows/templates/workflows/welcome_emails.html
+++ b/backend/workflows/templates/workflows/welcome_emails.html
@@ -14,11 +14,7 @@
     <h1>{% trans "Geplante Welcome E-Mails" %}</h1>
     <p class="sub">{% trans "Welcome-Mails konfigurieren und geplante Mails steuern (sofort senden, pausieren, fortsetzen, abbrechen)." %}</p>
 
-    {% if messages %}
-      {% for message in messages %}
-        <div class="msg {% if message.tags == 'error' %}error{% endif %}">{{ message }}</div>
-      {% endfor %}
-    {% endif %}
+    {% include 'workflows/includes/messages.html' %}
 
     <form class="card" method="post" action="/admin-tools/welcome-emails/settings/">
       {% csrf_token %}