Add titles to modal.

undercover/static/styles.css

@@ -294,6 +294,11 @@ textarea {
   margin-bottom: 2em;
 }
 
+.modal-content h2 {
+  font-size: 200%;
+  margin-bottom: 2em;
+}
+
 .modal-close-button {
   position: absolute;
   background: none;

undercover/templates/_formhelpers.jinja2

@@ -27,6 +27,7 @@
   <div id='modal' class='modal modal-background transparent' onclick="event.target.id === 'modal' && closeModal()">
     <div class='modal modal-content'>
       <button class='modal-close-button' onclick="closeModal()">X</button>
+      <h2 id='modal-title'>Login Now</h2>
       <form action="/login" method="post" id="create-account-form">
         <div>
           <label for="login">Email: </label>

undercover/templates/base.jinja2

@@ -10,8 +10,9 @@
       function closeModal() {
         document.getElementById('modal').classList.add('transparent')
       }
-      function showModal(login) {
+      function showModal(login, text) {
         document.getElementById('modal').classList.remove('transparent')
+        document.getElementById('modal-title').innerText = text
         const createAccountElements = [
           'confirm-password',
           'confirm-password-label',
@@ -42,8 +43,8 @@
 {% else %}
   <div class="user logged-out">
     <form action="/create_account">
-        <div class="black-white-button" style="margin-right: 1em; padding: 0.4em;" onclick="showModal(false)">Create account</div>
-        <div class="white-black-button" style="margin: 0; padding: 0.4em;" onclick="showModal(true)">Log in</div>
+      <div class="black-white-button" style="margin-right: 1em; padding: 0.4em;" onclick="showModal(false, 'Create your account')">Create account</div>
+      <div class="white-black-button" style="margin: 0; padding: 0.4em;" onclick="showModal(true, 'Login now')">Log in</div>
     </form>
   </div>
 {% endif %}