From 09f182fcd01cdc9b7490cc7ad8f0ac56fcdc4506 Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sage@sagev.space>
Date: Sun, 17 Dec 2023 00:48:40 -0500
Subject: [PATCH] Styling and accessibility tweaks

Add .dark-mode for .errors
Use more correct tags for onClick and form behavior
---
 app/routes.py                     |  2 +-
 app/static/styles.css             | 15 ++++++++++++++-
 app/templates/_formhelpers.jinja2 |  3 ++-
 app/templates/base.jinja2         |  6 +++---
 app/templates/writing.jinja2      |  8 +++-----
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/routes.py b/app/routes.py
index 91c4fe4..810d434 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -131,7 +131,7 @@ def create_account() -> Response:
     password = request.form['password']
 
     if password != request.form['confirm-password']:
-        return render_index(error="Password and confirm password must match!", status=400)
+        return render_index(error="Passwords did not match!", status=400)
     password_len = len(password)
     if password_len < 8 or password_len > 64:
         return render_index(error="Password must be between 8 and 64 characters", status=400)
diff --git a/app/static/styles.css b/app/static/styles.css
index 6ea96f1..8f21d15 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -236,7 +236,6 @@ input.btn {
   flex-direction: row;
   justify-content: end;
   align-items: center;
-  font-size: 90%;
 }
 .user.logged-in {
   margin-bottom: 1em;
@@ -269,6 +268,12 @@ textarea {
 .errors {
   color: #a40f0f;
 }
+body.dark-mode .errors {
+  color: white;
+  background-color: red;
+  padding: 0.2em;
+  padding-left: 1em;
+}
 
 #body {
   flex-grow: 1;
@@ -481,3 +486,11 @@ body.dark-mode .text-button:hover {
 .scroll-lock {
   overflow: hidden;
 }
+
+.dark-light {
+  color: white;
+}
+
+.dark-light:hover {
+  color: black;
+}
diff --git a/app/templates/_formhelpers.jinja2 b/app/templates/_formhelpers.jinja2
index 15b0b0f..3b0cff7 100644
--- a/app/templates/_formhelpers.jinja2
+++ b/app/templates/_formhelpers.jinja2
@@ -24,9 +24,10 @@
 {% endmacro %}
 
 {% macro form_submit_button(text, id, action, errors) %}
-  <a href="javascript:void(0)"
+  <button type="button"
      id="{{ id }}"
      class="wipe up-wipe"
+     style="font-size: 1em;"
      {% if errors %}
      onclick="/*clearErrors();*/const e = document.getElementById('create-account-form'); e.action = '{{ action }}'; e.submit()"
      {% else %}
diff --git a/app/templates/base.jinja2 b/app/templates/base.jinja2
index a2b5c08..7b431b3 100644
--- a/app/templates/base.jinja2
+++ b/app/templates/base.jinja2
@@ -86,10 +86,10 @@
 {% else %}
   <div class="user logged-out">
     <form action="/create_account">
-      <div class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.4em 1em;" onclick="showModal(false, 'Create your account')">
+      <button type="button" class="btn primary color-fade" style="font-family: 'BarlowMedium'; margin-right: 1em; padding: 0.6em 2em;" onclick="showModal(false, 'Create your account')">
           Create account
-      </div>
-      <div class="btn secondary color-fade" style="margin: 0; padding: 0.4em 1em;" onclick="showModal(true, 'Login now')">Log in</div>
+      </button>
+      <button type="button" class="btn secondary color-fade" style="margin: 0; padding: 0.6em 2em;" onclick="showModal(true, 'Login now')">Log in</button>
     </form>
   </div>
 {% endif %}
diff --git a/app/templates/writing.jinja2 b/app/templates/writing.jinja2
index d26f292..8bc31d6 100644
--- a/app/templates/writing.jinja2
+++ b/app/templates/writing.jinja2
@@ -83,11 +83,9 @@
     {% endif %}
 
     <div style="text-align: right; margin-bottom: 2em;">
-      <a href="javascript:void(0)"
-         class="wipe up-wipe"
-         style="margin-bottom: 1em;"
-         onclick="clearErrors();document.getElementById('letter-form').submit()"
-      >Generate PDF</a>
+      <span class="wipe up-wipe" style="margin-bottom: 1em; padding: 0;">
+        <input type="submit" value="Generate PDF" class="transition dark-light" style="background: rgba(0, 0, 0, 0); border: none; margin: 0; padding: 1em; cursor: pointer;">
+      </span>
     </div>
   </form>
 {% endblock content %}