Flesh out letter-adding.

Add new-letter button.
Refactor _formhelpers for increased modularity.
Re-style <select> tags
Invert logo colors on hover.

undercover/routes.py

@@ -126,8 +126,12 @@ def logout() -> Response:
 
 
 @writing_blueprint.route('/add_letter')
-def add_letter(user: db.User) -> Response:
-    # TODO: Add new letter to db
+def add_letter() -> Response:
+    email_address = session.get('username')
+    if not email_address:
+        return render_index()
+    user = db.get_user(email_address)
+
     existing_letter_count = len(db.get_user_letters(user.id))
     new_letter_name = f'Letter{existing_letter_count + 2}'
     default_form_json = jsonify(CLForm().to_cl_data()).get_data(True)
@@ -135,6 +139,7 @@ def add_letter(user: db.User) -> Response:
     return redirect(f'/?letter_name={new_letter_name}')
 
 
+
 @writing_blueprint.route('/', methods=['GET'])
 def index_get() -> Response:
     email_address = session.get('username')

undercover/static/styles.css

@@ -11,14 +11,30 @@ span.logo {
   padding: 0.2em;
 }
 
-span.logo.left {
+h1 span.logo.left {
   color: black;
   background-color: white;
+  transition-property: color, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in;
 }
 
-span.logo.right {
+h1 span.logo.right {
   color: white;
   background-color: black;
+  transition-property: color, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in;
+}
+
+h1:hover span.logo.left {
+  color: white;
+  background-color: black;
+}
+
+h1:hover span.logo.right {
+  color: black;
+  background-color: white;
 }
 
 body {
@@ -45,6 +61,11 @@ h2 {
   margin-bottom: 1em;
 }
 
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
 label {
   font-size: 100%;
   font-weight: bold;
@@ -57,6 +78,14 @@ input, textarea {
   font-family: sans-serif;
 }
 
+select {
+  background-color: white;
+  border-radius: 0;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #ccc;
+}
+
 .letter-form {
   display: flex;
   flex-grow: 1;
@@ -98,7 +127,7 @@ div.user form input {
   color: black;
   background-color: white;
   transition-property: color, background-color;
-  transition-duration: 300ms;
+  transition-duration: 135ms;
   transition-timing-function: ease-in;
 }
 
@@ -114,7 +143,7 @@ div.user form input {
   color: white;
   background-color: black;
   transition-property: color, background-color;
-  transition-duration: 300ms;
+  transition-duration: 135ms;
   transition-timing-function: ease-in;
 }
 
@@ -224,8 +253,14 @@ textarea {
     width: 100%;
   }
   dd {
-    margin-bottom: 2em;
     margin-left: 0;
+    flex-grow: 1;
+  }
+  dd select {
+    flex-grow: 1;
+  }
+  .field {
+    margin-bottom: 2em;
   }
   textarea {
     width: 80vw;

undercover/templates/_formhelpers.jinja2

@@ -1,6 +1,8 @@
-{% macro render_field(field, extra="") %}
+{% macro render_label(field) %}
   <dt>{{ field.label }}</dt>
+{% endmacro %}
 
+{% macro render_input(field, extra="") %}
   <dd {{extra}}>
     {{ field(**kwargs)|safe }}
 
@@ -13,3 +15,10 @@
     {% endif %}
   </dd>
 {% endmacro %}
+
+{% macro render_field(field, extra="") %}
+<div class="field">
+  {{ render_label(field) }}
+  {{ render_input(field, extra, **kwargs) }}
+</div>
+{% endmacro %}

undercover/templates/writing.jinja2

@@ -1,5 +1,5 @@
 {% extends "base.jinja2" %}
-{% from "_formhelpers.jinja2" import render_field %}
+{% from "_formhelpers.jinja2" import render_field, render_label, render_input %}
 
 {% block title %}UnderCover{% endblock %}
 
@@ -38,7 +38,7 @@
     <div class="user logged-in">
       <p style="margin: 0 1em 0 0;">{{ username }}</p>
       <form action="/logout">
-        <input class="black-white-button" style="margin: 0;" type="submit" value="Logout">
+        <input class="black-white-button" style="margin: 0; padding: 0.4em;" type="submit" value="Logout">
       </form>
     </div>
   {% else %}
@@ -62,8 +62,17 @@
   <form method=post id="letter-form">
     <dl>
       {% if username %}
-        {{ render_field(form.letterName, onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label") }}
-        <span style="background-color: green; color: white;">+</span>
+        <div class="field">
+          {{ render_label(form.letterName) }}
+          <div style="display: flex; flex-direction: row;">
+            {{ render_input(
+                   form.letterName,
+                   onchange="window.location = '/?letter_name=' + this.options[this.value - 1].label"
+               )
+            }}
+            <a href="/add_letter" class="black-white-button" style="aspect-ratio: 1 / 1; text-decoration: none; margin-left: 1em; text-align: center;">+</a>
+          </div>
+        </div>
       {% endif %}
       {{ render_field(form.username) }}
       {{ render_field(form.company) }}