diff --git a/addons/loyalty/data/mail_template_data.xml b/addons/loyalty/data/mail_template_data.xml
index 1dc357fef07..4c4a8597811 100644
--- a/addons/loyalty/data/mail_template_data.xml
+++ b/addons/loyalty/data/mail_template_data.xml
@@ -7,29 +7,31 @@
         <field name="partner_to">{{ object._get_mail_partner().id }}</field>
         <field name="description">Sent to customer who purchased a gift card</field>
         <field name="body_html" type="html">
-            <div style="margin:0px; font-size:24px; font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:36px; color:#333333; text-align: center">
-                Here is your gift card!
-            </div>
-            <div style="padding-top:20px; padding-bottom:20px">
-                <img src="/loyalty/static/img/gift_card.png" style="display:block; border:0; outline:none; text-decoration:none; margin:auto;" width="300"/>
-            </div>
-            <div style="padding:0; margin:0px; padding-top:35px; padding-bottom:35px; text-align:center;">
-                <h3 style="margin:0px; line-height:48px; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:40px; font-style:normal; font-weight:normal; color:#333333; text-align:center">
-                    <strong t-out="format_amount(object.points, object.currency_id) or ''">$ 150.00</strong></h3>
-            </div>
-            <div style="padding:0; margin:0px; padding-top:35px; padding-bottom:35px; background-color:#efefef; text-align:center;">
-                <p style="margin:0px; font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:21px; color:#333333">
-                    <strong>Gift Card Code</strong>
-                </p>
-                <p style="margin:0px; font-size:25px;font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:38px; color:#A9A9A9" t-out="object.code or ''">4f10-15d6-41b7-b04c-7b3e</p>
-            </div>
-            <div t-if="object.expiration_date" style="padding:0; margin:0px; padding-top:10px; padding-bottom:10px; text-align:center;">
-                <h3 style="margin:0px; line-height:17px; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:normal; color:#A9A9A9; text-align:center">Card expires <t t-out="format_date(object.expiration_date) or ''">05/05/2021</t></h3>
-            </div>
-            <div style="padding:20px; margin:0px; text-align:center;">
-                <span style="background-color:#999999; display:inline-block; width:auto; border-radius:5px;">
-                    <a t-attf-href="{{ object.get_base_url() }}/shop" target="_blank" style="text-decoration:none; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:22px; color:#FFFFFF; border-style:solid; border-color:#999999; border-width:20px 30px; display:inline-block; background-color:#999999; border-radius:5px; font-weight:bold; font-style:normal; line-height:26px; width:auto; text-align:center">Use it right now!</a>
-                </span>
+            <div style="background: #ffffff">
+                <div style="margin:0px; font-size:24px; font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:36px; color:#333333; text-align: center">
+                    Here is your gift card!
+                </div>
+                <div style="padding-top:20px; padding-bottom:20px">
+                    <img src="/loyalty/static/img/gift_card.png" style="display:block; border:0; outline:none; text-decoration:none; margin:auto;" width="300"/>
+                </div>
+                <div style="padding:0; margin:0px; padding-top:35px; padding-bottom:35px; text-align:center;">
+                    <h3 style="margin:0px; line-height:48px; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:40px; font-style:normal; font-weight:normal; color:#333333; text-align:center">
+                        <strong t-out="format_amount(object.points, object.currency_id) or ''">$ 150.00</strong></h3>
+                </div>
+                <div style="padding:0; margin:0px; padding-top:35px; padding-bottom:35px; background-color:#efefef; text-align:center;">
+                    <p style="margin:0px; font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:21px; color:#333333">
+                        <strong>Gift Card Code</strong>
+                    </p>
+                    <p style="margin:0px; font-size:25px;font-family:arial, 'helvetica neue', helvetica, sans-serif; line-height:38px; color:#A9A9A9" t-out="object.code or ''">4f10-15d6-41b7-b04c-7b3e</p>
+                </div>
+                <div t-if="object.expiration_date" style="padding:0; margin:0px; padding-top:10px; padding-bottom:10px; text-align:center;">
+                    <h3 style="margin:0px; line-height:17px; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:14px; font-style:normal; font-weight:normal; color:#A9A9A9; text-align:center">Card expires <t t-out="format_date(object.expiration_date) or ''">05/05/2021</t></h3>
+                </div>
+                <div style="padding:20px; margin:0px; text-align:center;">
+                    <span style="background-color:#999999; display:inline-block; width:auto; border-radius:5px;">
+                        <a t-attf-href="{{ object.get_base_url() }}/shop" target="_blank" style="text-decoration:none; font-family:arial, 'helvetica neue', helvetica, sans-serif; font-size:22px; color:#FFFFFF; border-style:solid; border-color:#999999; border-width:20px 30px; display:inline-block; background-color:#999999; border-radius:5px; font-weight:bold; font-style:normal; line-height:26px; width:auto; text-align:center">Use it right now!</a>
+                    </span>
+                </div>
             </div>
         </field>
         <field name="report_template" ref="loyalty.report_gift_card"/>
@@ -46,7 +48,7 @@
         <field name="lang">{{ object._get_mail_partner().lang }}</field>
         <field name="description">Sent to customer with coupon information</field>
         <field name="body_html" type="html">
-<table border="0" cellpadding="0" cellspacing="0" style="width:100%; margin:0px auto;"><tbody>
+<table border="0" cellpadding="0" cellspacing="0" style="width:100%; margin:0px auto; background:#ffffff; color:#333333;"><tbody>
 <tr>
     <td valign="top" style="text-align: center; font-size: 14px;">
         <t t-if="object._get_mail_partner().name">
diff --git a/addons/web/static/src/legacy/scss/attachment_preview.scss b/addons/web/static/src/legacy/scss/attachment_preview.scss
index 1cab191d09c..16268926097 100644
--- a/addons/web/static/src/legacy/scss/attachment_preview.scss
+++ b/addons/web/static/src/legacy/scss/attachment_preview.scss
@@ -30,7 +30,7 @@ $o-attachment-margin: 5px;
         border-bottom: 1px solid rgba(black, 0.1);
         border-radius: 2px;
         padding: 4px 6px 0 4px;
-        background-color: rgba(black, 0.05);
+        background-color: rgba($o-black, 0.05);
 
         .o_attachment_delete_cross {
             float: right;