Added styles to search queuelist overlay. Not done yet.

frontend/app/js/reducers/songPlayer.js

@@ -16,6 +16,7 @@ const initialState = Map({
 	duration: 0,
 	skipDuration: 0,
 	songId: "",
+	thumbnail: "",
 	dislikes: 0,
 	disliked: false,
 	likes: 0,
@@ -31,12 +32,14 @@ const actionsMap = {
 		let exists = !!action.song;
 		obj.simple = (exists) ? (action.song.likes === -1 && action.song.dislikes === -1) : true;
 		obj.exists = exists;
+		console.log(action.song);
 		if (exists) {
 			obj.title = action.song.title;
 			obj.artists = action.song.artists;
 			obj.duration = action.song.duration;
 			obj.skipDuration = action.song.skipDuration;
 			obj.songId = action.song.songId;
+			obj.thumbnail = action.song.thumbnail;
 			obj.dislikes = action.song.dislikes;
 			obj.disliked = false;
 			obj.likes = action.song.likes;

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

@@ -22,6 +22,7 @@ import io from "io";
 	songTitle: state.songPlayer.get("title"),
 	songArtists: state.songPlayer.get("artists"),
 	songDuration: state.songPlayer.get("duration"),
+	songThumbnail: state.songPlayer.get("thumbnail"),
 	simpleSong: state.songPlayer.get("simple"),
 	songExists: state.songPlayer.get("exists"),
 	playlistSelectedId: state.playlistQueue.get("playlistSelected"),
@@ -159,63 +160,80 @@ export default class Settings extends Component {
 
 		return (
 			<div className="overlay">
-				<button onClick={ this.close }>Back</button>
-				<h1>Queue</h1>
-				<CustomErrors onRef={ ref => (this.messages = ref) } />
-
-				{
-					(this.state.queue)
-					? (
-						<ul>
-							{
-								(this.props.songExists)
-								? (
-									<li>
-										<p>{ this.props.songTitle }</p>
-										<p>{ this.props.songDuration }</p>
-										<hr/>
-									</li>
-								) : null
-							}
-							{
-								this.state.queue.map((song) => {
-									return (
-										<li key={ song.songId }>
-											<p>{ song.title }</p>
-											<p>{ song.duration }</p>
-											<a href={ `/u/${ this.state.userIdMap[`Z${ song.requestedBy }`] }` }>{ this.state.userIdMap[`Z${ song.requestedBy }`] }</a>
-											<p onClick={ () => { this.deleteSong(song.songId) } }>Delete</p>
-											<hr/>
+				<button onClick={ this.close } className="back"><i className="material-icons">arrow_back</i></button>
+				<div className="content">
+					<h1>Queue</h1>
+					<CustomErrors onRef={ ref => (this.messages = ref) } />
+
+					{
+						(this.state.queue)
+						? (
+							<ul>
+								{
+									(this.props.songExists)
+									? (
+										<li>
+											<div className="left">
+												<img src={ this.props.songThumbnail } onError={function(e) {e.target.src="/assets/images/notes.png"}}/>
+											</div>
+											<div className="right">
+												<span className="duration">{ this.props.songDuration }</span>
+												<p className="title">{ this.props.songTitle }</p>
+												<span className="title-artists-spacing"/>
+												<p className="artists">{ this.props.songTitle }</p>
+											</div>
 										</li>
-									);
-								})
-							}
-						</ul>
-					)
-					: null
-				}
+									) : null
+								}
+								{
+									this.state.queue.map((song) => {
+										return (
+											<li key={ song.songId }>
+												<div className="left">
+													<img src={ song.thumbnail }/>
+												</div>
+												<div className="right">
+													<span className="duration">{ song.duration }</span>
+													<p className="title">{ song.title }</p>
+													<span className="title-artists-spacing"/>
+													<p className="artists">{ song.title }</p>
+													<span>
+														<span>Requested by: </span>
+														<a href={ `/u/${ this.state.userIdMap[`Z${ song.requestedBy }`] }` }>{ this.state.userIdMap[`Z${ song.requestedBy }`] }</a>
+													</span>
+													<i onClick={ () => { this.deleteSong(song.songId) } }>Delete</i>
+												</div>
+											</li>
+										);
+									})
+								}
+							</ul>
+						)
+						: null
+					}
 
-				<button onClick={ this.addSongToQueue }>Add song to queue</button>
+					<button onClick={ this.addSongToQueue }>Add song to queue</button>
 
-				<hr/>
+					<hr/>
+
+					<ul>
+						{
+							this.state.playlists.map((playlist) => {
+								return (
+									<li key={ playlist._id }>
+										{ playlist.displayName } - { this.getPlaylistAction(playlist._id) }
+									</li>
+								)
+							})
+						}
+					</ul>
 
-				<ul>
 					{
-						this.state.playlists.map((playlist) => {
-							return (
-								<li key={ playlist._id }>
-									{ playlist.displayName } - { this.getPlaylistAction(playlist._id) }
-								</li>
-							)
-						})
+						(this.props.playlistSelectedId)
+							? <button onClick={ this.deselectAll }>Deselect all playlists</button>
+						: null
 					}
-				</ul>
-
-				{
-					(this.props.playlistSelectedId)
-						? <button onClick={ this.deselectAll }>Deselect all playlists</button>
-					: null
-				}
+				</div>
 			</div>
 		);
 	}

frontend/app/styles/main.scss

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

frontend/app/styles/overlayQueueList.scss

@@ -0,0 +1,96 @@
+@import "colors";
+@import "breakpoints";
+
+.overlay {
+	.content {
+		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-right: solid rgba(148, 151, 153, 0.5) .5px;
+				margin-bottom: 8px;
+				min-height: 79.5px;
+				position: relative;
+
+				.left {
+					margin-top: -.5px;
+					width: 80px;
+					top: 0;
+					left: 0;
+					bottom: 0;
+					position: absolute;
+					float: left;
+					background-color: rgba(148, 151, 153, 0.5);
+
+					img {
+						display: block;
+						width: 100%;
+						height: 80px;
+					}
+				}
+
+				.right {
+					display: block;
+					margin-left: 80px;
+					height: 100%;
+					padding: 4px;
+					box-sizing: border-box;
+					min-height: 79.5px;
+
+					.duration {
+						float: right;
+						color: $musare_color_primary_gray;
+						font-size: 14px;
+						line-height: 19px;
+					}
+
+					.title {
+						font-size: 14px;
+						color: $musare_color_primary_gray;
+						font-weight: $font_weight_semibold;
+						line-height: 19px;
+						display: inline;
+					}
+
+					.title-artists-spacing {
+						display: block;
+					}
+
+					.artists {
+						font-size: 13px;
+						color: $musare_color_primary_gray;
+						line-height: 17px;
+						display: inline;
+						margin-top: 4px;
+					}
+				}
+
+				/*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/overlaySearchYouTube.scss

@@ -12,16 +12,16 @@
 					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;
+					min-height: 55.5px;
+					box-sizing: border-box;
 
 					img {
 						display: inline-block;
 						width: 74px;
 						float: left;
-						margin-left: .5px;
+						margin-top: -.5px;
 					}
 
 					a {