Easier to understand service status icons

src/js/views/Settings.js

@@ -150,15 +150,31 @@ class Settings extends React.Component{
 	}
 
 	serviceStatus(service){
+
+		var icon = null
+		var status = 'Unknown'
+
 		if (this.props[service].connecting){
-			return <span className="grey-text">Connecting</span>
+			icon = <span className="icon connecting"><FontAwesome name="plug" /></span>
+			status = 'Connecting'
 		} else if (service == 'spotify' && !this.props[service].authorized){
-			return <span className="orange-text">Not authorized</span>
+			icon = <span className="icon warning"><FontAwesome name="check" /></span>
+			status = 'Connected (not authorized)'
 		} else if (this.props[service].connected){
-			return <span className="green-text">Connected</span>
+			icon = <span className="icon connected"><FontAwesome name="check" /></span>
+			status = 'Connected'
 		} else {
-			return <span className="red-text">Disconnected</span>
+			icon = <span className="icon disconnected"><FontAwesome name="close" /></span>
+			status = 'Disconnected'
 		}
+
+		return (
+			<div className="service">
+				<h4>{service}</h4>
+				{icon}
+				<span className="text">{status}</span>
+			</div>
+		)
 	}
 
 	render(){
@@ -182,26 +198,10 @@ class Settings extends React.Component{
 
 				<section className="content-wrapper">
 
-					<div className="status">
-					
-						<div className="item">
-							<Icon name="server" />
-							<h4>Mopidy</h4>
-							{this.serviceStatus('mopidy')}
-						</div>
-					
-						<div className="item">
-							<Icon name="connection" />
-							<h4>Pusher</h4>
-							{this.serviceStatus('pusher')}
-						</div>
-
-						<div className="item">
-							<Icon name="spotify" />
-							<h4>Spotify</h4>
-							{this.serviceStatus('spotify')}
-						</div>
-
+					<div className="services">					
+						{this.serviceStatus('mopidy')}
+						{this.serviceStatus('pusher')}
+						{this.serviceStatus('spotify')}
 					</div>
 
 					<h4 className="underline">System</h4>

src/scss/views/_settings.scss

@@ -1,25 +1,49 @@
 
 .settings-view {
-	
-	.status {
-		.item {
+	.services {
+		.service {
 			position: relative;
 			display: inline-block;
 			padding: 0 0 0 45px;
 			margin: 0 20px 10px 0;
 			min-width: 80px;
 
-			.icon {
-				width: 35px;
-				height: 35px;
-				position: absolute;
-				top: 0;
-				left: 0;
-			}
-
 			h4 {
 				padding: 0;
-				margin: 0;
+				margin: 0 0 -3px 0;
+				text-transform: capitalize;
+			}
+
+			.icon {
+				width: 35px;
+				height: 25px;
+				position: absolute;
+				top: 2px;
+				left: 0;
+				border-radius: 50%;
+				color: $white;
+				text-align: center;
+				padding-top: 10px;
+
+				&.connecting {
+					background: $mid_grey;
+				}
+
+				&.connected {
+					background: $green;
+				}
+
+				&.warning {
+					background: $orange;
+				}
+
+				&.disconnected {
+					background: $red;
+				}
+			}
+
+			.text {
+
 			}
 		}
 	}
@@ -64,6 +88,29 @@
 	}
 
 	@include responsive( $bp_medium ){
+		.services {
+			.service {
+				padding: 0 0 0 30px;
+				margin-bottom: 0;
+				min-width: 0px;
+
+				h4 {
+					padding-top: 1px;
+				}
+
+				.icon {
+					height: 15px;
+					width: 20px;
+					padding-top: 5px;
+					font-size: 10px;
+				}
+
+				.text {
+					display: none;
+				}
+			}
+		}
+
 		section {
 			padding: 20px;
 		}