Settings services; Don't prevent ctrl+f

src/js/App.js

@@ -99,11 +99,18 @@ class App extends React.Component{
 		}
 
 		// Listen for key codes that require ctrl to be held		
-		let keyCodesWithCtrl = [37,38,39,40,70]
+		let keyCodesWithCtrl = [37,38,39,40]
 		if (e.ctrlKey && keyCodesWithCtrl.indexOf(e.keyCode) > -1){
 			e.preventDefault()
 			return true
 		}
+
+		// Listen for key codes that require ctrl to be held		
+		let keyCodesWithCtrlShift = [70]
+		if (e.ctrlKey && e.shiftKey && keyCodesWithCtrlShift.indexOf(e.keyCode) > -1){
+			e.preventDefault()
+			return true
+		}
 	}
 
 	handleWindowResize(e){

src/js/views/Settings.js

@@ -154,16 +154,45 @@ class Settings extends React.Component {
 		)
 	}
 
-	renderStatus(server){
-		if (this.props[server].connecting){
-			return <span className="status grey-text pulse"><FontAwesome name="plug" />&nbsp; Connecting</span>
-		} else if (server == 'spotify' && !this.props[server].authorization){
-			return <span className="status orange-text"><FontAwesome name="lock" />&nbsp; Limited access</span>
-		} else if (this.props[server].connected){
-			return <span className="status green-text"><FontAwesome name="check" />&nbsp; Connected</span>
-		} else {
-			return <span className="status red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Disconnected</span>
+	renderServiceStatus(service){
+
+		let colour = 'grey'
+		let icon = 'close'
+		let name = service.charAt(0).toUpperCase() + service.slice(1).toLowerCase()
+		let text = 'Disconnected'
+
+		service = this.props[service]
+
+		if (service.connecting){
+			icon = 'plug'
+			text = 'Connecting'
+		} else if (name == 'Spotify' && (!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:'))){
+			icon = 'exclamation-triangle'
+			colour = 'orange'
+			text = 'Mopidy-Spotify not detected'
+		} else if (name == 'Spotify' && !service.authorization){
+			icon = 'lock'
+			colour = 'orange'
+			text = 'Limited access'
+		} else if (service.connected){
+			icon = 'check'
+			colour = 'green'
+			text = 'Connected'
 		}
+
+		return (
+			<div className="service">
+				<h4 className="title">
+					{name}
+				</h4>
+				<div className={colour+'-text icon'}>
+					<FontAwesome name={icon} />
+				</div>
+				<div className={"status "+colour+'-text'}>					
+					{text}
+				</div>
+			</div>
+		)
 	}
 
 	render(){
@@ -194,18 +223,9 @@ class Settings extends React.Component {
 				<section className="content-wrapper">
 
 					<div className="services">
-						<div className="service">
-							<h4 className="title">Mopidy</h4>
-							{this.renderStatus('mopidy')}
-						</div>
-						<div className="service">
-							<h4 className="title">Pusher</h4>
-							{this.renderStatus('pusher')}
-						</div>
-						<div className="service">
-							<h4 className="title">Spotify</h4>
-							{this.renderStatus('spotify')}
-						</div>
+						{this.renderServiceStatus('mopidy')}
+						{this.renderServiceStatus('pusher')}
+						{this.renderServiceStatus('spotify')}
 					</div>
 
 					<h4 className="underline">System</h4>

src/scss/views/_settings.scss

@@ -32,20 +32,36 @@
 	
 	.services {
 		@include clearfix();
+		margin-bottom: -20px;
 
 		.service {
-			width: 24%;
-			margin-right: 1.3334%;
-			border-radius: 3px;
-			padding: 16px;
+			margin-right: 20px;
+			margin-bottom: 20px;
+			padding-left: 46px;
 			box-sizing: border-box;
-			background: lighten($dark_grey, 5%);
 			position: relative;
 			float: left;
+			min-width: 150px;
 
 			.title {
 				margin: 0;
-				padding: 0 0 4px 0;
+				padding: 0;
+			}
+
+			.icon {
+				position: absolute;
+				top: 2px;
+				left: 0;
+				width: 34px;
+				height: 26px;
+				padding-top: 8px;
+				border: 2px solid $grey;
+				text-align: center;
+				border-radius: 50%;
+
+				.fa {
+					font-size: 16px;
+				}
 			}
 		}
 	}
@@ -92,7 +108,26 @@
 	@include responsive( $bp_medium ){
 		.intro {
 			.liner {
-				padding: 10vh 20px 0;
+				padding: 15vh 20px 0;
+			}
+		}
+
+		.services {
+			text-align: center;
+
+			.service {
+				padding: 40px 0 0 0;
+				text-align: center;
+				min-width: 100px;
+				display: inline-block;
+				margin-right: 0;
+				float: none;
+
+				.icon {
+					top: 0;
+					left: 50%;
+					margin-left: -18px;
+				}
 			}
 		}