From a421e25344eeb0ee41bfe17365684b9f310ac35d Mon Sep 17 00:00:00 2001
From: Sage Vaillancourt <sagev9000@tutanota.com>
Date: Fri, 23 Sep 2022 23:33:20 +0000
Subject: [PATCH] Several style improvements.

Fix create_account() bug.
Lighter placeholder text.
Fancy black-white-button.
Username -> Email on login/create account forms.
---
 undercover/routes.py                       |  2 +-
 undercover/static/styles.css               | 35 ++++++++++++++++++++++
 undercover/templates/create_account.jinja2 | 29 +++++++++++++++---
 undercover/templates/writing.jinja2        | 10 +++----
 4 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/undercover/routes.py b/undercover/routes.py
index 7f6887a..fb42bec 100644
--- a/undercover/routes.py
+++ b/undercover/routes.py
@@ -96,7 +96,7 @@ def index_get():
 
 
 @writing_blueprint.route('/create_account', methods=['GET'])
-def index_get():
+def create_account():
     return render_template('create_account.jinja2')
 
 
diff --git a/undercover/static/styles.css b/undercover/static/styles.css
index f678347..71499df 100644
--- a/undercover/static/styles.css
+++ b/undercover/static/styles.css
@@ -2,6 +2,10 @@ html {
   height: 100%;
 }
 
+::placeholder {
+  color: #999;
+}
+
 span.logo {
   margin: 0;
   padding: 0.2em;
@@ -117,12 +121,43 @@ input, textarea {
   flex-direction: column;
 }
 
+div.user {
+  line-height: 125%;
+}
+
 div.user form {
   display: flex;
   flex-direction: row;
   font-size: 70%;
 }
 
+div.user form input, label {
+  border-radius: 0;
+}
+
+div.user form input {
+  font-size: 100%;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #ddd;
+}
+
+.black-white-button {
+  font-weight: bold;
+  border-radius: 0;
+  border-style: none;
+  color: white;
+  background-color: black;
+  transition-property: color, background-color;
+  transition-duration: 300ms;
+  transition-timing-function: ease-in;
+}
+
+.black-white-button:hover {
+  color: black;
+  background-color: white;
+}
+
 .logged-in {
   display: flex;
   flex-direction: row;
diff --git a/undercover/templates/create_account.jinja2 b/undercover/templates/create_account.jinja2
index 2dc2fb9..4d212ab 100644
--- a/undercover/templates/create_account.jinja2
+++ b/undercover/templates/create_account.jinja2
@@ -2,13 +2,34 @@
 
 {% block title %}UnderCover - Create Account{% endblock title %}
 
+{% block head %}
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+  form div {
+    margin-top: 2em;
+  }
+  form a.wipe {
+    margin-left: inherit;
+    margin-top: 4em;
+    text-align: center;
+  }
+</style>
+{% endblock head %}
+
 {% block content %}
   <form action="/login" method="post">
-    <label for="login">Username: </label>
-    <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sagev9000">
+    <div>
+      <label for="login">Email: </label>
+      <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
+    </div>
 
-    <label for="password">Password: </label>
-    <input id="password" maxlength="32" minlength="4" name="password" type="password">
+    <div>
+      <label for="password">Password: </label>
+      <input id="password" maxlength="32" minlength="4" name="password" type="password">
+    </div>
 
     <a href="javascript:void(0)"
       class="wipe up-wipe"
diff --git a/undercover/templates/writing.jinja2 b/undercover/templates/writing.jinja2
index 44e9731..b30e8d3 100644
--- a/undercover/templates/writing.jinja2
+++ b/undercover/templates/writing.jinja2
@@ -35,22 +35,22 @@
 {% block content %}
   {% if username %}
     <div class="user logged-in">
-      <p>You are logged in as {{ username }}</p>
+      <p style="margin: 0 1em 0 0;">You are logged in as {{ username }}</p>
       <form action="/logout">
-        <input type="submit" value="Logout">
+        <input class="black-white-button" type="submit" value="Logout">
       </form>
     </div>
   {% else %}
       <div class="user logged-out">
         <p>You are here as a guest.</p>
         <form action="/login" method="post">
-          <label for="login">Username: </label>
-          <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sagev9000">
+          <label for="login">Email: </label>
+          <input id="login" maxlength="32" minlength="4" name="login" type="text" placeholder="sage@sagev.space">
 
           <label for="password">Password: </label>
           <input id="password" maxlength="32" minlength="4" name="password" type="password">
 
-          <input type="submit" value="Login">
+          <input class="black-white-button" type="submit" value="Login">
         </form>
       </div>
   {% endif %}