[AA-910] Miscellaneous UI fixes and fixed unsubscribe link (#29288)

* fix: use pngs for the goal reminder email banner and remove redundant unsubscribe link

* fix: update

* fix: Miscellaneous UI fixes and fixed unsubscribe link

lms/djangoapps/course_goals/management/commands/goal_reminder_email.py

@@ -7,7 +7,6 @@ import logging
 from django.conf import settings
 from django.contrib.sites.models import Site
 from django.core.management.base import BaseCommand
-from django.urls import reverse
 from edx_ace import ace
 from edx_ace.message import Message
 from edx_ace.recipient import Recipient
@@ -53,10 +52,7 @@ def send_ace_message(goal):
 
     course_home_url = get_learning_mfe_home_url(course_key=goal.course_key, view_name='home')
 
-    goals_unsubscribe_url = settings.LEARNING_MICROFRONTEND_URL + reverse(
-        'course-home:unsubscribe-from-course-goal',
-        kwargs={'token': goal.unsubscribe_token}
-    )
+    goals_unsubscribe_url = f'{settings.LEARNING_MICROFRONTEND_URL}/goal-unsubscribe/{goal.unsubscribe_token}'
 
     language = get_user_preference(user, LANGUAGE_KEY)
 

lms/djangoapps/course_goals/templates/course_goals/edx_ace/goalreminder/email/body.html

@@ -2,12 +2,27 @@
 {% load i18n %}
 {% load django_markup %}
 {% load static %}
+{% block table_style %}
+    style="
+        font-family: Inter, Arial, sans-serif !important;
+        font-size: 1em;
+        line-height: 1.5;
+        max-width: 600px;
+    "
+{% endblock %}
+{% block main_style %}
+    style="
+        padding-bottom: 30px;
+        box-shadow: 0 1px 5px rgba(0,0,0,0.25);
+    "
+{% endblock %}
 {% block content %}
 {# email client support for style sheets is pretty spotty, so we have to inline all of these styles #}
 {# we're using important below to override inline styles and my understanding is for email clients where media queries do not work, they'll simply see the desktop css on their phone #}
-<table style="font-family: Inter, Arial, sans-serif; width: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
-    <tr style="width:inherit;">
-        <td style="width:inherit;">
+
+<table style="width: 100%;" align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
+    <tr>
+        <td>
             {% include "goal_reminder_banner.html" %}
             <style>
                 .goal-reminder-body-wrapper {
@@ -24,9 +39,9 @@
                     }
                 }
             </style>
-            <div class="goal-reminder-body-wrapper" style="width:inherit;">
-                <h1 style="
-                    font-size: 1.25rem;
+            <div class="goal-reminder-body-wrapper" style="width:inherit; font-size: 0.875rem; padding: 0 20px 0 20px;">
+                <h3 style="
+                    font-size: 1.38rem;
                     font-style: normal;
                     font-weight: 700;
                     line-height: 1.75rem;
@@ -35,7 +50,7 @@
                     {% filter force_escape %}{% blocktrans %}
                         There's still time to reach your goal
                     {% endblocktrans %}{% endfilter %}
-                </h1>
+                </h3>
 
                 <p style="color: rgba(0,0,0,.75);">
                     {% filter force_escape %}
@@ -77,7 +92,6 @@
                 <a style="
                         color: #00688D;
                         display: block;
-                        font-size: 0.875rem;
                         margin: 0.9375rem auto 0 auto;
                         text-align: center;
                         text-decoration: none;
@@ -85,7 +99,7 @@
                     "
                     href="{{goals_unsubscribe_url}}" target="_blank">
                     {% filter force_escape %}{% blocktrans %}
-                        Unsubscribe from goal reminder emails to this course
+                        Unsubscribe from goal reminder emails for this course
                     {% endblocktrans %}{% endfilter %}
                 </a>
             </div>

lms/templates/goal_reminder_banner.html

@@ -1,18 +1,9 @@
 {# email client support for style sheets is pretty spotty, so we have to inline all of these styles #}
-<style>
-@media only screen and (max-width: 456px) {
-  .goals-banner-div {
-    background-image: url('{{image_url}}goalreminder-mobile-hero.png') !important;
-  }
-}
-</style>
 {% if image_url %}
 <div class="goals-banner-div" style="
-    margin-left: -1.25rem;
-    margin-top: -1rem;
-    width: calc(100% + 20px);
+    width: 100%;
     height: 0;
-    padding-top: 41%;
+    padding-top: 42%;
     background-image: url('{{image_url}}goalreminder-desktop-hero.png');
     background-size: contain;
     background-repeat: no-repeat;">

openedx/core/djangoapps/ace_common/templates/ace_common/edx_ace/common/base_body.html

@@ -33,6 +33,7 @@
     margin: 0;
     padding: 0;
     min-width: 100%;
+    background-color: #f5f5f5;
 ">
     <!-- Hack for outlook 2010, which wants to render everything in Times New Roman -->
     <!--[if mso]>
@@ -48,17 +49,22 @@
     <![endif]-->
 
     <!-- CONTENT -->
-    <table class="content" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#fbfaf9" width="100%" style="
-        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        font-size: 1em;
-        line-height: 1.5;
-        max-width: 600px;
-        padding: 0 20px 0 20px;
-    ">
+    <table class="content" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#fbfaf9" width="100%"
+    {% block table_style %}
+        style="
+            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            font-size: 1em;
+            line-height: 1.5;
+            max-width: 600px;
+            padding: 0 20px 0 20px;
+        "
+    {% endblock %}
+    >
         <tr>
             <!-- HEADER -->
             <td class="header" style="
                 padding: 20px;
+                background-color: #f5f5f5;
             ">
                 {% block header %}
                 <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
@@ -79,17 +85,21 @@
 
         <tr>
             <!-- MAIN -->
-            <td class="main" bgcolor="#ffffff" style="
-                padding: 15px 20px 30px 20px;
-                box-shadow: 0 1px 5px rgba(0,0,0,0.25);
-            ">
+            <td class="main" bgcolor="#ffffff"
+                {% block main_style %}
+                    style="
+                        padding: 15px 20px 30px 20px;
+                        box-shadow: 0 1px 5px rgba(0,0,0,0.25);
+                    "
+                {% endblock %}
+            >
                 {% block content %}{% endblock %}
             </td>
         </tr>
 
         <tr>
             <!-- FOOTER -->
-            <td class="footer" style="padding: 20px;">
+            <td class="footer" style="padding: 20px; background-color: #f5f5f5;">
                 <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
                     <tr>
                         <td style="padding-bottom: 20px;">
@@ -161,7 +171,7 @@
                     </tr>
                     <tr>
                         <!-- Actions -->
-                        <td style="padding-bottom: 20px;">
+                        <td style="padding-bottom: 20px; background-color: #f5f5f5;">
                             {% get_action_links channel omit_unsubscribe_link=omit_unsubscribe_link as action_links %}
                             {% for action_link_url, action_link_text in action_links %}
                                 <p>