From 831381f16007a1781c906e235f4c64e6a5f1f73b Mon Sep 17 00:00:00 2001
From: Lauryn Menard <lauryn@zulip.com>
Date: Fri, 9 Feb 2024 22:04:45 +0100
Subject: [PATCH] email-log: Update CSS styles for dev environment email log.

Removes reliance on bootstrap alert and label rules/styles that
were used or expected for this email log page.
---
 templates/zerver/development/email_log.html | 24 +++----
 web/styles/portico/email_log.css            | 69 +++++++++++++++++++--
 zerver/tests/test_docs.py                   |  2 +-
 zerver/tests/test_email_log.py              |  4 +-
 zerver/tests/test_example.py                |  2 +-
 5 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/templates/zerver/development/email_log.html b/templates/zerver/development/email_log.html
index cd29c54b32..77e4301ee3 100644
--- a/templates/zerver/development/email_log.html
+++ b/templates/zerver/development/email_log.html
@@ -6,24 +6,21 @@
 {% endblock %}
 
 {% block content %}
-<div class="container" id="dev-emails-container">
-    <div class="header">
-        <div class="alert">
-            All the emails sent in the Zulip development environment are logged here. You can also
-            manually generate most of the emails by clicking <a href="/emails/generate">here</a>.
-            To clear this log click <a href="/emails/clear">here</a>
+<div class="container" id="dev-email-log-container">
+    <div class="dev-email-log-header">
+        <div class="dev-email-log-actions">
+            All emails sent in the Zulip development environment are logged here. <a href="/emails/clear">Clear this log</a>
+            | <a href="/emails/generate">Manually generate most emails</a>
+            | <a href="#" class="open-forward-email-modal">Forward emails to an email account</a>
         </div>
-        <div class="config-options">
+        <div class="dev-email-log-text-only">
             <label>
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
             </label>
-            <a href="#" class="open-forward-email-modal">
-                <strong>Forward emails to an email account</strong>
-            </a>
         </div>
     </div>
-    <div class="emails">
+    <div class="dev-email-log-content">
         {{ log |safe }}
     </div>
     <div id="forward_email_modal" class="micromodal" aria-hidden="true">
@@ -39,7 +36,7 @@
                     <div class="input-group">
                         <form id="smtp_form">
                             {{ csrf_input }}
-                            <div class="alert alert-info" id="smtp_form_status">
+                            <div class="dev-forward-email-alert" id="smtp_form_status">
                                 Updated successfully.
                             </div>
                             <label for="forward">
@@ -55,8 +52,7 @@
                                 <label for="forward_address"><strong>Address to which emails should be forwarded</strong></label>
                                 <input type="text" id="address" name="forward_address" placeholder="eg: your-email@example.com" value="{{forward_address}}"/>
                             </div>
-                            <br />
-                            <div class="alert alert-info">
+                            <div class="dev-forward-email-alert">
                                 You must set up SMTP as described
                                 <a target="_blank" rel="noopener noreferrer" href="https://zulip.readthedocs.io/en/latest/subsystems/email.html#development-and-testing"> here</a>
                                 first before enabling this.
diff --git a/web/styles/portico/email_log.css b/web/styles/portico/email_log.css
index 0527494398..7258f76f67 100644
--- a/web/styles/portico/email_log.css
+++ b/web/styles/portico/email_log.css
@@ -2,17 +2,70 @@
     --color-background-modal: hsl(0deg 0% 98%);
 }
 
-#dev-emails-container {
-    .header {
+#dev-email-log-container {
+    .dev-email-log-header {
         position: fixed;
+        font-family: sans-serif;
+        font-size: 14px;
     }
 
-    .config-options {
+    .dev-email-log-header,
+    .dev-forward-email-alert {
+        padding: 10px;
+        border: 1px solid hsl(190deg 65% 84%);
+        border-radius: 4px;
+        background-color: hsl(200deg 65% 91%);
+        color: hsl(200deg 50% 45%);
+    }
+
+    .dev-email-log-actions,
+    .dev-forward-email-alert {
+        & a {
+            color: hsl(200deg 50% 45%);
+
+            &:hover {
+                color: hsl(200deg 56% 33%);
+            }
+        }
+    }
+
+    .dev-email-log-actions {
+        padding-bottom: 5px;
+    }
+
+    .dev-email-log-text-only {
         text-align: right;
     }
 
-    .emails {
+    .dev-email-log-content {
         padding-top: 100px;
+        max-width: 1000px;
+
+        & h4 {
+            color: hsl(0deg 0% 20%);
+            margin: 2px 10px;
+        }
+
+        .email-text,
+        .email-html {
+            margin: 10px;
+        }
+
+        .email-text pre {
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            color: hsl(0deg 0% 20%);
+            display: block;
+            padding: 9.5px;
+            margin: 0 0 10px;
+            font-size: 13px;
+            line-height: 20px;
+            word-break: break-all;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+            background-color: hsl(0deg 0% 96%);
+            border: 1px solid hsl(0deg 0% 75%);
+            border-radius: 4px;
+        }
     }
 
     #smtp_form_status,
@@ -23,10 +76,14 @@
     #forward_email_modal {
         .modal__content label {
             font-size: 1rem;
+            display: block;
+            margin-bottom: 5px;
+            cursor: pointer;
         }
 
-        #forward_address_sections {
-            margin-top: 20px;
+        #forward_address_sections,
+        .dev-forward-email-alert {
+            margin: 5px 0;
         }
 
         & label.radio {
diff --git a/zerver/tests/test_docs.py b/zerver/tests/test_docs.py
index 9b65d5898e..a2d266d2d0 100644
--- a/zerver/tests/test_docs.py
+++ b/zerver/tests/test_docs.py
@@ -240,7 +240,7 @@ class DocPageTest(ZulipTestCase):
     def test_dev_environment_endpoints(self) -> None:
         self._test("/devlogin/", ["Normal users"])
         self._test("/devtools/", ["Useful development URLs"])
-        self._test("/emails/", ["manually generate most of the emails by clicking"])
+        self._test("/emails/", ["Manually generate most emails"])
 
     def test_error_endpoints(self) -> None:
         self._test("/errors/404/", ["Page not found"])
diff --git a/zerver/tests/test_email_log.py b/zerver/tests/test_email_log.py
index 3dc6ae9954..f0445df2bb 100644
--- a/zerver/tests/test_email_log.py
+++ b/zerver/tests/test_email_log.py
@@ -17,12 +17,12 @@ class EmailLogTest(ZulipTestCase):
             self.assertIn("emails", result["Location"])
 
             result = self.client_get("/emails/")
-            self.assert_in_success_response(["All the emails sent in the Zulip"], result)
+            self.assert_in_success_response(["All emails sent in the Zulip"], result)
 
             result = self.client_get("/emails/clear/")
             self.assertEqual(result.status_code, 302)
             result = self.client_get(result["Location"])
-            self.assertIn("manually generate most of the emails by clicking", str(result.content))
+            self.assertIn("Manually generate most emails", str(result.content))
             output_log = (
                 "INFO:root:Emails sent in development are available at http://testserver/emails"
             )
diff --git a/zerver/tests/test_example.py b/zerver/tests/test_example.py
index 27563bcf3f..850f44561b 100644
--- a/zerver/tests/test_example.py
+++ b/zerver/tests/test_example.py
@@ -413,7 +413,7 @@ class TestDevelopmentEmailsLog(ZulipTestCase):
 
             # assert_in_success_response() is another helper that is commonly used to ensure
             # we are on the right page by verifying a string exists in the page's content.
-            self.assert_in_success_response(["All the emails sent in the Zulip"], result)
+            self.assert_in_success_response(["All emails sent in the Zulip"], result)
 
 
 class TestMocking(ZulipTestCase):