development: Update modal in emails page to use micromodal.

We now use micromodal in the modal on dev server emails page to
make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.

templates/zerver/development/email_log.html

@@ -18,7 +18,7 @@
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
             </label>
-            <a href="#" data-toggle="modal" data-target="#forward_email_modal">
+            <a href="#" class="open-forward-email-modal">
                 <strong>Forward emails to an email account</strong>
             </a>
         </div>
@@ -26,20 +26,24 @@
     <div class="emails">
         {{ log |safe }}
     </div>
-    <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
-        <div class="modal-body">
+    <div id="forward_email_modal" class="micromodal" aria-hidden="true">
+        <div class="modal__overlay" tabindex="-1">
+            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+                <header class="modal__header">
+                    <h1 class="modal__title dialog_heading">
+                        {{ _('Forward emails to an email account') }}
+                    </h1>
+                    <button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
+                </header>
+                <main class="modal__content">
                     <div class="input-group">
                         <form id="smtp_form">
                             {{ csrf_input }}
-                    <div class="alert alert-info"
-                      id="smtp_form_status">
+                            <div class="alert alert-info" id="smtp_form_status">
                                 Updated successfully.
                             </div>
                             <label for="forward">
-                        <strong>Forwards all emails sent in the
-                            development environment to an external
-                            mail account.
-                        </strong>
+                                Forwards all emails sent in the development environment to an external mail account.
                             </label>
                             <label class="radio">
                                 <input name="forward" type="radio" value="enabled" {% if forward_address %}checked{% endif %}/>Yes
@@ -59,10 +63,14 @@
                             </div>
                         </form>
                     </div>
+                </main>
+                <footer class="modal__footer">
+                    <button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Close') }}</button>
+                    <button class="modal__btn dialog_submit_button">
+                        <span>{{ _('Update') }}</span>
+                    </button>
+                </footer>
             </div>
-        <div class="modal-footer">
-            <button id='save_smptp_details'>Update</button>
-            <button data-dismiss="modal">Close</button>
         </div>
     </div>
 </div>

web/src/portico/email_log.js

@@ -2,6 +2,8 @@ import $ from "jquery";
 
 import * as channel from "../channel";
 
+import * as portico_modals from "./portico_modals";
+
 $(() => {
     // This code will be executed when the user visits /emails in
     // development mode and email_log.html is rendered.
@@ -29,7 +31,7 @@ $(() => {
             $("#forward_address_sections").hide();
         }
     });
-    $("#save_smptp_details").on("click", () => {
+    $("#forward_email_modal .dialog_submit_button").on("click", () => {
         const address =
             $("input[name=forward]:checked").val() === "enabled" ? $("#address").val() : "";
         const csrf_token = $('input[name="csrfmiddlewaretoken"]').attr("value");
@@ -46,4 +48,8 @@ $(() => {
             },
         });
     });
+    $(".open-forward-email-modal").on("click", (e) => {
+        e.preventDefault();
+        portico_modals.open_modal("forward_email_modal");
+    });
 });

web/styles/portico/email_log.css

@@ -1,3 +1,7 @@
+:root {
+    --color-background-modal: hsl(0deg 0% 98%);
+}
+
 #dev-emails-container {
     .header {
         position: fixed;
@@ -17,6 +21,14 @@
     }
 
     #forward_email_modal {
+        .modal__content label {
+            font-size: 1rem;
+        }
+
+        #forward_address_sections {
+            margin-top: 20px;
+        }
+
         & label.radio {
             padding-left: 20px;
         }

web/webpack.dev-assets.json

@@ -10,6 +10,7 @@
     "dev-email-log": [
         "./src/bundles/common",
         "./src/portico/email_log",
+        "./src/portico/portico_modals",
         "./styles/portico/email_log.css",
         "./src/reload_state",
         "./src/channel"