From 27a4ecd7c1eaddab642a086441e281cfb58c03f5 Mon Sep 17 00:00:00 2001
From: matt <matt@fiddaman.net>
Date: Mon, 7 Mar 2022 14:45:09 +0000
Subject: [PATCH] Generalised form styles

---
 src/stylesheets/base/_form.scss           | 26 ++++++++++++++++++++++-
 src/stylesheets/components/_mainForm.scss | 21 ------------------
 src/stylesheets/main.scss                 |  1 -
 views/change-password.hbs                 |  4 ++--
 views/login.hbs                           |  4 ++--
 views/logout.hbs                          |  4 ++--
 views/password-reset.hbs                  |  4 ++--
 views/register.hbs                        |  4 ++--
 8 files changed, 35 insertions(+), 33 deletions(-)
 delete mode 100644 src/stylesheets/components/_mainForm.scss

diff --git a/src/stylesheets/base/_form.scss b/src/stylesheets/base/_form.scss
index 3efab47..6e95771 100644
--- a/src/stylesheets/base/_form.scss
+++ b/src/stylesheets/base/_form.scss
@@ -1,3 +1,22 @@
+.formContainer {
+	margin: 2rem auto;
+	width: 85vw;
+
+	a {
+		display: block;
+
+		&:not(.formContainer__small-link) {
+			margin: 1rem;
+			text-align: center;
+			font-size: 1.2em;
+		}
+	}
+
+	@include respond-to('large') {
+		width: 40vw;
+	}
+}
+
 form {
 	display: grid;
 	gap: 1rem;
@@ -7,7 +26,7 @@ form {
 		gap: 1rem;
 	}
 
-	input:not([type='submit']), textarea {
+	input:not([type='submit']), textarea, select {
 		background: #E1E1E1;
 		border: none;
 		width: 100%;
@@ -25,6 +44,11 @@ form {
 		}
 	}
 
+	input[type='submit'] {
+		width: 100%;
+		padding: 1rem 0;
+	}
+
 	@include respond-to('medium') {
 		.input-group {
 			grid-template-columns: 1fr 1fr;
diff --git a/src/stylesheets/components/_mainForm.scss b/src/stylesheets/components/_mainForm.scss
deleted file mode 100644
index 1baf220..0000000
--- a/src/stylesheets/components/_mainForm.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.mainForm {
-	margin: 2rem auto 0 auto;
-	width: 85vw;
-
-	a {
-		margin: 1rem;
-		text-align: center;
-		display: block;
-		font-size: 1.2em;
-	}
-
-	input[type='submit'] {
-		@extend .btn, .btn--primary, .btn--full;
-		width: 100%;
-		padding: 1rem 0;
-	}
-
-	@include respond-to('large') {
-		width: 40vw;
-	}
-}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index 08c22a7..dfc04c4 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -13,7 +13,6 @@
 @import 'components/testimonial';
 @import 'components/title';
 @import 'components/mainPageHeader';
-@import 'components/mainForm';
 @import 'components/adminHeader';
 @import 'components/adminNav';
 @import 'components/adminNavItem';
diff --git a/views/change-password.hbs b/views/change-password.hbs
index 8981c33..5a1b46d 100644
--- a/views/change-password.hbs
+++ b/views/change-password.hbs
@@ -1,6 +1,6 @@
 {{> mainPageHeader name='Password Recovery' }}
 
-<div class='mainForm'>
+<div class='formContainer'>
 	<form action='/change-password' method='post'>
 		<input type='password' id='password' name='password' placeholder='New password' required/>
 		<input type='password' id='confPassword' name='confPassword' placeholder='Confirm new password' required/>
@@ -8,7 +8,7 @@
 		<input type='hidden' id='uuid' name='uuid' value='{{ uuid }}' required/>
 		<input type='hidden' id='token' name='token' value='{{ token }}' required/>
 
-		<input type='submit' class='btn btn--primary' value='Change password'/>
+		<input type='submit' class='btn btn--primary btn--full' value='Change password'/>
 	</form>
 	<a href='/login'>Back to login</a>
 </div>
diff --git a/views/login.hbs b/views/login.hbs
index bee7b3d..61ad4cc 100644
--- a/views/login.hbs
+++ b/views/login.hbs
@@ -1,11 +1,11 @@
 {{> mainPageHeader name='Log In' }}
 
-<div class='mainForm'>
+<div class='formContainer'>
 	<form action='/login' method='post'>
 		<input type='email' id='email' name='email' placeholder='Email Address' required/>
 		<input type='password' id='password' name='password' placeholder='Password' required/>
 
-		<input type='submit' class='btn btn--primary' value='Log In'/>
+		<input type='submit' class='btn btn--primary btn--full' value='Log In'/>
 	</form>
 	<a href='/register'>Not got an account yet? Sign up</a>
 	<a href='/password-reset'>Forgotten your password?</a>
diff --git a/views/logout.hbs b/views/logout.hbs
index 500081a..08ccc72 100644
--- a/views/logout.hbs
+++ b/views/logout.hbs
@@ -1,8 +1,8 @@
 {{> mainPageHeader name='Log Out' }}
 
-<div class='mainForm'>
+<div class='formContainer'>
 	<p style='text-align: center;'>You are logged in as <span class='hl'>{{ username }}</span></p>
 	<form action='/logout' method='post'>
-		<input type='submit' class='btn btn--primary' value='Log Out'/>
+		<input type='submit' class='btn btn--primary btn--full' value='Log Out'/>
 	</form>
 </div>
diff --git a/views/password-reset.hbs b/views/password-reset.hbs
index d1fbfcc..b7e2fcc 100644
--- a/views/password-reset.hbs
+++ b/views/password-reset.hbs
@@ -1,10 +1,10 @@
 {{> mainPageHeader name='Password Recovery' }}
 
-<div class='mainForm'>
+<div class='formContainer'>
 	<form action='/password-reset' method='post'>
 		<input type='email' id='email' name='email' placeholder='Email Address' required/>
 
-		<input type='submit' class='btn btn--primary' value='Request a password reset'/>
+		<input type='submit' class='btn btn--primary btn--full' value='Request a password reset'/>
 	</form>
 	<a href='/login'>Back to login</a>
 </div>
diff --git a/views/register.hbs b/views/register.hbs
index 388fde1..966362d 100644
--- a/views/register.hbs
+++ b/views/register.hbs
@@ -1,6 +1,6 @@
 {{> mainPageHeader name='Sign Up' }}
 
-<div class='mainForm'>
+<div class='formContainer'>
 	<form action='/register' method='post'>
 		<div class='input-group'>
 			<input type='text' id='fname' name='fname' placeholder='First Name' required/>
@@ -12,7 +12,7 @@
 		<input type='password' id='password' name='password' placeholder='Password' required/>
 		<input type='password' id='confPassword' name='confPassword' placeholder='Confirm Password' required/>
 
-		<input type='submit' class='btn btn--primary' value='Sign Up'/>
+		<input type='submit' class='btn btn--primary btn--full' value='Sign Up'/>
 	</form>
 	<a href='/login'>Already got an account? Log in</a>
 </div>