From c6af77b85e9a0eb8193003f3141c9bc38406b951 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 5 Jan 2023 16:27:19 -0500
Subject: [PATCH] :sparkles: styles password reset

---
 frontend/styles.css                   |  3 +++
 static/css/styles.css                 | 26 ++++++++++++++++----------
 templates/account/password_reset.html | 20 ++++++++++++++------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index e59002a1..71fd0b35 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -35,6 +35,9 @@
   textarea {
     @apply w-full rounded bg-charcoal border border-slate;
   }
+  input[type=email] {
+    @apply w-full rounded bg-charcoal border border-slate mt-3;
+  }
   input[type=checkbox] {
     @apply mr-3 rounded bg-charcoal border border-slate text-orange;
   }
diff --git a/static/css/styles.css b/static/css/styles.css
index f7156363..f74baa81 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -636,6 +636,17 @@ textarea {
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
 
+input[type=email] {
+  margin-top: 0.75rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+}
+
 input[type=checkbox] {
   margin-right: 0.75rem;
   border-radius: 0.25rem;
@@ -1523,11 +1534,6 @@ input[type=file] {
   background-color: rgb(23 42 52 / 0.6);
 }
 
-.bg-orange {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 159 0 / var(--tw-bg-opacity));
-}
-
 .bg-slate {
   --tw-bg-opacity: 1;
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
@@ -1633,6 +1639,11 @@ input[type=file] {
   padding-bottom: 0px;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -1658,11 +1669,6 @@ input[type=file] {
   padding-right: 1.25rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-}
-
 .px-\[40px\] {
   padding-left: 40px;
   padding-right: 40px;
diff --git a/templates/account/password_reset.html b/templates/account/password_reset.html
index 7517637f..b2bca96a 100644
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@@ -6,8 +6,9 @@
 {% block head_title %}{% trans "Password Reset" %}{% endblock %}
 
 {% block content %}
-
-    <h1>{% trans "Password Reset" %}</h1>
+<div class="text-center my-6">
+  <div class="py-6">
+    <h1 class="text-4xl">{% trans "Password Reset" %}</h1>
     {% if user.is_authenticated %}
     {% include "account/snippets/already_logged_in.html" %}
     {% endif %}
@@ -16,9 +17,16 @@
 
     <form method="POST" action="{% url 'account_reset_password' %}" class="password_reset">
         {% csrf_token %}
-        {{ form.as_p }}
-        <input type="submit" value="{% trans 'Reset My Password' %}" />
+        <div class="w-full md:w-1/2 mx-auto">
+          {{ form.as_p }}
+          <input type="submit"
+                 value="{% trans 'Reset My Password' %}"
+                 class="border border-orange py-3 px-4 rounded text-orange uppercase"
+          />
+        </div>
     </form>
 
-    <p>{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
-{% endblock %}
\ No newline at end of file
+    <p class="mt-6">{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
+  </div>
+</div>
+{% endblock %}