[FW][MERGE] digest, various: add or improve digest tips and digest layout

PURPOSE

Review the tips and digest layout design to make sure they have a WOW effect
and increase trial conversion/retention.

SPECIFICATIONS: LAYOUT

Besides changing the tips, a cleaning of digest layout was performed. Emails
were reported to look not neat in Outlook and somewhat random in mail.com or
gmail.com.

Most recent HTML CSS cannot be used to make HTML emails because each email
provider renders emails its own way. This means a given email may renders
differently in gmail.com and outlook.

The layout of the email was composed of several levels of embedded tables
which means huge maintenance effort. So it was totally rewritten with divs
and CSS, but some properties are not taken into account.

A lot of page component improvements were done. It consisted in replacing most
of the style attribute in tags with CSS classes and ids. This step is
especially useful for tip formatting because before, if a style modification
was needed, it had to be performed on each tip individually.

SPECIFICATIONS: TIPS

Add / Improve tips in cmr, purchase, hr_recruitment, website, hr_expense, project,
digest, sale_management, im_livechat, stock, mrp, account.

LINKS

COM PR: odoo/odoo#53580
ENT PR: odoo/enterprise#11394

closes odoo/odoo#55807

Forward-port-of: odoo/odoo#53580
Related: odoo/enterprise#12372
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

1 files changed, 377 insertions, 194 deletions

diff --git a/addons/digest/data/digest_data.xml b/addons/digest/data/digest_data.xml
index 30a8316f469..a697d17b43d 100644
--- a/addons/digest/data/digest_data.xml
+++ b/addons/digest/data/digest_data.xml
@@ -15,35 +15,297 @@
             body {
                 margin: 0;
                 padding: 0;
+                font-family: Arial, Helvetica, Verdana, sans-serif;
             }
-            @media only screen and (max-width:650px) {
-                .d-block{
+            #header_background {
+                background-color: #875a7b;
+            }
+            .global_layout {
+                max-width: 588px;
+                margin: 0 auto;
+                border: 1px solid #eeeeee;
+                border-top: 0;
+                background-color: #ffffff;
+            }
+            .company_name {
+                display: inline;
+                vertical-align: middle;
+                font-weight: bold;
+                color: #8f8f8f;
+            }
+            .title_subtitle {
+                font-weight: bold;
+                color: #282f33;
+                word-break: break-all;
+            }
+            .button {
+                float: right;
+                background-color: #875a7b;
+                color: #ffffff;
+                border-radius: 5px;
+            }
+            #button_connect {
+                text-align: center;
+            }
+            .date {
+                color: #8f8f8f;
+            }
+            .tip_title {
+                margin-top: 0;
+                font-weight: bold;
+            }
+            .tip_content {
+                margin: 0 auto;
+                color:#333333;
+                text-align: justify;
+                text-justify: inter-word;
+            }
+            .illustration_border {
+                width: 100%;
+                border: 1px solid grey;
+            }
+            .kpi_row_footer {
+                padding-bottom: 20px;
+            }
+            .kpi_header {
+                overflow: auto;
+                margin-bottom: 10px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid #eeeeee;
+                font-size: 15px;
+                font-weight: bold;
+                color: #282f33;
+            }
+            #button_open_report {
+                padding: 5px 10px;
+                font-size: 12px;
+                font-weight: normal;
+            }
+            .kpi_cell {
+                float: left;
+                width: 33%;
+                text-align: center;
+            }
+            .kpi_value {
+                color: #282f33;
+                font-weight: bold;
+                text-decoration: none;
+            }
+            .kpi_value_label {
+                display: inline-block;
+                margin-bottom: 10px;
+                color: #888888;
+                font-size: 12px;
+                text-transform: uppercase;
+            }
+            .kpi_margin {
+                width: 75px;
+                padding: 5px 10px;
+                text-decoration: none;
+                border-radius: 5px;
+            }
+            .positive_kpi_margin {
+                border: 1px solid #c4ecd7;
+                background-color: #d5f1e2;
+                color: #17613a;
+            }
+            .negative_kpi_margin {
+                border: 1px solid #f4cfce;
+                background-color: #f7dddc;
+                color: #712b29;
+            }
+            .kpi_trick {
+                clear: both;
+            }
+            .download_app {
+                height: 40px;
+                margin-bottom: 5px;
+                display: inline-block;
+            }
+            .preference_div {
+                clear: both;
+                background-color: #eeeeee;
+                text-align: center;
+            }
+            .preference {
+                margin-bottom: 15px;
+                color: #6b6d70;
+            }
+            .preference a {
+                text-decoration: none;
+            }
+            .by_odoo {
+                color: #8f8f8f;
+            }
+            .odoo_link {
+                text-decoration: none;
+            }
+            .odoo_link_text {
+                font-weight: bold;
+                color: #875a7b;
+            }
+            .run_business {
+                color: #2d2a26;
+            }
+            #footer {
+                background-color: #eeeeee;
+                color: #8f8f8f;
+                text-align: center;
+            }
+
+            @media only screen and (max-width: 650px) {
+                .d-block {
                     display: block !important;
                 }
-                .mobile-hide{
-                    display: none !important;
+                #header_background {
+                    padding-top: 0px;
+                }
+                #header {
+                    padding: 15px 20px;
+                    border: 1px solid #eeeeee;
+                }
+                .global_layout {
+                    padding: 20px;
+                }
+                .company_name {
+                    font-size: 15px;
+                }
+                .title_subtitle {
+                    margin: 5px auto;
+                }
+                #button_connect {
+                    padding: 4px 10px;
+                    font-size: 12px;
+                }
+                .date {
+                    margin-top: 10px;
+                    font-size: 10px;
+                }
+                .tip_title {
+                    font-size: 14px;
+                }
+                .tip_content {
+                    margin: 10px auto 0 auto;
+                    font-size: 12px;
+                    line-height: 20px;
+                }
+                .illustration_border {
+                    margin-top: 15px;
+                }
+                .kpi_value {
+                    font-size: 20px;
+                }
+                .kpi_margin {
+                    font-size: 10px;
+                }
+                .kpi_margin_margin {
+                    margin-bottom: 5px;
+                }
+                .preference_div {
+                    padding: 15px;
+                }
+                .preference {
+                    font-size: 12px;
                 }
-                .mobile-w-75{
-                    width: 75% !important;
+                .by_odoo {
+                    font-size: 10px;
                 }
-                .mobile-w-33{
-                    width: 33% !important;
+                .run_business {
+                    margin: 20px auto;
+                    font-size: 12px;
                 }
-                .font-25{
-                    font-size: 25px !important;
-                    line-height: 25px !important;
+                #footer {
+                    font-size: 15px;
                 }
-                .font-18{
-                    font-size: 18px !important;
-                    line-height: 25px !important;
+                #powered {
+                    margin-top: 15px;
                 }
-                .font-16{
-                    font-size: 16px !important;
-                    line-height: 25px !important;
+                .tip_twocol {
+                    overflow: auto;
+                    margin-top: 15px;
                 }
-                .font-12{
-                    font-size: 12px !important;
-                    line-height: 20px !important;
+                .tip_twocol_left {
+                    text-align: left;
+                }
+                .tip_twocol_img {
+                    width: 90%;
+                }
+            }
+
+            @media only screen and (min-width: 651px) {
+                #header_background {
+                    padding-top: 70px;
+                }
+                #header {
+                    padding: 20px 30px 25px 30px;
+                    border-left: 1px solid #875a7b;
+                    border-right: 1px solid #875a7b;
+                }
+                .global_layout {
+                    padding: 25px 30px 30px 30px;
+                }
+                .company_name {
+                    font-size: 25px;
+                }
+                .title_subtitle {
+                    margin: 10px auto;
+                }
+                .button {
+                    padding: 5px 10px;
+                }
+                #button_connect {
+                    padding: 6px 10px;
+                    font-size: 15px;
+                }
+                .date {
+                    margin-top: 15px;
+                    font-size: 12px;
+                }
+                .tip_title {
+                    font-size: 20px;
+                }
+                .tip_content {
+                    margin: 15px auto 0 auto;
+                    font-size: 15px;
+                    line-height: 25px;
+                }
+                .illustration_border {
+                    margin-top: 20px;
+                }
+                .kpi_value {
+                    font-size: 30px;
+                }
+                .kpi_margin {
+                    font-size: 12px;
+                }
+                .kpi_margin_margin {
+                    margin-bottom: 10px;
+                }
+                .preference_div {
+                    padding: 20px;
+                }
+                .preference {
+                    font-size: 15px;
+                }
+                .by_odoo {
+                    font-size: 12px;
+                }
+                .run_business {
+                    margin: 15px auto;
+                    font-size: 18px;
+                }
+                #footer {
+                    font-size: 20px;
+                }
+                #stock_tip {
+                    overflow: auto;
+                    margin-top: 20px;
+                }
+                #stock_div_img {
+                    text-align: center;
+                }
+                #stock_img {
+                    width: 70%;
                 }
             }
          </style>
@@ -56,147 +318,78 @@
 
     <!-- DIGEST MAIN TEMPLATE -->
     <template id="digest_mail_main">
-<div style="margin:0; padding:0">
-    <table cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr class="mobile-hide" bgcolor="#875a7b"><td height="70"> </td></tr>
-        <tr bgcolor="#875a7b">
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee;width: 100%; max-width: 650px; padding: 30px 30px">
-                    <tr>
-                        <td>
-                            <table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td class="mobile-w-75" style="text-align: left;">
-                                        <span class="font-16" style="color:#8F8F8F;font-weight:bold;font-size: 20px; line-height: 30px;" t-field="company.name"/>
-                                        <br/>
-                                        <div class="font-18" style="color:#282f33;font-weight:bold;font-size: 25px; line-height: 35px; margin-right: 5px; display: inline-block; max-width: 500px;word-break: break-all;" t-esc="title"/>
-                                        <div t-if="sub_title" class="font-18" style="color:#282f33;font-weight:bold;font-size: 25px; line-height: 35px; margin-right: 5px; display: inline-block; max-width: 500px;word-break: break-all;" t-esc="sub_title"/>
-                                        <div class="font-12" style="color:#8F8F8F;font-size: 15px;display: inline-block;"><t t-esc="formatted_date"/></div>
-                                    </td>
-                                    <td valign="top" style="text-align:right;">
-                                        <a t-att-href="top_button_url" target="_blank" style="text-align: center; color: #fff; background-color: #9a5b82; border-radius: 8px; font-size: 15px; padding: 5px 10px;  display: inline-block; text-decoration: none; min-width: 65px;">
-                                            <span t-esc="top_button_label"/>
-                                        </a>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table t-if="tips" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; border-bottom: none;width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr>
-                        <td>
-                            <table t-foreach="tips" t-as="tip" cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td valign="top">
-                                        <t t-raw="tip"/>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table t-if="kpi_data" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; border-bottom: none;width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr t-foreach="kpi_data" t-as="kpi_info">
-                        <td t-if="kpi_info.get('kpi_col1') or kpi_info.get('kpi_col2') or kpi_info.get('kpi_col3')">
-                            <table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td align="left" style="border-bottom: 1px solid #eeeeee;">
-                                        <span style="color:#282f33;font-size: 15px; font-weight: bold; line-height: 30px" t-esc="kpi_info['kpi_fullname']"/>
-                                        <a t-if="kpi_info['kpi_action']" t-att-href="'/web#action=%s' % kpi_info['kpi_action']"
-                                            style="float:right; background-color:#875A7B;margin-left: 5px; padding: 5px 12px 5px 12px; text-decoration: none; color: #ffffff; border-radius: 3px; font-size:13px; font-weight:bold; margin-bottom: 5px;">
-                                            View
-                                        </a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <table cellspacing="0" cellpadding="0" align="center" border="0" style="width:100%; padding: 20px 0;">
-                                            <tr valign="top">
-                                                <td t-if="kpi_info.get('kpi_col1')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col1']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col1'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col1']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                                <td t-if="kpi_info.get('kpi_col2')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col2']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col2'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col2']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                                <td t-if="kpi_info.get('kpi_col3')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col3']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col3'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col3']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                            </tr>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-                <table t-if="preferences" bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr>
-                        <td bgcolor="#fafafa" width="100%" style="padding-top: 20px; padding-bottom: 20px;" align="center">
-                            <p t-foreach="preferences" t-as="preference" class="font-12" style="font-size: 15px; color: #6b6d70">
-                                <t t-raw="preference"/>
-                            </p>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <t t-if="body" t-raw="body"/>
-    <table t-if="display_mobile_banner" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr valign="top">
-                        <td>
-                            <t t-call="digest.digest_section_mobile"/>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#eeeeee" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="margin-top:30px;font-size: 15px; text-align:center; width: 100%; max-width: 650px;">
-                    <tr>
-                        <td style="color:#8F8F8F;font-weight:bold;font-size: 20px; line-height: 30px;" t-esc="company.name"/>
-                    </tr>
-                    <tr>
-                        <td style="color:#8F8F8F;font-size: 12px; line-height: 30px;">Powered by <a href="https://www.odoo.com" target="_blank" style="color:#875A7B">Odoo</a>.</td>
-                    </tr>
-                    <tr>
-                        <td height="30"> </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
+<div id="header_background">
+    <div class="global_layout" id="header">
+        <div style="overflow: auto;">
+            <p t-field="company.name" class="company_name" />
+            <a t-att-href="top_button_url" target="_blank"><span t-esc="top_button_label" class="button" id="button_connect" /></a>
+        </div>
+        <div class="title_subtitle">
+            <p t-esc="title" />
+            <p t-if="sub_title" t-esc="sub_title" />
+        </div>
+        <div t-esc="formatted_date" class="date" />
+    </div>
+</div>
+
+<div style="background-color: #eeeeee;">
+<div t-foreach="tips" t-as="tip" t-raw="tip" class="global_layout" />
+
+<div t-if="kpi_data" class="global_layout" style="padding-bottom: 0;">
+    <div t-foreach="kpi_data" t-as="kpi_info" class="kpi_row_footer">
+        <div t-if="kpi_info.get('kpi_col1') or kpi_info.get('kpi_col2') or kpi_info.get('kpi_col3')">
+            <div class="kpi_header">
+                <span t-esc="kpi_info['kpi_fullname']" style="vertical-align: middle;" />
+                <a t-if="kpi_info['kpi_action']" t-att-href="'/web#action=%s' % kpi_info['kpi_action']"><span class="button" id="button_open_report">Open Report</span></a>
+            </div>
+            <div t-if="kpi_info.get('kpi_col1')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi" >
+                    <t t-set="kpi_value" t-value="kpi_info['kpi_col1']['value']"/>
+                    <t t-set="kpi_margin" t-value="kpi_info['kpi_col1'].get('margin')"/>
+                    <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col1']['col_subtitle']"/>
+                </div>
+            </div>
+            <div t-if="kpi_info.get('kpi_col2')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi">
+                    <div t-set="kpi_value" t-value="kpi_info['kpi_col2']['value']"/>
+                    <div t-set="kpi_margin" t-value="kpi_info['kpi_col2'].get('margin')"/>
+                    <div t-set="kpi_subtitle" t-value="kpi_info['kpi_col2']['col_subtitle']"/>
+                </div>
+            </div>
+            <div t-if="kpi_info.get('kpi_col3')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi">
+                    <div t-set="kpi_value" t-value="kpi_info['kpi_col3']['value']"/>
+                    <div t-set="kpi_margin" t-value="kpi_info['kpi_col3'].get('margin')"/>
+                    <div t-set="kpi_subtitle" t-value="kpi_info['kpi_col3']['col_subtitle']"/>
+                </div>
+            </div>
+            <div class="kpi_trick" />
+        </div>
+    </div>
+</div>
+
+<div t-if="preferences">
+    <div class="global_layout">
+        <div class="preference_div">
+            <div t-foreach="preferences" t-as="preference" class="preference">
+                <t t-raw="preference"/>
+            </div>
+            <div class="by_odoo">
+                Sent by <a href="https://www.odoo.com" target="_blank" class="odoo_link"><span class="odoo_link_text">Odoo</span></a> – <a href="/web#view_type=form&amp;model=digest.digest&amp;id=${object.id}" target="_blank" style="text-decoration: none;"><span style="color: #8f8f8f;">Unsubscribe</span></a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<t t-if="body" t-raw="body"/>
+<div t-if="display_mobile_banner" t-call="digest.digest_section_mobile" />
+
+<div class="global_layout" id="footer">
+    <p style="font-weight: bold;">My Company (San Francisco)</p>
+    <p class="by_odoo" id="powered">
+        Powered by <a href="https://www.odoo.com" target="_blank" class="odoo_link"><span class="odoo_link_text">Odoo</span></a>
+    </p>
+</div>
 </div>
     </template>
 
@@ -205,20 +398,20 @@
 
     <!-- MOBILE BANNER -->
     <template id="digest_section_mobile">
-<table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-    <tr>
-       <td valign="top" width="168">
-            <img src="https://www.odoo.com/web/image/24717933/odoo-mobile.png" alt="Odoo Mobile" width="168"/>
-        </td>
-        <td valign="top">
-            <p class="font-16" style="color:#2d2a26;font-size: 18px;line-height: 23px; margin-top: 20px">Run your business from anywhere with <br class="mobile-hide" /><b>Odoo Mobile</b>.</p>
-            <a href="https://play.google.com/store/apps/details?id=com.odoo.mobile" target="_blank"><img src="https://www.odoo.com/digest/static/src/img/google_play.png" style="display:inline-block;height: 40px; margin-bottom: 5px"/></a>
-            <span class="mobile-hide"> </span>
-            <a href="https://itunes.apple.com/us/app/odoo/id1272543640" target="_blank"><img src="https://www.odoo.com/digest/static/src/img/app_store.png" style="display:inline-block;height: 40px; margin-bottom: 5px"/></a>
-
-        </td>
-    </tr>
-</table>
+<div class="global_layout" style="overflow: auto;">
+    <div style="width: 50%; float: left; text-align: right;">
+        <img src="https://www.odoo.com/web/image/24717933/odoo-mobile.png" alt="Odoo Mobile" />
+    </div>
+    <div style="width: 50%; float: left;">
+        <p class="run_business">Run your business from anywhere with <b>Odoo Mobile</b>.</p>
+        <div>
+            <a href="https://play.google.com/store/apps/details?id=com.odoo.mobile" target="_blank"><img class="download_app" src="https://www.odoo.com/digest/static/src/img/google_play.png" /></a>
+        </div>
+        <div>
+            <a href="https://itunes.apple.com/us/app/odoo/id1272543640" target="_blank"><img class="download_app" src="https://www.odoo.com/digest/static/src/img/app_store.png" /></a>
+        </div>
+    </div>
+</div>
     </template>
 
 
@@ -226,24 +419,14 @@
 
     <!-- KPI DISPLAY -->
     <template id="digest_tool_kpi">
-<span class="font-25" style="color:#282f33;font-size: 35px; font-weight: bold; text-decoration: none; line-height: 36px;">
-    <t t-esc="kpi_value"/>
-</span><br/>
-<span style="color:#888888;display: inline-block; font-size: 12px; line-height: 18px; text-transform: uppercase;">
-    <t t-esc="kpi_subtitle"/>
-</span>
-<t t-if="kpi_margin">
-    <t t-if="kpi_margin &gt; 0.0">
-        <div style="background-color:#d5f1e2; border: 1px solid #c4ecd7; margin: 10px auto;width: 67px; line-height:27px; text-decoration: none; color: #17613a; border-radius: 5px; font-size:13px;">
-            ▲ <t t-esc="'%.2f' % kpi_margin"/>
-        </div>
-    </t>
-    <t t-elif="kpi_margin &lt; 0.0">
-        <div style="background-color:#f7dddc; border: 1px solid #f4cfce; margin: 10px auto;width: 67px; line-height:27px; text-decoration: none; color: #712b29; border-radius: 5px; font-size:13px;">
-            ▼ <t t-esc="'%.2f' % kpi_margin"/>
-        </div>
-    </t>
-</t>
+<span t-esc="kpi_value" class="kpi_value" />
+<br/>
+<span t-esc="kpi_subtitle" class="kpi_value_label" />
+<div t-if="kpi_margin" class="kpi_margin_margin">
+    <span   t-if="kpi_margin &gt; 0.0" class="kpi_margin positive_kpi_margin">▲ <t t-esc="'%.2f' % kpi_margin"/> %</span>
+    <span t-elif="kpi_margin &lt; 0.0" class="kpi_margin negative_kpi_margin">▼ <t t-esc="'%.2f' % kpi_margin"/> %</span>
+</div>
     </template>
 
-</data></odoo>
+</data>
+</odoo>