✨ styles password reset

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;
   }

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;

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 %}
+    <p class="mt-6">{% blocktrans %}Please contact us if you have any trouble resetting your password.{% endblocktrans %}</p>
+  </div>
+</div>
+{% endblock %}