[IMP] website_mass_mailing: improve "Newsletter" snippets layouts

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

3 files changed, 32 insertions, 19 deletions

diff --git a/addons/website_mass_mailing/models/website_mass_mailing.py b/addons/website_mass_mailing/models/website_mass_mailing.py
index bcf09212c3e..ce92127a1c1 100644
--- a/addons/website_mass_mailing/models/website_mass_mailing.py
+++ b/addons/website_mass_mailing/models/website_mass_mailing.py
@@ -9,7 +9,7 @@ class MassMailingPopup(models.Model):
     _description = "Mailing list popup"
 
     def _default_popup_content(self):
-        return self.env['ir.ui.view']._render_template('website_mass_mailing.s_newsletter_block')
+        return self.env['ir.ui.view']._render_template('website_mass_mailing.s_newsletter_subscribe_popup_content')
 
     mailing_list_id = fields.Many2one('mailing.list')
     website_id = fields.Many2one('website')
diff --git a/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
index dbf59564104..425d9e1a98e 100644
--- a/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
+++ b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
@@ -8,16 +8,15 @@
         display: none;
     }
     .close {
+        z-index: $zindex-modal;
         @include o-position-absolute(0, 0);
-        font-size: $font-size-sm;
-        width: 2 * $font-size-sm;
-        height: 2 * $font-size-sm;
+        width: $font-size-lg * 2;
+        height: $font-size-lg * 2;
+        line-height: $font-size-lg * 2;
+        margin: 0;
         padding: 0;
-        margin: (-$font-size-sm) (-$font-size-sm) 0 0;
-        opacity: 1;
-        background-color: $white;
-        z-index: 1;
-        border-radius: $font-size-sm;
+        @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
         box-shadow: $box-shadow-sm;
+        opacity: 1;
     }
 }
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index a8cbc35eba0..09987a98176 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -37,15 +37,13 @@
 </template>
 
 <template id="s_newsletter_block" name="Newsletter block">
-    <section class="s_newsletter_block pt64 pb64 oe_img_bg" style="background-image: url('/web/image/website.library_image_17');">
+    <section class="s_newsletter_block bg-200 pt32 pb32">
         <div class="container">
             <div class="row">
-                <div class="col-lg-7 offset-lg-5 pt32 pb32 bg-white-75">
-                    <div class="text-center">
-                        <h1 class="text-uppercase font-weight-bold">Always First.</h1>
-                        <p>Be the first to find out all the latest news, products and trends.</p>
-                        <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"/>
-                    </div>
+                <div class="col-lg-8 offset-lg-2 pt24 pb24">
+                    <h2>Always First.</h2>
+                    <p>Be the first to find out all the latest news, products, and trends.</p>
+                    <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"/>
                 </div>
             </div>
         </div>
@@ -56,11 +54,27 @@
     <div class="o_newsletter_popup o_snippet_invisible" data-list-id="0"/>
 </template>
 
+<template id="s_newsletter_subscribe_popup_content" name="Newsletter Popup Content">
+    <section class="s_text_block oe_img_bg pt88 pb64" data-snippet="s_text_block"
+             style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 0 100%;">
+        <div class="container s_allow_columns">
+            <h1 style="text-align: center;">Always <b>First</b>.</h1>
+            <p style="text-align: center;">Be the first to find out all the latest news,<br/> products, and trends.</p>
+        </div>
+    </section>
+    <section class="s_text_block" data-snippet="s_text_block">
+        <div class="container">
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-8 offset-lg-2 pt32 pb32">
+                    <t t-snippet-call="website_mass_mailing.s_newsletter_subscribe_form"/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
 <template id="newsletter_subscribe_options" name="Newsletter Subscribe Options" inherit_id="website.snippet_options">
     <xpath expr="//*[@t-set='so_snippet_addition_selector']" position="inside">, .o_newsletter_popup</xpath>
-    <xpath expr="//*[@id='row_valign_snippet_option']" position="attributes">
-        <attribute name="data-selector" separator="," add=".s_newsletter_block"/>
-    </xpath>
     <xpath expr="//div" position="after">
         <t t-set="selector" t-value="'.js_subscribe'"/>
         <div data-js="mailing_list_subscribe"