From da51070ccd6cee70ffad70ef24ddfb38f0099dc0 Mon Sep 17 00:00:00 2001
From: glyph <glyph@mycelial.technology>
Date: Thu, 18 Nov 2021 11:48:37 +0200
Subject: [PATCH] improve template styling consistency

---
 .../settings/admin/change_password.html.tera  | 41 ++++---------------
 .../settings/admin/forgot_password.html.tera  | 19 ++++-----
 .../templates/settings/admin/menu.html.tera   | 10 ++---
 peach-web/templates/settings/menu.html.tera   | 12 +++---
 .../templates/settings/scuttlebutt.html.tera  | 24 +++++------
 5 files changed, 35 insertions(+), 71 deletions(-)

diff --git a/peach-web/templates/settings/admin/change_password.html.tera b/peach-web/templates/settings/admin/change_password.html.tera
index bbe73b5..85d5f30 100644
--- a/peach-web/templates/settings/admin/change_password.html.tera
+++ b/peach-web/templates/settings/admin/change_password.html.tera
@@ -4,47 +4,22 @@
       <div class="card center">
         <div class="form-container">
           <form id="changePassword" action="/settings/change_password" method="post">
-            <div class="input-wrapper">
-              <!-- input for old password -->
-              <label id="old_password" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="old_password" style="padding-top: 0.25rem;">Old Password</label>
-                <input id="old_password" class="form-input"  style="margin-bottom: 0;"
-                    name="old_password" type="password" title="old password" value="">
-              </label>
-            </div>
-
-            <div class="input-wrapper">
-              <!-- input for new password1 -->
-              <label id="new_password1" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="new_password1" style="padding-top: 0.25rem;">Enter New Password</label>
-                <input id="new_password1" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password1"  title="new_password1" type="password" value="">
-              </label>
-            </div>
-
-            <div class="input-wrapper">
-              <!-- input for new password2 -->
-              <label id="new_password2" class="label-small input-label font-near-black">
-                <label class="label-small input-label font-gray" for="new_password2" style="padding-top: 0.25rem;">Re-Enter New Password</label>
-                <input id="new_password2" class="form-input"  style="margin-bottom: 0;"
-                    name="new_password2"  title="new_password2" type="password" value="">
-              </label>
-            </div>
-
+            <!-- input for current password -->
+            <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
+            <!-- input for new password -->
+            <input id="newPassword" class="center input" name="new_password1" type="password" placeholder="New password" title="New password">
+            <!-- input for duplicate new password -->
+            <input id="newPasswordDuplicate" class="center input" name="new_password2" type="password" placeholder="Re-enter new password" title="New password duplicate">
             <div id="buttonDiv">
-              <input id="changePasswordButton" class="button button-primary center" title="Add" type="submit" value="Save">
+              <input id="savePassword" class="button button-primary center" title="Add" type="submit" value="Save">
+              <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
             </div>
-            <a class="button button-secondary center" href="/settings/admin" title="Cancel">Cancel</a>
           </form>
-
           <!-- FLASH MESSAGE -->
           {% include "snippets/flash_message" %}
-
           <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
           {% include "snippets/noscript" %}
-
         </div>
       </div>
-
       <script type="text/javascript" src="/js/change_password.js"></script>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/admin/forgot_password.html.tera b/peach-web/templates/settings/admin/forgot_password.html.tera
index 4cec989..85eff50 100644
--- a/peach-web/templates/settings/admin/forgot_password.html.tera
+++ b/peach-web/templates/settings/admin/forgot_password.html.tera
@@ -1,25 +1,20 @@
 {%- extends "nav" -%}
 {%- block card %}
-      <!--PUBLIC PAGE FOR SENDING A NEW TEMPORARY PASSWORD TO BE USED TO RESET YOUR PASSWORD -->
+      <!-- PASSWORD RESET REQUEST CARD -->
       <div class="card center">
-        <p class="text-notice" style="width: 80%;  margin:auto; margin-bottom: 35px; margin-top: 20px;">
-          Click the button below to send a new temporary password which can be used to change your device password.
-          <br/><br/>
-          The temporary password will be sent in an SSB private message to the admin of this device.
-        </p>
-
+        <div class="capsule capsule-container info-border">
+          <p class="card-text">Click the button below to send a new temporary password which can be used to change your device password.
+          </br></br>
+          The temporary password will be sent in an SSB private message to the admin of this device.</p>
+        </div>
         <form id="sendPasswordReset" action="/send_password_reset" method="post">
           <div id="buttonDiv">
-            <input type="submit" class="button center button-secondary" value="Send Password Reset" title="Send Password Reset Link"/>
+            <input class="button button-primary center" style="margin-top: 1rem;" type="submit" value="Send Password Reset" title="Send Password Reset Link"/>
           </div>
         </form>
-
         <!-- FLASH MESSAGE -->
         {% include "snippets/flash_message" %}
-
         <!-- NO SCRIPT FOR WHEN JS IS DISABLED -->
         {% include "snippets/noscript" %}
-
-        </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/admin/menu.html.tera b/peach-web/templates/settings/admin/menu.html.tera
index 98716a3..111cb73 100644
--- a/peach-web/templates/settings/admin/menu.html.tera
+++ b/peach-web/templates/settings/admin/menu.html.tera
@@ -2,12 +2,10 @@
 {%- block card %}
       <!-- ADMIN SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
-            <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="change" class="button button-primary center" href="/settings/admin/change_password" title="Change Password">Change Password</a>
+          <a id="configure" class="button button-primary center" href="/settings/admin/configure" title="Configure Admin">Configure Admin</a>
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/menu.html.tera b/peach-web/templates/settings/menu.html.tera
index 43253c8..8a7bdd0 100644
--- a/peach-web/templates/settings/menu.html.tera
+++ b/peach-web/templates/settings/menu.html.tera
@@ -2,13 +2,11 @@
 {%- block card %}
       <!-- SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
-            <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
-            <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="network" class="button button-primary center" href="/settings/network" title="Network Settings">Network</a>
+          <a id="scuttlebutt" class="button button-primary center" href="/settings/scuttlebutt" title="Scuttlebutt Settings">Scuttlebutt</a>
+          <a id="admin" class="button button-primary center" href="/settings/admin" title="Administrator Settings">Administration</a>
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/settings/scuttlebutt.html.tera b/peach-web/templates/settings/scuttlebutt.html.tera
index 24587ae..2ceb8de 100644
--- a/peach-web/templates/settings/scuttlebutt.html.tera
+++ b/peach-web/templates/settings/scuttlebutt.html.tera
@@ -2,19 +2,17 @@
 {%- block card %}
       <!-- SCUTTLEBUTT SETTINGS MENU -->
       <div class="card center">
-        <div class="card-container">
-          <!-- BUTTONS -->
-          <div id="settingsButtons">
-            <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
-            <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
-            <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
-            <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
-            <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
-            <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
-            <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
-            <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
-            <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
-          </div>
+        <!-- BUTTONS -->
+        <div id="settingsButtons">
+          <a id="networkKey" class="button button-primary center" href="/settings/scuttlebutt/network_key" title="Set Network Key">Set Network Key</a>
+          <a id="replicationHops" class="button button-primary center" href="/settings/scuttlebutt/hops" title="Set Replication Hops">Set Replication Hops</a>
+          <a id="removeFeeds" class="button button-primary center" href="/settings/scuttlebutt/remove_feeds" title="Remove Blocked Feeds">Remove Blocked Feeds</a>
+          <a id="setDirectory" class="button button-primary center" href="/settings/scuttlebutt/set_directory" title="Set Database Directory">Set Database Directory</a>
+          <a id="checkFilesystem" class="button button-primary center" href="/settings/scuttlebutt/check_fs" title="Check Filesystem">Check Filesystem</a>
+          <a id="repairFilesystem" class="button button-primary center" href="/settings/scuttlebutt/repair" title="Repair Filesystem">Repair Filesystem</a>
+          <a id="disable" class="button button-primary center" href="/settings/scuttlebutt/disable" title="Disable Sbot">Disable Sbot</a>
+          <a id="enable" class="button button-primary center" href="/settings/scuttlebutt/enable" title="Enable Sbot">Enable Sbot</a>
+          <a id="restart" class="button button-primary center" href="/settings/scuttlebutt/restart" title="Restart Sbot">Restart Sbot</a>
         </div>
       </div>
 {%- endblock card -%}