[IMP] website: improve "Popup" snippet

Review the layout to always use standard bootstrap classes so that
future task targeting modal can target s_popup snippets the same way
(for example: our task allowing to open a popup on click on a button).

This also allows to simplify the css and simplify the options. A new
option also now allows to have a backdrop, or not, so that user clicks
are blocked while the popup is opened, or not.

+ Adapt cookie bar accordingly.

Part of https://github.com/odoo/odoo/pull/52698
task-2210730

Co-authored-by: qsm-odoo <qsm@odoo.com>

1 files changed, 37 insertions, 45 deletions

diff --git a/addons/website/static/src/xml/website.cookies_bar.xml b/addons/website/static/src/xml/website.cookies_bar.xml
index 8f43ccb3698..1f43786926b 100644
--- a/addons/website/static/src/xml/website.cookies_bar.xml
+++ b/addons/website/static/src/xml/website.cookies_bar.xml
@@ -1,74 +1,66 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
     <t t-name="website.cookies_bar.text_title">
-        <div class="o_cookies_bar_text_title">
-            <p>Respecting your privacy is our priority.</p>
-        </div>
+        <h3 class="o_cookies_bar_text_title">
+            Respecting your privacy is our priority.
+        </h3>
     </t>
     <t t-name="website.cookies_bar.text_primary">
-        <div class="o_cookies_bar_text_primary">
+        <p class="o_cookies_bar_text_primary">
             We use cookies to provide you a better user experience.
-        </div>
+        </p>
     </t>
     <t t-name="website.cookies_bar.text_secondary">
-        <div class="o_cookies_bar_text_secondary">
-            We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see.
-            <br/>
+        <p class="o_cookies_bar_text_secondary">
+            We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see. <br/>
             By clicking on this banner, you give us permission to collect data.
-        </div>
+        </p>
     </t>
-
     <t t-name="website.cookies_bar.discrete">
-        <section class="pt4 pb4">
-            <div class="container text-600 d-flex align-items-center">
-                <div class="mb0">
-                    <t t-call="website.cookies_bar.text_primary"/>
+        <section class="o_colored_level o_cc o_cc1">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-8 pt16">
+                        <p>We use cookies to provide you a better user experience.</p>
+                    </div>
+                    <div class="col-lg-4 pt16 text-right">
+                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
+                    </div>
                 </div>
-                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
-                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
             </div>
         </section>
     </t>
     <t t-name="website.cookies_bar.classic">
-        <section class="pt24 pb24">
-            <div class="container text-600 d-flex align-items-center">
-                <div>
-                    <div class="h3 text-900">
+        <section class="o_colored_level o_cc o_cc1 pt32 pb16">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-6">
                         <t t-call="website.cookies_bar.text_title"/>
-                    </div>
-                    <div class="small">
                         <t t-call="website.cookies_bar.text_primary"/>
-                    </div>
-                    <div class="small">
                         <t t-call="website.cookies_bar.text_secondary"/>
                     </div>
-                </div>
-                <div class="ml-auto">
-                    <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block text-nowrap">I agree</a>
-                    <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap">Cookie Policy</a>
+                    <div class="col-lg-3 offset-lg-3">
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block">I agree</a>
+                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-block">Cookie Policy</a>
+                    </div>
                 </div>
             </div>
         </section>
     </t>
     <t t-name="website.cookies_bar.popup">
-        <section class="p-5">
-            <div class="container text-800 text-center">
-                <img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid" alt="Website Logo"/>
-                <br/><br/>
-                <div class="h3">
-                    <t t-call="website.cookies_bar.text_title"/>
-                </div>
-                <br/>
-                <div class="mb0 text-left">
-                    <t t-call="website.cookies_bar.text_primary"/>
-                </div>
-                <div class="text-left">
-                    <t t-call="website.cookies_bar.text_secondary"/>
+        <section class="o_colored_level o_cc o_cc1 p-5">
+            <div class="container text-center">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid mb-4" alt="Website Logo"/>
+                        <t t-call="website.cookies_bar.text_title"/>
+                        <t t-call="website.cookies_bar.text_primary"/>
+                        <t t-call="website.cookies_bar.text_secondary"/>
+                        <a href="/cookie-policy" class=" o_cookies_bar_text_policy btn btn-link mr-2">Cookie Policy</a>
+                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary">I agree</a>
+                    </div>
                 </div>
-                <br/>
-                <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-lg">Cookie Policy</a>
-                <br/>
-                <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link">I agree</a>
             </div>
         </section>
     </t>