From 234565b9235f11052867f6d4993890bea595fa8e Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Sun, 2 Oct 2022 09:45:40 -0400
Subject: [PATCH] Tweak some login-related spacing.

---
 undercover/static/styles.css             | 11 +++++--
 undercover/templates/_formhelpers.jinja2 | 40 +++++++++++++-----------
 undercover/templates/base.jinja2         |  4 +--
 3 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/undercover/static/styles.css b/undercover/static/styles.css
index 26c774d..962d44f 100644
--- a/undercover/static/styles.css
+++ b/undercover/static/styles.css
@@ -119,7 +119,7 @@ select {
 
 div.user {
   line-height: 125%;
-  margin-bottom: 2em;
+  margin-bottom: 1em;
 }
 
 div.user form {
@@ -303,10 +303,11 @@ textarea {
   position: absolute;
   background: none;
   border: none;
-  font-size: 2rem;
+  font-size: 3rem;
   font-weight: bold;
   color: #444;
   margin: 0.25em;
+  line-height: 100%;
   top: 0;
   right: 0;
 }
@@ -328,7 +329,7 @@ textarea {
   }
   input {
     font-size: 115%;
-    width: 100%;
+    flex-grow: 1;
     padding: 0.3em;
   }
   .letter-form {
@@ -410,6 +411,10 @@ textarea {
   opacity: 0;
 }
 
+#create-account-form {
+  display: flex;
+  flex-direction: column;
+}
 #create-account-form div {
   display: flex;
   flex-direction: column;
diff --git a/undercover/templates/_formhelpers.jinja2 b/undercover/templates/_formhelpers.jinja2
index 72dcbf0..715e1fa 100644
--- a/undercover/templates/_formhelpers.jinja2
+++ b/undercover/templates/_formhelpers.jinja2
@@ -26,7 +26,7 @@
 {% macro modal() %}
   <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>
+      <button class='modal-close-button' onclick="closeModal()">×</button>
       <h2 id='modal-title'>Login Now</h2>
       <form action="/login" method="post" id="create-account-form">
         <div>
@@ -43,25 +43,27 @@
           <input id="confirm-password" maxlength="32" minlength="4" name="confirm-password" type="password">
         </div>
 
-        <a href="javascript:void(0)"
-           id="create-account-form-button"
-           class="wipe up-wipe"
-          {% if errors %}
-           onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
-          {% else %}
-           onclick="document.getElementById('create-account-form').submit()"
-          {% endif %}
-        >Create Account</a>
+        <div style="margin-top: 1em;">
+          <a href="javascript:void(0)"
+             id="create-account-form-button"
+             class="wipe up-wipe"
+            {% if errors %}
+             onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
+            {% else %}
+             onclick="document.getElementById('create-account-form').submit()"
+            {% endif %}
+          >Create Account</a>
 
-        <a href="javascript:void(0)"
-           id="log-in-form-button"
-           class="wipe up-wipe"
-                {% if errors %}
-           onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
-                {% else %}
-           onclick="document.getElementById('create-account-form').submit()"
-                {% endif %}
-        >Log in</a>
+          <a href="javascript:void(0)"
+             id="log-in-form-button"
+             class="wipe up-wipe"
+                  {% if errors %}
+             onclick="/*clearErrors();*/document.getElementById('create-account-form').submit()"
+                  {% else %}
+             onclick="document.getElementById('create-account-form').submit()"
+                  {% endif %}
+          >Log in</a>
+        </div>
       </form>
     </div>
   </div>
diff --git a/undercover/templates/base.jinja2 b/undercover/templates/base.jinja2
index a6cb32f..974de2f 100644
--- a/undercover/templates/base.jinja2
+++ b/undercover/templates/base.jinja2
@@ -43,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 your account')">Create account</div>
-      <div class="white-black-button" style="margin: 0; padding: 0.4em;" onclick="showModal(true, 'Login now')">Log in</div>
+      <div class="black-white-button" style="margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">Create account</div>
+      <div class="white-black-button" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
     </form>
   </div>
 {% endif %}