From 7eda17fd4db9d36dfe5f5f786a510c3c8566eabc Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Tue, 2 Aug 2022 12:41:42 +0000
Subject: [PATCH] [IMP] mass_mailing: alert snippet improved

Structure and styling changed to allow padding X when this snippet is
not inside another snippet. Otherwise the alert block, in w-100, didn't
have any space between the edge of the email template and the block.

The "Type" option wasn't working: as all the elements can be changed
with other options anyway, the code for this one has been removed
instead of trying to fix it.

Part-of: odoo/odoo#95940
---
 .../static/src/snippets/s_alert/000.scss      | 26 ++++++-----
 .../mass_mailing/views/snippets/s_alert.xml   | 43 ++++++++++---------
 addons/mass_mailing/views/snippets_themes.xml |  4 +-
 3 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/addons/mass_mailing/static/src/snippets/s_alert/000.scss b/addons/mass_mailing/static/src/snippets/s_alert/000.scss
index 7675235e36a..ffb6ecb68aa 100644
--- a/addons/mass_mailing/static/src/snippets/s_alert/000.scss
+++ b/addons/mass_mailing/static/src/snippets/s_alert/000.scss
@@ -1,23 +1,29 @@
+.o_mail_snippet_general .s_mail_alert [class^="col-lg"]{
+    padding-left: 0!important;
+    padding-right: 0!important;
+}
 
 .s_mail_alert {
-    margin: $grid-gutter-width/2 0;
-    border-width: $alert-border-width;
-    border-style: solid;
-    border-radius: $alert-border-radius;
-    p, ul, ol {
-        &:last-child {
-            margin-bottom: 0;
+    .s_alert {
+        margin: auto;
+        border-width: $alert-border-width;
+        border-style: solid;
+        border-radius: $alert-border-radius;
+        p, ul, ol {
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
-    &.s_alert_sm {
+    .s_alert_sm {
         padding: $grid-gutter-width/3;
         font-size: $font-size-sm;
     }
-    &.s_alert_md {
+    .s_alert_md {
         padding: $grid-gutter-width/2;
         font-size: $font-size-base;
     }
-    &.s_alert_lg {
+    .s_alert_lg {
         padding: $grid-gutter-width;
         font-size: $font-size-lg;
     }
diff --git a/addons/mass_mailing/views/snippets/s_alert.xml b/addons/mass_mailing/views/snippets/s_alert.xml
index 22e2554baa4..83b0d889a00 100644
--- a/addons/mass_mailing/views/snippets/s_alert.xml
+++ b/addons/mass_mailing/views/snippets/s_alert.xml
@@ -1,43 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <template id="s_alert" name="Alert">
-    <div class="s_mail_alert s_alert_md alert-info w-100 clearfix o_mail_snippet_general pt16 pb16 px-3" data-snippet="s_alert">
-        <div class="s_alert_icon" valign="top">
-            <i class="fa fa-2x fa-info-circle"/>
-        </div>
-        <div class="s_alert_content">
-            <p><b>Explain the benefits you offer</b>
-            <br/>Don't write about products or services here, write about solutions.</p>
+    <div class="s_mail_alert o_mail_snippet_general pt16 pb16 mx-auto" data-snippet="s_alert">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="s_alert s_alert_md s_alert_info w-100" style="background-color: rgb(209 236 241); border-width: 1px !important; border-color: rgb(190 229 235) !important;">
+                        <div class="s_alert_icon" valign="top">
+                            <i class="fa fa-2x fa-info-circle" style="color: rgb(12 84 96);"/>
+                        </div>
+                        <div class="s_alert_content">
+                            <h3><span style="color: rgb(12 84 96); font-size: 16px; font-weight: bolder;">Explain the benefits you offer</span></h3>
+                            <p><font style="color: rgb(12 84 96);">Don't write about products or services here, write about solutions.</font></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <template id="s_alert_options" inherit_id="mass_mailing.snippet_options">
-    <xpath expr="//div[@id='so_width']" position="before">
-        <div data-selector=".s_mail_alert" data-js="Alert">
-            <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
-                <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
-                <we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
-                <we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
-                <we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
-                <we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
-                <we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
-            </we-select>
-        </div>
-    </xpath>
     <!-- Keep those options in separate xpath for options order -->
     <xpath expr="//div[@id='so_width']" position="after">
-        <div data-selector=".s_mail_alert">
+        <div data-selector=".s_mail_alert .s_alert">
             <we-select string="Size">
                 <we-button data-select-class="s_alert_sm">Small</we-button>
                 <we-button data-select-class="s_alert_md">Medium</we-button>
                 <we-button data-select-class="s_alert_lg">Large</we-button>
             </we-select>
-            <we-colorpicker string="Color" data-name="alert_colorpicker_opt"
+            <we-colorpicker string="Background Color" data-name="alert_colorpicker_opt"
                 data-select-style="true"
                 data-css-property="background-color"
                 data-color-prefix="alert-"/>
         </div>
+        <div data-selector=".s_mail_alert .s_alert">
+            <t t-call="mass_mailing.snippet_options_border_widgets">
+                <t t-set="so_rounded_no_dependencies" t-value="True"/>
+            </t>
+        </div>
     </xpath>
 </template>
 
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index d9169983701..c2a9c6379be 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -433,7 +433,7 @@
         </we-button-group>
     </div>
 
-    <div id="so_width" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
+    <div id="so_width" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
         <we-select string="Width">
             <we-button data-select-class="w-25">25%</we-button>
             <we-button data-select-class="w-50">50%</we-button>
@@ -442,7 +442,7 @@
         </we-select>
     </div>
 
-    <div id="so_block_align" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
+    <div id="so_block_align" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
         <we-button-group string="Alignment" data-dependencies="!so_width_100">
             <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
             <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>