[chores:ui] Improved email template for narrow screens

* [enhancement] Improved email template for narrow screens
* [req-change] Increased the resolution of icons
* [req-changes] Updated email template

Author: pandafy

openwisp_utils/admin_theme/static/ui/openwisp/images/email.png

@@ -6,42 +6,41 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {% block styles %}
-  <style type="text/css">
-    :root {
-      --muted-fg-color: #777;
-      --loud-fg-color: #333;
-      --muted-bg-color: #F2F4F7;
-      --muted-border-color: #D0D5DD;
-    }
-
+  <style>
     body {
       min-width: 250px;
       background: #fff;
       margin: 0;
       padding: 0;
+      font-family: Arial, Helvetica, sans-serif;
     }
 
     .email-info {
-      margin: 0.9rem auto;
-      font-size: 0.8em;
+      margin: 0.75rem auto;
+      font-size: 0.75rem;
       font-weight: 400;
+      line-height: 1.25rem;
       color: #777;
       text-align: center;
     }
 
+    .email-info a {
+      color: inherit !important;
+    }
+
     .container {
       background: #fff;
-      padding: 20px 0;
+      padding: 1.5rem 0;
     }
 
     .box {
       width: auto;
       max-width: 700px;
-      padding: 1.5rem 0.94rem 2.1rem 0.94rem;
+      padding: 1rem 0.94rem;
       background-color: #fff;
       border-radius: 12px;
-      border: outset 1px #eee;
-      margin: 0px auto 1rem auto;
+      border: 1px solid #EAECF0;
+      margin: 0 auto;
       line-height: 27px;
       box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
     }
@@ -63,7 +62,7 @@
 
     .sysname-container {
       width: fit-content;
-      margin: 1rem auto 0 auto;
+      margin: 1rem auto 0.25rem auto;
       background-color: #F2F4F7;
       padding: 0 0.5em;
       border: solid #D0D5DD 1px;
@@ -84,30 +83,45 @@
 
     .call-to-action {
       text-align: center;
-      margin-top: 1.88rem;
+      margin-top: 1.5rem;
     }
 
     .email-title {
       font-weight: 600;
       font-size: 1.13rem;
-      width: fit-content;
-      margin: auto;
-      margin-top: 1rem;
+      text-align: center;
+      line-height: 1.75rem;
       color: #101828;
     }
 
     .subtitle {
       font-weight: 400;
       font-size: 0.88rem;
-      width: fit-content;
-      margin: 0 auto 0.88em auto;
+      line-height: 1.25rem;
+      text-align: center;
+      margin-top: 0.1rem;
       color: #475467;
     }
 
+    hr {
+      border: 1px solid #EBECF0;
+    }
+
+    .email-title + hr,
+    .subtitle + hr {
+      margin: 0.9rem 2.6rem 1rem 2.6rem;
+      display: none;
+    }
+
+    .email-content {
+      margin-top: 1rem;
+    }
+
     .msg {
-      color: #000000;
+      color: #0F1729;
       margin: 20px 0;
-      font-size: medium;
+      line-height: 1.20rem;
+      font-size: 0.875rem;;
     }
 
     .btn {
@@ -118,7 +132,7 @@
       font-weight: 600;
       font-size: 1rem;
       line-height: 1.5rem;
-      padding: 0.63rem 1rem;
+      padding: 0.5rem 1rem;
       color: #344054 !important;
       box-sizing: border-box;
       box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(16, 24, 40, 0.18), inset 0px -2px 0px rgba(16, 24, 40, 0.05);
@@ -135,15 +149,42 @@
     }
 
     .footer {
+      margin-top: 1rem;
       height: 40px;
       text-align: center;
       color: #475467;
     }
 
     .footer p {
-      font-size: 12px;
+      font-size: 0.75rem;
+      line-height: 1.25rem;
       margin: 0 auto;
-      line-height: 20px;
+    }
+
+    @media screen and (max-width: 768px) {
+      .box {
+        margin-right: 0.5rem;
+        margin-left: 0.5rem;
+        padding: 1rem;
+        padding-bottom: 1.1rem;
+      }
+
+      .email-tile + hr,
+      .subtitle + hr {
+        display: block;
+      }
+
+      .email-content {
+        margin: 0;
+      }
+
+      .call-to-action {
+        margin-top: 1rem;
+      }
+
+      .footer {
+        margin: 0.5rem auto 0.875rem auto;
+      }
     }
   </style>
   {% endblock styles %}
@@ -157,7 +198,7 @@
     </div>
     {% endblock logo %}
     {% block email_info %}
-      <div class="email-info">This email is sent to <u>{{ recipients }}</u> from [{{ site_name }}]</div>
+      <div class="email-info">This email is sent to <u>{{ recipients }}</u> from <a href="{{ site_url }}{% url 'admin:index' %}">[{{ site_name }}]</a></div>
     {% endblock email_info %}
     <div class="box">
       {% block mail_header %}
@@ -172,9 +213,12 @@
       <div class="subtitle">{{ subtitle }}</div>
       {% endif %}
       {% endblock mail_header %}
-      {% block mail_body %}
-      <div class="msg">{{ message | safe }}</div>
-      {% endblock mail_body %}
+      <hr>
+      <div class="email-content">
+        {% block mail_body %}
+        <div class="msg">{{ message | safe }}</div>
+        {% endblock mail_body %}
+      </div>
       {% block call_to_action %}
       {% if call_to_action_url %}
       <div class="call-to-action">

openwisp_utils/admin_theme/static/ui/openwisp/images/right-arrow.png

@@ -29,7 +29,7 @@ def test_email(self):
             email.alternatives[0][0],
         )
         # test email doesn't contain link
-        self.assertNotIn("<a href", email.alternatives[0][0])
+        self.assertNotIn('class="btn">', email.alternatives[0][0])
         self.assertEqual(email.attachments[0].get_payload(), "Test attachment")
 
     def test_email_action_text_and_url(self):