Minor changes to style. Added Musare blue to key elements to accent the page better.

backend/logic/coreHandler.js

@@ -22,7 +22,9 @@ var eventEmitter = new events.EventEmitter();
 const edmStation = new stations.Station("edm", {
 	"genres": ["edm"],
 	playlist: [
-		'gCYcHz2k5x0'
+		'gCYcHz2k5x0',
+		'LHCob76kigA',
+		'lEi_XBg2Fpk'
 	],
 	currentSongIndex: 0,
 	paused: false,
@@ -30,7 +32,19 @@ const edmStation = new stations.Station("edm", {
 	description: "EDM Music"
 });
 
+const chillStation = new stations.Station("chill", {
+	"genres": ["chill"],
+	playlist: [
+		'lEi_XBg2Fpk'
+	],
+	currentSongIndex: 0,
+	paused: false,
+	displayName: "Chill",
+	description: "Chill Music"
+});
+
 stations.addStation(edmStation);
+stations.addStation(chillStation);
 
 module.exports = {
 

frontend/components/MainHeader.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav class="nav">
+	<nav class="nav is-info">
 		<div class="nav-left">
 			<a class="nav-item is-brand" href="#" v-link="{ path: '/' }">
 				Musare
@@ -13,7 +13,7 @@
 		</span>-->
 
 		<div class="nav-right">
-			<a class="nav-item is-tab" href="#" v-link="{ path: '/admin' }">
+			<a class="nav-item is-tab admin" href="#" v-link="{ path: '/admin' }">
 				Admin
 			</a>
 			<a class="nav-item is-tab" href="#">
@@ -41,7 +41,7 @@
 	@import 'theme.scss';
 
 	.nav {
-		background-color: $primary-color;
+		background-color: $grey-darker;
 
 		.is-brand {
 			font-size: 26px !important;
@@ -49,12 +49,15 @@
 
 		.nav-item {
 			font-size: 15px;
-			color: $secondary-color;
+			color: $white;
 
 			&:hover {
-				color: $secondary-color;
+				color: $white;
 			}
 		}
+		.admin {
+			color: $blue;
+		}
 	}
 	.grouped {
 		margin: 0;

frontend/components/StationHeader.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav class="nav has-shadow">
+	<nav class="nav">
 		<div class="nav-left">
 			<a class="nav-item" href="#" v-link="{ path: '/' }" @click="this.$dispatch('leaveStation', title)">
 				<span class="icon">
@@ -70,18 +70,24 @@
 </script>
 
 <style lang="scss" scoped>
+	@import 'theme.scss';
 	.nav {
-		background-color: #0091ea;
+		background-color: $grey-darker;
 	}
 
 	a.nav-item {
-		color: #fff;
+		color: $white;
+
+		&:hover {
+			color: $white;
+		}
 	}
 
 	.nav-center {
 		display: flex;
     	align-items: center;
-		text-transform: capitalize;
-		color: #fff;
+		text-transform: uppercase;
+		color: $blue;
+		font-size: 22px;
 	}
 </style>

frontend/components/pages/Home.vue

@@ -212,7 +212,14 @@
 					text-align: left;
 					padding-left: 10px;
 
-					h3, p {
+					h3 {
+						color: $blue;
+						margin: 0;
+						white-space: normal;
+						padding-top: 10px;
+					}
+
+					p {
 						margin: 0;
 						white-space: normal;
 						padding-top: 10px;
@@ -223,6 +230,9 @@
 					display: flex;
 					flex-direction: column;
 					width: 25%;
+					i {
+						color: $blue;
+					}
 				}
 			}
 		}

frontend/theme.scss

@@ -1,4 +1,4 @@
-$primary-color: #424242;
-$secondary-color: #ffffff;
+// Change any Bulma default variables here
+$blue: #03A9F4;
 
 @import '~bulma';