From 85ba77928673358eb8115a6f42974a9ee323bf1f Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Mon, 20 May 2019 05:42:07 -0700
Subject: [PATCH] style more account settings/password reset pages

---
 templates/account/password_reset.html         | 64 +++++++++++++------
 templates/account/password_reset_sent.html    | 33 ++++++----
 templates/account/password_reset_token.html   | 55 ++++++++++++----
 .../account/password_reset_token_fail.html    |  6 +-
 templates/account/settings.html               | 54 ++++++++++++----
 templates/base.html                           | 13 ++--
 6 files changed, 163 insertions(+), 62 deletions(-)

diff --git a/templates/account/password_reset.html b/templates/account/password_reset.html
index 3b983b0..f1fbbd6 100644
--- a/templates/account/password_reset.html
+++ b/templates/account/password_reset.html
@@ -7,25 +7,53 @@
 
 {% user_display request.user as user_display %}
 
+
+{% block pagecss %}
+<style>
+label {
+  display: block;
+  margin-top: 15px;
+  color: #333;
+  font-size: 1rem;
+}
+
+.br {
+  margin-top: 15px;
+}
+
+input:not([type]), input[type="text"] {
+  max-width: 100%;
+  width: 100%;
+  border: 0 none;
+  padding: 0 10px;
+  padding-right: 10px;
+  padding-left: 10px;
+  background: #fff;
+  color: #666;
+  border: 1px solid #e5e5e5;
+}
+</style>
+{% endblock %}
+
 {% block content %}
-    <div class="row">
-        <div  class="col-md-8">
-            <form method="POST" action="">
-                <legend>{% trans "Password reset" %}</legend>
-                <p class="lead">{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}</p>
-                <fieldset class="row">
-                    <div class="col-md-5">
-                        {% csrf_token %}
-                        {{ form }}
-                        <button type="submit" class="btn btn-primary">
-                            {% trans "Reset my password" %}
-                        </button>
-                    </div>
-                </fieldset>
-            </form>
-        </div>
-    </div>
-    <p>{% blocktrans %}If you have any trouble resetting your password, contact us at <a href="mailto:{{ THEME_CONTACT_EMAIL }}">{{ THEME_CONTACT_EMAIL }}</a>.{% endblocktrans %}</p>
+<div class="uk-flex uk-flex-center uk-margin-top">
+
+  <div class="uk-card uk-card-default uk-card-body">
+    <form method="POST" action="">
+      <legend class="uk-legend">{% trans "Password reset" %}</legend>
+      <p class="lead">{% trans "Forgotten your password? Enter your email address below, and we'll send you an email allowing you to reset it." %}</p>
+      {% csrf_token %}
+      {{ form }}
+      <div class="br">
+        <button type="submit" class="uk-button uk-button-primary">
+          {% trans "Reset my password" %}
+        </button>
+      </div>
+    </form>
+
+    <p>{% blocktrans %}If you have any trouble resetting your password, contact us at <a href="mailto:support@procatalog.io">support@procatalog.io</a>{% endblocktrans %}</p>
+  </div>
+</div>
 {% endblock %}
 
 {% block extra_body %}
diff --git a/templates/account/password_reset_sent.html b/templates/account/password_reset_sent.html
index f6c75d4..32ae541 100644
--- a/templates/account/password_reset_sent.html
+++ b/templates/account/password_reset_sent.html
@@ -6,22 +6,27 @@
 {% block title %}{% trans "Password reset sent" %}{% endblock %}
 
 {% block content %}
-    <h1>{% trans "Password reset sent" %}</h1>
+<div class="uk-flex uk-flex-center uk-margin-top">
+
+  <div class="uk-card uk-card-default uk-card-body">
+    <h3>{% trans "Password reset sent" %}</h3>
     {% if not resend %}
-        <p>{% blocktrans %}We have sent you an email. If you do not receive it within a few minutes, try resending or contact us at <a href="mailto:{{ THEME_CONTACT_EMAIL }}">{{ THEME_CONTACT_EMAIL }}</a>.{% endblocktrans %}</p>
+      <p>{% blocktrans %}We have sent you an email. If you do not receive it within a few minutes, try resending or contact us at <a href="mailto:{{ THEME_CONTACT_EMAIL }}">{{ THEME_CONTACT_EMAIL }}</a>.{% endblocktrans %}</p>
         
-        <div class="row">
-            <div class="col-md-5">
-                <form method="POST" action="{% url "account_password_reset" %}">
-                    {% csrf_token %}
-                    {% for field in form %}
-                        {{ field.as_hidden }}
-                    {% endfor %}
-                    <button type="submit" name="resend" class="btn btn-primary">{% trans "Resend" %}</button>
-                </form>
-            </div>
+      <div class="row">
+        <div class="col-md-5">
+          <form method="POST" action="{% url "account_password_reset" %}">
+            {% csrf_token %}
+            {% for field in form %}
+              {{ field.as_hidden }}
+            {% endfor %}
+            <button type="submit" name="resend" class="uk-button uk-button-primary">{% trans "Resend" %}</button>
+          </form>
         </div>
+      </div>
     {% else %}
-        <p>{% blocktrans %}We have resent the password email. If you do not receive it within a few minutes, contact us at <a href="mailto:{{ THEME_CONTACT_EMAIL }}">{{ THEME_CONTACT_EMAIL }}</a>.{% endblocktrans %}</p>
+      <p>{% blocktrans %}We have resent the password email. If you do not receive it within a few minutes, contact us at <a href="mailto:support@procatalog.io">support@procatalog.io</a>{% endblocktrans %}</p>
     {% endif %}
-{% endblock %}
\ No newline at end of file
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/account/password_reset_token.html b/templates/account/password_reset_token.html
index 3993ad6..3abecdf 100644
--- a/templates/account/password_reset_token.html
+++ b/templates/account/password_reset_token.html
@@ -4,17 +4,46 @@
 
 {% block title %}{% trans "Set your new password" %}{% endblock %}
 
-{% block content %}
-    <div class="row">
-        <div class="col-md-5">
-            <form method="POST" action="{% url "account_password_reset_token" uidb36=uidb36 token=token %}">
-                <legend>{% trans "Set your new password" %}</legend>
-                <fieldset>
-                    {% csrf_token %}
-                    {{ form }}
-                    <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
-                </fieldset>
-            </form>
-        </div>
-    </div>
+{% block pagecss %}
+<style>
+label {
+  display: block;
+  margin-top: 15px;
+  color: #333;
+  font-size: .875rem;
+}
+
+.br {
+  margin-top: 15px;
+}
+
+input {
+  max-width: 80%;
+  width: 80%;
+  border: 0 none;
+  padding: 0 10px;
+  padding-right: 10px;
+  padding-left: 10px;
+  background: #fff;
+  color: #666;
+  border: 1px solid #e5e5e5;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="uk-flex uk-flex-center uk-margin-top">
+
+  <div class="uk-card uk-card-default uk-card-body">
+    <form method="POST" action="{% url "account_password_reset_token" uidb36=uidb36 token=token %}">
+      <legend class="uk-legend">{% trans "Set your new password" %}</legend>
+
+      {% csrf_token %}
+      {{ form }}
+      <div class="br">
+        <button type="submit" class="uk-button uk-button-primary">{% trans "Save" %}</button>
+      </div>
+    </form>
+  </div>
+</div>
 {% endblock %}
diff --git a/templates/account/password_reset_token_fail.html b/templates/account/password_reset_token_fail.html
index 942a08d..9d49c89 100644
--- a/templates/account/password_reset_token_fail.html
+++ b/templates/account/password_reset_token_fail.html
@@ -5,7 +5,11 @@
 {% block title %}{% trans "Bad token" %}{% endblock %}
 
 {% block content %}
+<div class="uk-flex uk-flex-center uk-margin-top">
+  <div class="uk-card uk-card-default uk-card-body">
     <h1>{% trans "Bad token" %}</h1>
     {% url "account_password_reset" as url %}
     <p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ url }}">new password reset</a>.{% endblocktrans %}</p>
-{% endblock %}
\ No newline at end of file
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/account/settings.html b/templates/account/settings.html
index 9a302e8..f16eb92 100644
--- a/templates/account/settings.html
+++ b/templates/account/settings.html
@@ -1,20 +1,52 @@
 {% extends "base.html" %}
 
+{% load account_tags %}
 {% load i18n %}
 
 {% block content_class %}account account-settings{% endblock %}
 
 {% block title %}{% trans "Account" %}{% endblock %}
 
-{% block content %}
-    <div class="row">
-        <div class="col-md-5">
-            <form method="POST" action="{% url "account_settings" %}">
-                <legend>{% trans "Account" %}</legend>
-                {% csrf_token %}
-                {{ form }}
-                <button class="btn btn-primary" type="submit">{% trans "Save" %}</button>
-            </form>
-        </div>
-    </div>
+{% block pagecss %}
+<style>
+label {
+  display: block;
+  margin-top: 15px;
+  color: #333;
+  font-size: .875rem;
+}
+
+.br {
+  margin-top: 15px;
+}
+
+input {
+  max-width: 100%;
+  width: 100%;
+  border: 0 none;
+  padding: 0 10px;
+  padding-right: 10px;
+  padding-left: 10px;
+  background: #fff;
+  color: #666;
+  border: 1px solid #e5e5e5;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="uk-flex uk-flex-center uk-margin-top">
+
+  <div class="uk-card uk-card-default uk-card-body">
+    <legend class="uk-legend">{% trans "Account settings" %}</legend>
+      <form method="POST" action="{% url "account_settings" %}">
+        {% csrf_token %}
+        {{ form }}
+        <div class="br">
+          <button type="submit" class="uk-button uk-button-primary">{% trans "Save" %}</button>
+        </div>
+      </form>
+  </div>
+
+</div>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index 4a79297..7049172 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,11 +18,14 @@
     {% include "nav.html" %}
 
     {% if messages %}
-    <ul class="messages">
-      {% for message in messages %}
-      <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
-      {% endfor %}
-    </ul>
+      <div class="messages">
+        {% for message in messages %}
+          <div class="uk-alert-primary {{ message.tags }}" uk-alert>
+            <a class="uk-alert-close" uk-close></a>
+              <p>{{ message }}</p>
+          </div>
+        {% endfor %}
+      </div>
     {% endif %}
 
     {% block content %}