Improve claim page

2 files changed, 41 insertions, 23 deletions

diff --git a/app/templates/users/claim.html b/app/templates/users/claim.html
index 5a6b53a..db00d3f 100644
--- a/app/templates/users/claim.html
+++ b/app/templates/users/claim.html
@@ -5,10 +5,10 @@ Creating an Account
 {% endblock %}
 
 {% block content %}
-	<div class="box box_grey">
-		<h2>{{ self.title() }}</h2>
+	<div class="card">
+		<h2 class="card-header">{{ self.title() }}</h2>
 
-		<div class="box-body">
+		<div class="card-body">
 			<p>
 				If you have a forum account, you'll need to prove that you own it
 				to get an account on ContentDB.
@@ -28,7 +28,7 @@ Creating an Account
 					out of the Minetest community.
 				</p>
 
-				<a href="https://forum.minetest.net/ucp.php?mode=register">
+				<a class="btn btn-primary" href="https://forum.minetest.net/ucp.php?mode=register">
 					Create a Forum Account
 				</a>
 			{% endif %}
@@ -36,18 +36,23 @@ Creating an Account
 	</div>
 
 	{% if not current_user.is_authenticated %}
-		<div class="box box_grey">
-			<h2>Option 1 - Use GitHub field in forum profile</h2>
+	<div class="row mt-4">
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 1</span>
+				Use GitHub field in forum profile
+			</div>
 
-			<form method="post" class="box-body" action="{{ url_for('user_claim_page') }}">
-				<input type="hidden" name="claim_type" value="github">
-				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+			<form method="post" class="card-body" action="{{ url_for('user_claim_page') }}">
+				<input class="form-control" type="hidden" name="claim_type" value="github">
+				<input class="form-control" type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
 				<p>
 					Enter your forum username here:
 				</p>
 
-				<input type="text" name="username" value="{{ username }}" required placeholder="Forum username">
+				<input class="form-control my-4" type="text" name="username" value="{{ username }}" required placeholder="Forum username">
 
 				<p>
 					You'll need to have the GitHub field in your forum profile
@@ -56,14 +61,19 @@ Creating an Account
 						do that here</a>.
 				</p>
 
-				<input type="submit" value="Next: log in with GitHub">
+				<input class="btn btn-primary" type="submit" value="Next: log in with GitHub">
 			</form>
 		</div>
+		</div>
 
-		<div class="box box_grey">
-			<h2>Option 2 - Paste verification token into signature</h2>
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 2</span>
+				Verification token
+			</div>
 
-			<form method="post" class="box-body" action="{{ url_for('user_claim_page') }}">
+			<form method="post" class="card-body" action="{{ url_for('user_claim_page') }}">
 				<input type="hidden" name="claim_type" value="forum">
 				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
@@ -71,7 +81,7 @@ Creating an Account
 					Enter your forum username here:
 				</p>
 
-				<input type="text" name="username" value="{{ username }}" required placeholder="Forum username">
+				<input class="form-control my-3" type="text" name="username" value="{{ username }}" required placeholder="Forum username">
 
 				<p>
 					Go to
@@ -79,11 +89,12 @@ Creating an Account
 						User Control Panel > Profile > Edit signature
 					</a>
 				</p>
+
 				<p>
 					Paste this into your signature:
 				</p>
 
-				<input type="text" value="{{ key }}" readonly size=32>
+				<input class="form-control my-3" type="text" value="{{ key }}" readonly size=32>
 
 				<p>
 					Click next so we can check it.
@@ -92,15 +103,20 @@ Creating an Account
 					Don't worry, you can remove it after this is done.
 				</p>
 
-				<input type="submit" value="Next">
+				<input class="btn btn-primary" type="submit" value="Next">
 			</form>
 		</div>
+		</div>
 
-		<div class="box box_grey">
-			<h2>Option 3 - Email/password sign up</h2>
+		<div class="col-sm-4">
+		<div class="card">
+			<div class="card-header">
+				<span class="badge badge-pill badge-dark mr-2">Option 3</span>
+				Email/password sign up
+			</div>
 
-			<div class="box-body">
-				<p>
+			<div class="card-body">
+				<p class="alert alert-danger">
 					<b>Only do this if you don't have a forum account!</b>
 				</p>
 				<p>
@@ -108,8 +124,10 @@ Creating an Account
 					options.
 				</p>
 
-				<a class="btn" href="{{ url_for('user.register') }}">Register</a>
+				<a class="btn btn-primary" href="{{ url_for('user.register') }}">Register</a>
 			</div>
 		</div>
+		</div>
+	</div>
 	{% endif %}
 {% endblock %}
diff --git a/app/templates/users/set_password.html b/app/templates/users/set_password.html
index 6fe88e9..3fb7b26 100644
--- a/app/templates/users/set_password.html
+++ b/app/templates/users/set_password.html
@@ -7,7 +7,7 @@
 {% block content %}
 
 {% if optional %}
-	<div class="box box_grey alert alert-primary">
+	<div class="alert alert-primary">
 		It is recommended that you set a password for your account.
 
 		<a class="alert_right button" href="{{ url_for('home_page') }}">Skip</a>