Added styles for station settings overlay.

frontend/app/js/components/CustomInput.jsx

@@ -313,7 +313,7 @@ export default class CustomInput extends Component {
 			const ElementType = (this.state.isInput) ? "input" : "textarea";
 
 			return (
-				<label htmlFor={this.props.name}>
+				<label htmlFor={this.props.name} className="customInput">
 					{(this.props.showLabel) ? <span>{this.props.label}</span> : null}
 					<ElementType
 						placeholder={this.props.placeholder}
@@ -341,9 +341,9 @@ export default class CustomInput extends Component {
 			});
 
 			return (
-				<label htmlFor={this.props.name}>
+				<label htmlFor={this.props.name} className="customInput">
 					{(this.props.showLabel) ? <span>{this.props.label}</span> : null}
-					<div>
+					<div className="radio-options">
 						{ optionsArr }
 						{/*<ElementType
 							placeholder={this.props.placeholder}

frontend/app/js/views/Station/Views/Overlays.jsx

@@ -55,7 +55,7 @@ export default class Overlays extends Component {
 	}
 
 	render() {
-		return <div>
+		return <div id="overlays">
 			{ this.state.overlay1 }
 			{ this.state.overlay2 }
 			{ this.state.overlay3 }

frontend/app/js/views/Station/Views/Settings.jsx

@@ -276,26 +276,28 @@ export default class Settings extends Component {
 	render() {
 		return (
 			<div className="overlay">
-				<button onClick={ this.close }>Back</button>
-				<h1>Settings</h1>
-				<CustomErrors onRef={ ref => (this.messages = ref) } />
+				<button onClick={ this.close } className="back"><i className="material-icons">arrow_back</i></button>
+				<div className="content">
+					<h1>Settings</h1>
+					<CustomErrors onRef={ ref => (this.messages = ref) } />
 
-				<CustomInput key="name" type="stationName" name="name" label="Station name" placeholder="Station name" original={ this.props.name } onRef={ ref => (this.input.name = ref) } />
-				<button onClick={ this.changeName }>Change name</button>
+					<CustomInput key="name" showLabel={true} type="stationName" name="name" label="Station name" placeholder="Station name" original={ this.props.name } onRef={ ref => (this.input.name = ref) } />
+					<button onClick={ this.changeName }>Change name</button>
 
-				<CustomInput key="displayName" type="stationDisplayName" name="displayName" label="Station display name" placeholder="Station display name" original={ this.props.displayName } onRef={ ref => (this.input.displayName = ref) } />
-				<button onClick={ this.changeDisplayName }>Change display name</button>
+					<CustomInput key="displayName" showLabel={true} type="stationDisplayName" name="displayName" label="Station display name" placeholder="Station display name" original={ this.props.displayName } onRef={ ref => (this.input.displayName = ref) } />
+					<button onClick={ this.changeDisplayName }>Change display name</button>
 
-				<CustomInput key="description" type="stationDescription" name="description" label="Station description" placeholder="Station description" original={ this.props.description } onRef={ ref => (this.input.description = ref) } />
-				<button onClick={ this.changeDescription }>Change description</button>
+					<CustomInput key="description" showLabel={true} type="stationDescription" name="description" label="Station description" placeholder="Station description" original={ this.props.description } onRef={ ref => (this.input.description = ref) } />
+					<button onClick={ this.changeDescription }>Change description</button>
 
-				<CustomInput key="privacy" type="stationPrivacy" name="privacy" label="Station privacy" placeholder="Station privacy" original={ this.state.privacy } onRef={ ref => (this.input.privacy = ref) } />
-				<button onClick={ this.savePrivacy }>Save privacy</button>
+					<CustomInput key="privacy" showLabel={true} type="stationPrivacy" name="privacy" label="Station privacy" placeholder="Station privacy" original={ this.state.privacy } onRef={ ref => (this.input.privacy = ref) } />
+					<button onClick={ this.savePrivacy }>Save privacy</button>
 
-				<CustomInput key="mode" type="stationMode" name="mode" label="Station mode" placeholder="Station mode" original={ this.state.mode } onRef={ ref => (this.input.mode = ref) } />
-				<button onClick={ this.saveMode }>Save mode</button>
+					<CustomInput key="mode" showLabel={true} type="stationMode" name="mode" label="Station mode" placeholder="Station mode" original={ this.state.mode } onRef={ ref => (this.input.mode = ref) } />
+					<button onClick={ this.saveMode }>Save mode</button>
 
-				<button onClick={ this.deleteStation }>{ this.state.deleteButtonText }</button>
+					<button onClick={ this.deleteStation } className="red-button">{ this.state.deleteButtonText }</button>
+				</div>
 			</div>
 		);
 	}

frontend/app/styles/main.scss

@@ -11,6 +11,7 @@
 @import "team";
 @import "home";
 @import "station";
+@import "overlays";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");
@@ -57,21 +58,8 @@ h1 {
 .disliked {
 	color: red;
 }
-
-.overlay {
-	display: block;
-	position: absolute;
-	top: 64px;
-	bottom: 0;
-	right: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	background-color: #03a9f4;
-	z-index: 2;
-}
 // Temp End
-main {
+main, #overlays .content {
 	margin-left: auto;
 	margin-right: auto;
 
@@ -82,6 +70,7 @@ main {
 		border: solid 1px;
 		padding: 8px;
 		margin-bottom: 16px;
+		background-color: $musare_color_white;
 
 		&.custom-messages-error {
 			border-color: $musare_color_primary_red;

frontend/app/styles/overlays.scss

@@ -0,0 +1,77 @@
+@import "colors";
+
+#overlays {
+	color: $musare_color_white;
+
+	.overlay {
+		background-color: $musare_color_primary_blue;
+		display: block;
+		position: absolute;
+		top: 64px;
+		right: 0;
+		left: 0;
+		min-height: 100%;
+		z-index: 2;
+
+		.back {
+			display: inline-block;
+			width: 32px;
+			height: 32px;
+			padding: 0px;
+			margin: 0 0 0 13px;
+			float: left;
+
+			i {
+				font-size: 32px;
+			}
+		}
+
+		.content {
+			margin-top: 16px;
+			width: 296px;
+
+			.custom-messages {
+				&.custom-messages-error {
+					border-color: $musare_color_primary_red;
+					color: $musare_color_primary_red;
+				}
+
+				&.custom-messages-info {
+					border-color: $musare_color_dark_blue;
+					color: $musare_color_dark_blue;
+				}
+
+				&.custom-messages-success {
+					border-color: $musare_color_green;
+					color: $musare_color_green;
+				}
+			}
+
+			label {
+				color: $musare_color_white;
+			}
+
+			button {
+				background-color: $musare_color_white;
+				color: $musare_color_primary_blue;
+				border-radius: 50px;
+
+				&:hover, &:focus {
+					background-color: $musare_color_light_gray;
+					color: $musare_color_primary_blue;
+				}
+			}
+
+			.red-button {
+				background-color: $musare_color_primary_red;
+				color: $musare_color_white;
+
+				&:hover, &:focus {
+					background-color: $musare_color_secondary_red; //TODO Fix these colors
+					color: $musare_color_white;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+}

frontend/app/styles/specific/form.scss

@@ -1,7 +1,7 @@
 @import "../colors";
 @import "../breakpoints";
 
-label {
+.customInput {
 	color: $musare_color_primary_gray;
 	display: block;
 	margin-bottom: 16px;
@@ -14,7 +14,7 @@ label {
 		margin-bottom: 5px;
 	}
 
-	input, textarea {
+	> input, textarea {
 		display: block;
 		box-sizing: border-box;
 		width: 100%;
@@ -30,6 +30,47 @@ label {
 		}
 	}
 
+	.radio-options {
+		label {
+			input[type="radio"] {
+				border: 0;
+				clip: rect(0 0 0 0);
+				height: 1px;
+				margin: -1px;
+				overflow: hidden;
+				padding: 0;
+				position: absolute;
+				width: 1px;
+			}
+
+			input[type="radio"] + span::before {
+				content: '';
+				display: inline-block;
+				width: 16px;
+				height: 16px;
+				vertical-align: -4px;
+				border-radius: 50px;
+				border: 4px solid $musare_color_white;
+				background-color: white;
+				//box-shadow: 0 0 0 0.15em #000;
+				margin-right: 16px;
+				//transition: 0.5s ease all;
+			}
+
+			input[type="radio"]:checked + span::before {
+				background: $musare_color_primary_blue;
+			}
+
+			/*input {
+				float: left;
+			}*/
+
+			span {
+				font-size: 15px;
+			}
+		}
+	}
+
 	ul {
 		display: block;
 		list-style-position: inside;

frontend/app/styles/station.scss

@@ -85,7 +85,7 @@ main#station {
 		}
 	}
 
-	.content {
+	> .content {
 		text-align: center;
 		margin-top: 16px;