From 6448b29ec83a62626bceac45a609f021cb4f3bc3 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 5 Feb 2017 19:57:29 +1300
Subject: [PATCH] Consistent design elements for modal

---
 .../components/Modal/CreatePlaylistModal.js   |  4 +-
 src/js/components/Modal/EditPlaylistModal.js  |  4 +-
 src/js/components/Modal/EditRadioModal.js     | 94 +++++++++----------
 src/scss/components/_header.scss              |  3 +-
 src/scss/components/_modal.scss               |  7 +-
 src/scss/global/_core.scss                    |  2 +
 6 files changed, 61 insertions(+), 53 deletions(-)

diff --git a/src/js/components/Modal/CreatePlaylistModal.js b/src/js/components/Modal/CreatePlaylistModal.js
index 7033218c..bf009fe0 100755
--- a/src/js/components/Modal/CreatePlaylistModal.js
+++ b/src/js/components/Modal/CreatePlaylistModal.js
@@ -74,7 +74,9 @@ export default class CreatePlaylistModal extends React.Component{
 							<span className="label">Public</span>
 						</label>
 					</div>
-					<button type="submit" className="primary centered" disabled={!this.state.submit_enabled}>Save</button>
+					<div className="actions centered-text">
+						<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
+					</div>
 				</form>
 			</div>
 		)
diff --git a/src/js/components/Modal/EditPlaylistModal.js b/src/js/components/Modal/EditPlaylistModal.js
index 766d8375..5527091b 100755
--- a/src/js/components/Modal/EditPlaylistModal.js
+++ b/src/js/components/Modal/EditPlaylistModal.js
@@ -53,7 +53,9 @@ export default class EditPlaylistModal extends React.Component{
 							<span className="label">Public</span>
 						</label>
 					</div>
-					<button type="submit" className="primary centered" disabled={!this.state.submit_enabled}>Save</button>
+					<div className="actions centered-text">
+						<button type="submit" className="primary wide" disabled={!this.state.submit_enabled}>Save</button>
+					</div>
 				</form>
 			</div>
 		)
diff --git a/src/js/components/Modal/EditRadioModal.js b/src/js/components/Modal/EditRadioModal.js
index 2e8ebe2b..cab81b9f 100755
--- a/src/js/components/Modal/EditRadioModal.js
+++ b/src/js/components/Modal/EditRadioModal.js
@@ -24,13 +24,12 @@ export default class EditRadioModal extends React.Component{
 		this.props.spotifyActions.resolveRadioSeeds(this.props.radio)
 	}
 
-	save(){
-		this.props.pusherActions.startRadio(this.state.seeds)
-		this.props.uiActions.closeModal()
-	}
-
-	stop(){
-		this.props.pusherActions.stopRadio()
+	handleSubmit(e){
+		if (this.state.enabled){
+			this.props.pusherActions.startRadio(this.state.seeds)
+		}else{
+			this.props.pusherActions.stopRadio()
+		}
 		this.props.uiActions.closeModal()
 	}
 
@@ -68,7 +67,7 @@ export default class EditRadioModal extends React.Component{
 	renderSeeds(){
 		var seeds = []
 
-		if (this.state.enabled && this.state.seeds){
+		if (this.state.seeds){
 			for (var i = 0; i < this.state.seeds.length; i++){
 				var uri = this.state.seeds[i]
 				if (uri){
@@ -98,37 +97,35 @@ export default class EditRadioModal extends React.Component{
 		}
 
 		return (
-			<div className="list">
-				{
-					seeds.map((seed,index) => {
-						return (
-							<div className="list-item" key={seed.uri}>
-								{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
-								<span className="grey-text">&nbsp;({seed.type})</span>
-								<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed(seed.uri)} />
-							</div>
-						)
-					})
-				}
+			<div>
+				<div className="list">
+					{
+						seeds.map((seed,index) => {
+							return (
+								<div className="list-item" key={seed.uri}>
+									{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
+									<span className="grey-text">&nbsp;({seed.type})</span>
+									<FontAwesome name="close" className="pull-right destructive" onClick={() => this.removeSeed(seed.uri)} />
+								</div>
+							)
+						})
+					}
+				</div>
 			</div>
 		)
 	}
 
-	renderActions(){
-		if (this.state.enabled){
-			return (
-				<span>
-					<button className="primary wide" onClick={e => this.save()}>Save</button>
-					<button className="destructive wide" onClick={e => this.stop()}>Stop</button>
-				</span>
-			)
-		}else{
-			return (
-				<span>				
-					<button className="primary wide" onClick={e => this.save()}>Start</button>
-				</span>
-			)
-		}
+	renderAddSeeds(){
+		return (
+			<div className="field no-top-margin">
+				<input 
+					type="text"
+					placeholder="Add comma-separated URIs"
+					onChange={e => this.setState({uri: e.target.value})} 
+					value={this.state.uri} />
+				<button type="button" className="discrete" onClick={e => this.addSeed()}><FontAwesome name="plus" /></button>
+			</div>
+		)
 	}
 
 	render(){
@@ -136,22 +133,23 @@ export default class EditRadioModal extends React.Component{
 			<div>
 				<h4>Edit radio</h4>
 
-				<h3>Current seeds</h3>
-				{this.renderSeeds()}
-
-				<form>
-					<h3>Add seeds</h3>
-					<div className="field">
-						<input 
-							type="text"
-							placeholder="Comma-separated URIs"
-							onChange={e => this.setState({uri: e.target.value})} 
-							value={this.state.uri} />
-						<button className="discrete" onClick={e => this.addSeed()}><FontAwesome name="check" /></button>
+				<form onSubmit={e => this.handleSubmit(e)}>
+					<div className="field checkbox white">
+						<label>
+							<input 
+								type="checkbox"
+								name="enabled"
+								checked={ this.state.enabled }
+								onChange={ e => this.setState({ enabled: !this.state.enabled })} />
+							<span className="label">Radio mode enabled</span>
+						</label>
 					</div>
 
+					{this.state.enabled ? this.renderSeeds() : null}
+					{this.state.enabled ? this.renderAddSeeds() : null}
+
 					<div className="actions centered-text">
-						{this.renderActions()}
+						<button type="submit" className="primary wide">Save</button>
 					</div>
 				</form>
 			</div>
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 9c65ab3b..114dd7a9 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -32,7 +32,8 @@ main {
 				background: transparent;
 				font-size: 14px;
 				font-weight: 600;
-				padding: 14px 10px;
+				padding: 13px 10px;
+				line-height: 24px;
 				text-transform: uppercase;
 			}
 		}
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index f11e5db7..4b136c45 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -133,7 +133,6 @@
 
 	&.edit_radio {
 		form {
-			padding-top: 60px;
 			.field {
 				position: relative;
 				margin-top: 10px;
@@ -141,7 +140,11 @@
 					position: absolute;
 					top: 5px;
 					right: 0;
-					padding: 10px 12px;
+					padding: 14px;
+				}
+				input[type="text"]{
+					font-size: 14px;
+					padding: 16px 18px;
 				}
 			}			
 		}
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 7664675b..8ec5593b 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -115,6 +115,8 @@ h4 {
 .no-bottom-padding {	padding-bottom: 0 !important; }
 .no-right-padding {		padding-right: 0 !important; }
 .no-left-padding {		padding-left: 0 !important; }
+.no-top-margin {		margin-top: 0 !important; }
+.no-bottom-margin {		margin-bottom: 0 !important; }
 
 .top-padding {			padding-top: 20px; }
 .bottom-padding {		padding-bottom: 20px; }