From d7371fc32c2a2adc7b69add977abe56f2f9c1839 Mon Sep 17 00:00:00 2001
From: "Antoine (anso)" <anso@odoo.com>
Date: Thu, 1 Feb 2024 16:22:01 +0000
Subject: [PATCH] [FIX] web, website: restore background to notifications in
 front-end

Before this commit, `.bg-view` was set to `.o_notification`. This was
creating an issue in the front-end where `.bg-view` doesn't exist,
making the background of the notification transparent and ultimately
causing readability issues. Issue introduced in [1].

This commit changes the way we apply the background from a utility
class approach to a SCSS approach. That way, we can easily override
in `website.scss` with the `$body-color` of the website.

task-3716367
[1] 4e1f0b8ea522accae4860937c2fb3815281e8483

closes odoo/odoo#154081

X-original-commit: f8f8d2905db633cfaaa93b6cd163f4ab55dc4c8f
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 addons/web/static/src/core/notifications/notification.scss | 1 +
 addons/web/static/src/core/notifications/notification.xml  | 2 +-
 addons/website/static/src/scss/website.scss                | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/notifications/notification.scss b/addons/web/static/src/core/notifications/notification.scss
index c3147f42196..d7cd6768920 100644
--- a/addons/web/static/src/core/notifications/notification.scss
+++ b/addons/web/static/src/core/notifications/notification.scss
@@ -7,6 +7,7 @@
     z-index: $o-notification-zindex;
 
     .o_notification {
+        background-color: var(--Notification__background-color, #{$o-view-background-color}); // Needed to override the background in 'website.scss'
         border-left-width: $o-notification-border-left-width !important; // Overrides border-[x] utility classes
         box-shadow: $o-notification-shadow;
     }
diff --git a/addons/web/static/src/core/notifications/notification.xml b/addons/web/static/src/core/notifications/notification.xml
index 1d75a60a079..6135408641f 100644
--- a/addons/web/static/src/core/notifications/notification.xml
+++ b/addons/web/static/src/core/notifications/notification.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.NotificationWowl">
-        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} bg-view mb-2 position-relative"
+        <div t-on-mouseenter="this.props.freeze" t-on-mouseleave="this.props.refresh" t-attf-class="o_notification {{props.className}} border border-{{props.type}} mb-2 position-relative"
          role="alert" aria-live="assertive" aria-atomic="true">
             <strong t-if="props.title" t-attf-class="o_notification_title d-block text-{{props.type}} py-2 ps-3 pe-5" t-out="props.title"/>
             <button type="button" class="o_notification_close btn" aria-label="Close" t-on-click="props.close">
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 0a92112ea49..c53079cd376 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1675,6 +1675,11 @@ input[value*="data-oe-translation-initial-sha"] {
     }
 }
 
+// Notification
+.o_notification_manager .o_notification {
+    --Notification__background-color: #{$body-bg};
+}
+
 //------------------------------------------------------------------------------
 // Website Animate
 //------------------------------------------------------------------------------