From cc99c8bf37f58a23e74cc4282fb02a0e495ce6b3 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Mon, 14 Nov 2016 11:30:24 +1300
Subject: [PATCH] Centered modal button

---
 src/js/components/Modal.js      |  2 +-
 src/scss/components/_modal.scss | 16 ++++++++++++++++
 src/scss/global/_forms.scss     | 13 +++++++++++--
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/js/components/Modal.js b/src/js/components/Modal.js
index 9ee2111d..0e7f0899 100755
--- a/src/js/components/Modal.js
+++ b/src/js/components/Modal.js
@@ -114,7 +114,7 @@ class Modal extends React.Component{
 							</label>
 						</div>
 					</div>
-					<button type="submit" className="primary">Save</button>
+					<button type="submit" className="primary centered">Save</button>
 				</form>
 			</div>
 		)
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index 6f82ee93..b3f12105 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -33,6 +33,22 @@
 		width: 70%;
 		color: #FFFFFF;
 
+		h1 {
+			font-size: 30px;
+			font-weight: 300;
+			padding-bottom: 30px;
+		}
+
+		form {
+			.field {
+				padding-bottom: 20px;
+			}
+
+			button[type="submit"]{
+				margin-top: 50px;
+			}
+		}
+
 		.playlists {
 			@include clearfix();
 
diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss
index 1a725bc7..df7ab65b 100755
--- a/src/scss/global/_forms.scss
+++ b/src/scss/global/_forms.scss
@@ -88,6 +88,15 @@ input[type="submit"] {
 		}
 	}
 
+	&.centered {
+		display: block;
+		min-width: 200px;
+		margin: 0 auto;
+		text-align: center;
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+
 	&[disabled],
 	&[disabled="disabled"] {
 		background: $light_grey !important;
@@ -117,7 +126,7 @@ input[type="submit"] {
 		float: left;
 		
 		input {
-			width: 60%;
+			width: 100%;
 		}
 
 		.text {
@@ -132,7 +141,7 @@ input[type="submit"] {
 		input{
 			display: none;
 		}
-		
+
 		.input {
 			padding-top: 4px;
 		}