Generalised form styles

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;

src/stylesheets/components/_mainForm.scss

@@ -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;
-	}
-}

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';

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>

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>

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>

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>

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>