Added styles to search YouTube overlay.

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

@@ -31,7 +31,10 @@ export default class Overlays extends Component {
 		if (type === "settings") input = <Settings t={ this.props.t } key={ key }/>;
 		else if (type === "playlists") input = <Playlists t={ this.props.t } key={ key }/>;
 		else if (type === "editPlaylist") input = <EditPlaylist t={ this.props.t } key={ key } playlistId={ this.props.extraProps2.get("playlistId") }/>;
-		else if (type === "searchYouTube") input = <SearchYouTube t={ this.props.t } key={ key }/>;
+		else if (type === "searchYouTube") {
+			if (this.state.overlay2) input = <SearchYouTube t={ this.props.t } order={ 3 } key={ key }/>;
+			else input = <SearchYouTube t={ this.props.t } order={ 2 } key={ key }/>;
+		}
 		else if (type === "queueList") input = <QueueList t={ this.props.t } key={ key }/>;
 		return input;
 	};

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

@@ -6,7 +6,7 @@ import CustomErrors from "components/CustomMessages.jsx";
 
 import { connect } from "react-redux";
 
-import { closeOverlay3 } from "actions/stationOverlay";
+import { closeOverlay3, closeOverlay2 } from "actions/stationOverlay";
 
 import io from "io";
 
@@ -59,44 +59,54 @@ export default class SearchYouTube extends Component {
 	};
 
 	close = () => {
-		this.props.dispatch(closeOverlay3());
+		if (this.props.order === 3) {
+			this.props.dispatch(closeOverlay3());
+		} else {
+			this.props.dispatch(closeOverlay2());
+		}
 	};
 
 	render() {
 		return (
 			<div className="overlay">
-				<button onClick={ this.close }>Back</button>
-				<h1>Search</h1>
-
-				<CustomInput type="youTubeSearchQuery" name="query" label="YouTube search query" placeholder="YouTube search query" onRef={ ref => (this.input.query = ref) } />
-				<button onClick={ this.search }>Search</button>
-
-				{
-					(this.state.gotResults)
-					? (
-						<div>
-							<h2>Results</h2>
-							{
-								this.state.results.map((result) => {
-									return (
-										<li key={ this.input.query.getValue() + result.songId }>
-											<img src={ result.thumbnail }/>
-											<a href={ result.url }>{ result.title }</a>
-											<span>12:12</span>
-											<span onClick={ () => { this.props.callback(result.songId); } }>ADD</span>
-										</li>
-									);
-								})
-							}
-						</div>
-					)
-					: null
-				}
-				<ul>
-					{}
-				</ul>
-
-				<CustomErrors onRef={ ref => (this.messages = ref) } />
+				<button onClick={ this.close } className="back"><i className="material-icons">arrow_back</i></button>
+				<div className="content">
+					<h1>Search</h1>
+
+					<CustomInput type="youTubeSearchQuery" showLabel={true} name="query" label="YouTube search query" placeholder="YouTube search query" onRef={ ref => (this.input.query = ref) } />
+					<button onClick={ this.search }>Search</button>
+
+					{
+						(this.state.gotResults)
+						? (
+							<div className="search-youtube-results">
+								<h2>Results</h2>
+								<ul>
+								{
+									this.state.results.map((result) => {
+										return (
+											<li key={ this.input.query.getValue() + result.songId }>
+												<img src={ result.thumbnail }/>
+												<a href={ result.url } target="_blank">{ result.title }</a>
+												<div>
+													<span className="duration">12:12</span>
+													<span onClick={ () => { this.props.callback(result.songId); } } className="add" tabIndex="0"><i className="material-icons">add</i></span>
+												</div>
+											</li>
+										);
+									})
+								}
+								</ul>
+							</div>
+						)
+						: null
+					}
+					<ul>
+						{}
+					</ul>
+
+					<CustomErrors onRef={ ref => (this.messages = ref) } />
+				</div>
 			</div>
 		);
 	}

frontend/app/styles/main.scss

@@ -12,6 +12,7 @@
 @import "home";
 @import "station";
 @import "overlays";
+@import "overlaySearchYouTube";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");

frontend/app/styles/overlaySearchYouTube.scss

@@ -0,0 +1,60 @@
+@import "colors";
+@import "breakpoints";
+
+.overlay {
+	.content {
+		.search-youtube-results {
+			ul {
+				list-style: none;
+
+				li {
+					width: 100%;
+					background-color: $musare_color_white;
+					border-top: solid rgba(148, 151, 153, 0.5) .5px;
+					border-bottom: solid rgba(148, 151, 153, 0.5) .5px;
+					border-left: solid rgba(148, 151, 153, 0.5) .5px;
+					border-right: solid rgba(148, 151, 153, 0.5) .5px;
+					margin-bottom: 8px;
+					min-height: 56px;
+
+					img {
+						display: inline-block;
+						width: 74px;
+						float: left;
+						margin-left: .5px;
+					}
+
+					a {
+						font-size: 12px;
+						display: inline-block;
+						width: 177px;
+						margin-left: 5px;
+						margin-top: 5px;
+					}
+
+					div {
+						float: right;
+						width: 30px;
+						color: $musare_color_secondary_gray;
+						margin: 5px 5px 0 0;
+
+						.duration {
+							font-size: 13px;
+							float: left;
+						}
+
+						.add {
+							float: left;
+							cursor: pointer;
+							height: 30px;
+
+							i {
+								font-size: 30px;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

frontend/app/styles/overlays.scss

@@ -72,6 +72,10 @@
 					cursor: pointer;
 				}
 			}
+
+			h2 {
+				font-size: 16px;
+			}
 		}
 	}
 }