development: Add CSS file for emails page in dev server.

Previously, CSS rules were added inline for emails page in
dev server. This commit adds a new file which contains
CSS rules for the emails page in dev server. This will
also help us in adding focus for the radio buttons in
the page, which cannot be added inline to the elements,
when we remove the use of bootstrap for this page.

static/styles/portico/email_log.css

@@ -0,0 +1,18 @@
+#dev-emails-container {
+    .header {
+        position: fixed;
+    }
+
+    .config-options {
+        text-align: right;
+    }
+
+    .emails {
+        padding-top: 100px;
+    }
+
+    #smtp_form_status,
+    .hide {
+        display: none;
+    }
+}

templates/zerver/development/email_log.html

@@ -6,14 +6,14 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div style="position: fixed">
+<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>
-        <div style="text-align:right">
+        <div class="config-options">
             <label>
                 <input type="checkbox" autocomplete="off" id="toggle"/>
                 <strong>Show text only version</strong>
@@ -23,7 +23,7 @@
             </a>
         </div>
     </div>
-    <div style="padding-top:100px">
+    <div class="emails">
         {{ log |safe }}
     </div>
     <div id="forward_email_modal" class="modal hide" tabindex="-1" role="dialog" aria-hidden="true">
@@ -32,7 +32,7 @@
                 <form id="smtp_form">
                     {{ csrf_input }}
                     <div class="alert alert-info"
-                      id="smtp_form_status" style="display:none;">
+                      id="smtp_form_status">
                         Updated successfully.
                     </div>
                     <label for="forward">
@@ -47,7 +47,7 @@
                     <label class="radio">
                         <input name="forward" type="radio" value="disabled" {% if not forward_address %}checked{% endif %}/>No
                     </label>
-                    <div id="forward_address_sections" {% if not forward_address %}style="display:none;"{% endif %}>
+                    <div id="forward_address_sections" {% if not forward_address %}class="hide"{% endif %} >
                         <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>

tools/webpack.dev-assets.json

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