From e548ba799349ba39a1a6ce1432a39368798a84cf Mon Sep 17 00:00:00 2001
From: Craig Oates <craig@craigoates.net>
Date: Fri, 14 Oct 2022 21:51:43 +0100
Subject: [PATCH] update CSS and HTML in /templates/sign-up.html template.

---
 templates/sign-up.html | 59 ++++++++++++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 13 deletions(-)

diff --git a/templates/sign-up.html b/templates/sign-up.html
index 7a968c5..57ba89c 100644
--- a/templates/sign-up.html
+++ b/templates/sign-up.html
@@ -1,21 +1,54 @@
 {% extends "layouts/default.html" %}
-{% block title %}Create a new account.{% endblock %}
+{% block title %}Create a new account{% endblock %}
 {% block content %}
-<div>
-    <form action="/sign-up" method="post">
-	<fieldset>
-	    <legend>Account Details</legend>
-	    <input type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
+<main class="be-main">
+    <h1>Create Your New Account</h1>
+    <form class="be-gui-form"
+          action="/sign-up"
+          method="post">
+	    <input type="hidden"
+                   name="AUTHENTICITY-TOKEN"
+                   value="{{token}}">
 	    <label>Username</label>
-	    <input required type="text" name="USERNAME">
+            <p class="be-gui-form-hint">
+                Enter your email address or create a unique name to log into the
+                website. You can not change this after you've created your
+                account.
+            </p>
+	    <input required
+                   type="text"
+                   name="USERNAME"
+                   placeholder="Enter your username here...">
 	    <label>Display Name</label>
-	    <input required type="text" name="DISPLAY-NAME">
+            <p class="be-gui-form-hint">
+                Your display name is how the website will refer to you whilst
+                logged-in. You can change this after you've logged into the
+                website.
+            </p>
+	    <input required
+                   type="text"
+                   name="DISPLAY-NAME"
+                   placeholder="Enter your display name here...">
 	    <label>Password</label>
-	    <input required type="password" name="PASSWORD">
+	    <input required
+                   type="password"
+                   name="PASSWORD"
+                   placeholder="Enter your password here...">
 	    <label>Password Check</label>
-	    <input required type="password" name="PASSWORD-CHECK">
-	    <input type="submit" value="Create Account">
-	</fieldset>
+            <p class="be-gui-form-hint">
+                Re-enter your password here to make sure you haven't misspelt it.
+            </p>
+	    <input required
+                   type="password"
+                   name="PASSWORD-CHECK"
+                   placeholder="Re-enter your password here to confirm it...">
+            <button class="be-gui-button"
+		    title="Click to login"
+		    type="submit">
+		<img alt="Create Account"
+		     src="/images/icons/create-account.png">
+		Sign-Up
+	    </button>
     </form>
-</div>
+</main>
 {% endblock %}