From 7c58e882c328da7c65bd043f1132e68cf1ef60d8 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 19 Jan 2023 18:34:06 -0500
Subject: [PATCH] :art: style login form

* make forgot link orange and justify between submit button
* hide labels for email and password but keep remember me label
---
 static/css/styles.css        |  4 ++++
 templates/account/login.html | 38 ++++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 53c9319e..224ff02d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1331,6 +1331,10 @@ input[type=file] {
   align-items: center;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
diff --git a/templates/account/login.html b/templates/account/login.html
index 3f80af45..1236d6c3 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -56,25 +56,29 @@
           <div x-show="tab == '#email'" x-cloak>
             <form class="login" method="POST" action="{% url 'account_login' %}">
               <div class="w-full space-y-4" id="signup_form">
-              {% csrf_token %}
+                {% csrf_token %}
 
-              {% for field in form.visible_fields %}
-                <div>
-                  <label class="uppercase text-white/70 text-xs">{{ field.label }}</label>
-                  {{ field }}
-                  {% if field.help_text %}
-                    <small>{{ field.help_text }}</small>
-                  {% endif %}
+                {% for field in form.visible_fields %}
+                  <div>
+                    {% if field.label == "E-mail" or field.label == "Password" %}
+                      {% else %}
+                    <label class="uppercase text-white/70 text-xs">{{ field.label }}</label>
+                    {% endif %}
+                    {{ field }}
+                    {% if field.help_text %}
+                      <small>{{ field.help_text }}</small>
+                    {% endif %}
+                  </div>
+                {% endfor %}
+
+                {% if redirect_field_value %}
+                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+                {% endif %}
+
+                <div class="mb-4 flex justify-between">
+                  <a class="text-orange" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
+                  <button type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm">{% trans "Login" %}</button>
                 </div>
-              {% endfor %}
-
-              {% if redirect_field_value %}
-              <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-              {% endif %}
-              <div class="mb-4">
-                <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
-              </div>
-              <button type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm">{% trans "Login" %}</button>
               </div>
             </form>
           </div>