Merge branch 'experimental' of https://github.com/Musare/MusareNode into experimental

README.md

@@ -1,4 +1,5 @@
 
+  
 # MusareNode
 
 Based off of the original [Musare](https://github.com/Musare/MusareMeteor), which utilized Meteor.
@@ -56,41 +57,42 @@ Once you've installed the required tools:
 
 3. `cp backend/config/template.json backend/config/default.json`
 
-   Values:
-   The `mode` should be either "development" or "production". No more explanation needed.  
-   The `secret` key can be whatever. It's used by express's session module.  
-   The `domain` should be the url where the site will be accessible from, usually `http://localhost` for non-Docker.  
-   The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.  
-   The `serverPort` should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.  
-   `isDocker` if you are using Docker or not.  
-   The `apis.youtube.key` value can be obtained by setting up a [YouTube API Key](https://developers.google.com/youtube/v3/getting-started). You need to use the YouTube Data API v3, and create an API key.  
-   The `apis.recaptcha.secret` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).  
-   The `apis.github` values can be obtained by setting up a [GitHub OAuth Application](https://github.com/settings/developers). You need to fill in some values to create the OAuth application. The homepage is the homepage of frontend. The authorization callback url is the backend url with `/auth/github/authorize/callback` added at the end. For example `http://localhost:8080/auth/github/authorize/callback`.  
-   The `apis.discord.token` is the token for the Discord bot.  
-   The `apis.discord.loggingServer` is the Discord logging server id.  
-   The `apis.discord.loggingChannel` is the Discord logging channel id.  
-   The `apis.mailgun` values can be obtained by setting up a [Mailgun account](http://www.mailgun.com/), or you can disable it.  
-   The `apis.spotify` values can be obtained by setting up a [Spotify client id](https://developer.spotify.com/dashboard/applications), or you can disable it.  
-   The `redis.url` url should be left alone for Docker, and changed to `redis://localhost:6379/0` for non-Docker.  
-   The `redis.password` should be the Redis password you either put in your `startRedis.cmd` file for Windows, or `.env` for docker.  
-   The `mongo.url` needs to have the proper password for the MongoDB musare user, and for non-Docker you need to replace `@musare:27017` with `@localhost:27017`.  
-   The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.  
-   The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.  
+|Property|Description|
+|--|--|
+|`mode`|Should be either `development` or `production`. No more explanation needed.|
+|`secret`|Whatever you want - used by express's session module.|
+|`domain`|Should be the url where the site will be accessible from,usually `http://localhost` for non-Docker.|
+|`serverDomain`|Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.|
+|`serverPort`|Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.|
+|`isDocker`|Self-explanatory. Are you using Docker?|
+|`serverPort`|Should be the port where the backend will listen on, should always be `8080` for Docker, and is recommended for non-Docker.|
+|`apis.youtube.key`|Can be obtained by setting up a [YouTube API Key](https://developers.google.com/youtube/v3/getting-started). You need to use the YouTube Data API v3, and create an API key.|
+|`apis.recaptcha.secret`|Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).|
+|`apis.github`|Can be obtained by setting up a [GitHub OAuth Application](https://github.com/settings/developers). You need to fill in some values to create the OAuth application. The homepage is the homepage of frontend. The authorization callback url is the backend url with `/auth/github/authorize/callback` added at the end. For example `http://localhost:8080/auth/github/authorize/callback`.|
+|`apis.discord.token`|Token for the Discord bot.|
+|`apis.discord.loggingServer`|Server ID of the Discord logging server.|
+|`apis.discord.loggingChannel`|ID of the channel to be used in the Discord logging server.|
+|`apis.mailgun`|Can be obtained by setting up a [Mailgun account](http://www.mailgun.com/), or you can disable it.|
+|`apis.spotify`|Can be obtained by setting up a [Spotify client id](https://developer.spotify.com/dashboard/applications), or you can disable it.|
+|`redis.url`|Should be left alone for Docker, and changed to `redis://localhost:6379/0` for non-Docker.|
+|`redis.password`|Should be the Redis password you either put in your `startRedis.cmd` file for Windows, or `.env` for docker.|
+|`mongo.url`|Needs to have the proper password for the MongoDB musare user, and for non-Docker you need to replace `@musare:27017` with `@localhost:27017`.|
+|`cookie.domain`|Should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.|
+|`cookie.secure`|Should be `true` for SSL connections, and `false` for normal http connections.|
 
 4. `cp frontend/build/config/template.json frontend/build/config/default.json`
 
-   Values:  
-   The `serverDomain` should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.
-   The `frontendDomain` should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker.
-   The `frontendPort` should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker.
-   The `recaptcha.key` value can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).
-   The `cookie.domain` value should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.
-   The `cookie.secure` value should be `true` for SSL connections, and `false` for normal http connections.
-   The `siteSettings.logo` should be the path to the logo image, by default it is `/assets/wordmark.png`.
-   The `siteSettings.siteName` should be the name of the site.
-   The `siteSettings.socialLinks.` `github`,`twitter`,`facebook` and `github` are set to the official Musare accounts by default but can be changed. 
-
-Now you have different paths here.
+|Property|Description|
+|--|--|
+|`serverDomain`|Should be the url where the backend will be accessible from, usually `http://localhost:8080` for non-Docker.|
+|`frontendDomain`|Should be the url where the frontend will be accessible from, usually `http://localhost` for docker or `http://localhost:80` for non-Docker.|
+|`frontendPort`|Should be the port where the frontend will be accessible from, should always be port `81` for Docker, and is recommended to be port `80` for non-Docker.|
+|`recaptcha.key`|Can be obtained by setting up a [ReCaptcha Site (v3)](https://www.google.com/recaptcha/admin).|
+|`cookie.domain`|Should be the ip or address you use to access the site, without protocols (http/https), so for example `localhost`.|
+|`cookie.secure`|Should be `true` for SSL connections, and `false` for normal http connections.|
+|`siteSettings.logo`|Path to the logo image, by default it is `/assets/wordmark.png`.|
+|`siteSettings.siteName`|Should be the name of the site.|
+|`siteSettings.socialLinks`|`github`, `twitter` and `facebook` are set to the official Musare accounts by default, but can be changed.|
 
 ### Installing with Docker
 

frontend/App.vue

@@ -115,10 +115,6 @@ export default {
 <style lang="scss">
 @import "styles/global.scss";
 
-.center {
-	text-align: center;
-}
-
 #toast-container {
 	z-index: 10000 !important;
 }
@@ -141,8 +137,8 @@ html {
 
 .alert {
 	padding: 20px;
-	color: white;
-	background-color: red;
+	color: $white;
+	background-color: $red;
 	position: fixed;
 	top: 50px;
 	right: 50px;
@@ -161,9 +157,9 @@ html {
 		text-align: center;
 		padding: 7.5px 6px;
 		border-radius: 2px;
-		background-color: #323232;
+		background-color: $dark-grey;
 		font-size: 0.9em;
-		color: #fff;
+		color: $white;
 		content: attr(data-tooltip);
 		opacity: 0;
 		transition: all 0.2s ease-in-out 0.1s;
@@ -243,8 +239,4 @@ button.delete:focus {
 .tag {
 	padding-right: 6px !important;
 }
-
-.button.is-success {
-	background-color: #00b16a !important;
-}
 </style>

frontend/components/Admin/EditStation.vue

@@ -490,6 +490,6 @@ h5 {
 }
 
 .select:after {
-	border-color: #029ce3;
+	border-color: $primary-color;
 }
 </style>

frontend/components/Admin/News.vue

@@ -345,7 +345,7 @@ td {
 }
 
 .is-info:focus {
-	background-color: #0398db;
+	background-color: $primary-color;
 }
 
 .card-footer-item {

frontend/components/Admin/QueueSongs.vue

@@ -232,6 +232,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: #029ce3 !important;
+	background-color: $primary-color !important;
 }
 </style>

frontend/components/Admin/Songs.vue

@@ -222,10 +222,10 @@ body {
 		font-size: 20px;
 	}
 	.thumbLike {
-		color: #87d37c !important;
+		color: $green !important;
 	}
 	.thumbDislike {
-		color: #ec644b !important;
+		color: $red !important;
 	}
 }
 
@@ -240,6 +240,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: #029ce3 !important;
+	background-color: $primary-color !important;
 }
 </style>

frontend/components/Admin/Stations.vue

@@ -19,7 +19,16 @@
 							<span>{{ station._id }}</span>
 						</td>
 						<td>
-							<span>{{ station.name }}</span>
+							<span>
+								<router-link
+									:to="{
+										name: 'station',
+										params: { id: station.name }
+									}"
+								>
+									{{ station.name }}
+								</router-link>
+							</span>
 						</td>
 						<td>
 							<span>{{ station.type }}</span>
@@ -31,7 +40,13 @@
 							<span>{{ station.description }}</span>
 						</td>
 						<td>
+							<span
+								v-if="station.type === 'official'"
+								title="Musare"
+								>Musare</span
+							>
 							<user-id-to-username
+								v-else
 								:userId="station.owner"
 								:link="true"
 							/>
@@ -345,7 +360,7 @@ td {
 }
 
 .is-info:focus {
-	background-color: #0398db;
+	background-color: $primary-color;
 }
 
 .genre-wrapper {
@@ -354,6 +369,6 @@ td {
 }
 
 .card-footer-item {
-	color: #029ce3;
+	color: $primary-color;
 }
 </style>

frontend/components/Admin/Statistics.vue

@@ -345,6 +345,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: #029ce3 !important;
+	background-color: $primary-color !important;
 }
 </style>

frontend/components/Admin/Users.vue

@@ -122,6 +122,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: #029ce3 !important;
+	background-color: $primary-color !important;
 }
 </style>

frontend/components/MainFooter.vue

@@ -104,7 +104,7 @@ export default {
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
 	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.65),
 		0 6px 20px 0 rgba(3, 169, 244, 0.4);
-	background-color: #ffffff;
+	background-color: $white;
 	width: 100%;
 
 	.musareFooterLogo {

frontend/components/MainHeader.vue

@@ -117,24 +117,25 @@ export default {
 
 	.nav-menu.is-active {
 		.nav-item {
-			color: #333;
+			color: $dark-grey-2;
 
 			&:hover {
-				color: #333;
+				color: $dark-grey-2;
 			}
 		}
 	}
 
 	a.nav-item.is-tab:hover {
 		border-bottom: none;
-		border-top: solid 1px #ffffff;
+		border-top: solid 1px $white;
+		padding-top: 9px;
 	}
 
 	.nav-toggle {
 		height: 64px;
 
 		&.is-active span {
-			background-color: #333;
+			background-color: $dark-grey-2;
 		}
 	}
 
@@ -142,7 +143,7 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
-		color: #ffffff;
+		color: $white;
 		font-family: Pacifico, cursive;
 		filter: brightness(0) invert(1);
 
@@ -153,10 +154,10 @@ export default {
 
 	.nav-item {
 		font-size: 17px;
-		color: #ffffff;
+		color: $white;
 
 		&:hover {
-			color: #ffffff;
+			color: $white;
 		}
 	}
 	.admin strong {

frontend/components/Modals/EditNews.vue

@@ -232,7 +232,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 0;
 	border: 0;
 }
@@ -254,7 +254,7 @@ input[type="range"]::-moz-range-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 0;
 	border: 0;
 }
@@ -276,19 +276,19 @@ input[type="range"]::-ms-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 1.3px;
 }
 
 input[type="range"]::-ms-fill-lower {
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
 }
 
 input[type="range"]::-ms-fill-upper {
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
@@ -355,7 +355,7 @@ h5 {
 }
 
 .save-changes {
-	color: #fff;
+	color: $white;
 }
 
 .tag:not(:last-child) {

frontend/components/Modals/EditSong.vue

@@ -720,7 +720,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 0;
 	border: 0;
 }
@@ -742,7 +742,7 @@ input[type="range"]::-moz-range-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 0;
 	border: 0;
 }
@@ -764,19 +764,19 @@ input[type="range"]::-ms-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border-radius: 1.3px;
 }
 
 input[type="range"]::-ms-fill-lower {
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
 }
 
 input[type="range"]::-ms-fill-upper {
-	background: #c2c0c2;
+	background: $light-grey-2;
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
@@ -843,7 +843,7 @@ h5 {
 }
 
 .save-changes {
-	color: #fff;
+	color: $white;
 }
 
 .tag:not(:last-child) {

frontend/components/Modals/EditStation.vue

@@ -340,6 +340,6 @@ h5 {
 }
 
 .select:after {
-	border-color: #029ce3;
+	border-color: $primary-color;
 }
 </style>

frontend/components/Modals/EditUser.vue

@@ -218,7 +218,7 @@ export default {
 @import "styles/global.scss";
 
 .save-changes {
-	color: #fff;
+	color: $white;
 }
 
 .tag:not(:last-child) {
@@ -226,6 +226,6 @@ export default {
 }
 
 .select:after {
-	border-color: #029ce3;
+	border-color: $primary-color;
 }
 </style>

frontend/components/Modals/Login.vue

@@ -123,15 +123,15 @@ export default {
 @import "styles/global.scss";
 
 .button.is-github {
-	background-color: #333;
-	color: #fff !important;
+	background-color: $dark-grey-2;
+	color: $white !important;
 }
 
 .is-github:focus {
-	background-color: #1a1a1a;
+	background-color: $dark-grey-3;
 }
 .is-primary:focus {
-	background-color: #029ce3 !important;
+	background-color: $primary-color !important;
 }
 
 .invert {
@@ -139,6 +139,6 @@ export default {
 }
 
 a {
-	color: #029ce3;
+	color: $primary-color;
 }
 </style>

frontend/components/Modals/Playlists/Create.vue

@@ -92,7 +92,7 @@ export default {
 }
 
 .menu-list a:hover {
-	color: #000 !important;
+	color: $black !important;
 }
 
 li a {

frontend/components/Modals/Playlists/Edit.vue

@@ -385,7 +385,7 @@ export default {
 }
 
 .menu-list a:hover {
-	color: #000 !important;
+	color: $black !important;
 }
 
 li a {

frontend/components/Modals/Register.vue

@@ -153,12 +153,12 @@ export default {
 @import "styles/global.scss";
 
 .button.is-github {
-	background-color: #333;
-	color: #fff !important;
+	background-color: $dark-grey-2;
+	color: $white !important;
 }
 
 .is-github:focus {
-	background-color: #1a1a1a;
+	background-color: $dark-grey-3;
 }
 .is-primary:focus {
 	background-color: #028bca !important;
@@ -173,7 +173,7 @@ export default {
 }
 
 a {
-	color: #029ce3;
+	color: $primary-color;
 }
 </style>
 

frontend/components/Modals/WhatIsNew.vue

@@ -159,7 +159,7 @@ export default {
 		padding: 12px;
 		text-transform: uppercase;
 		font-weight: bold;
-		color: #fff;
+		color: $white;
 	}
 
 	.sect-head-features {

frontend/components/Sidebars/Playlist.vue

@@ -145,7 +145,7 @@ export default {
 	right: 0;
 	width: 300px;
 	height: 100vh;
-	background-color: #fff;
+	background-color: $white;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
@@ -178,7 +178,7 @@ export default {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
-	color: white;
+	color: $white;
 	font-weight: 600;
 }
 
@@ -188,7 +188,7 @@ export default {
 	height: 40px;
 	border-radius: 0;
 	background: rgba(3, 169, 244, 1);
-	color: #fff !important;
+	color: $white !important;
 	border: 0;
 
 	&:active,
@@ -198,7 +198,7 @@ export default {
 }
 
 .create-playlist:focus {
-	background: #029ce3;
+	background: $primary-color;
 }
 
 .none-found {

frontend/components/Sidebars/SongsList.vue

@@ -191,7 +191,7 @@ export default {
 	right: 0;
 	width: 300px;
 	height: 100vh;
-	background-color: #fff;
+	background-color: $white;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
@@ -217,7 +217,7 @@ export default {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
-	color: white;
+	color: $white;
 	font-weight: 600;
 }
 
@@ -245,7 +245,7 @@ export default {
 	height: 40px;
 	border-radius: 0;
 	background: rgb(3, 169, 244);
-	color: #fff !important;
+	color: $white !important;
 	border: 0;
 	&:active,
 	&:focus {
@@ -265,7 +265,7 @@ export default {
 }
 
 .add-to-queue:focus {
-	background: #029ce3;
+	background: $primary-color;
 }
 
 .media-right {

frontend/components/Sidebars/UsersList.vue

@@ -42,7 +42,7 @@ export default {
 	right: 0;
 	width: 300px;
 	height: 100vh;
-	background-color: #fff;
+	background-color: $white;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
@@ -66,7 +66,7 @@ export default {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
-	color: white;
+	color: $white;
 	font-weight: 600;
 }
 

frontend/components/Station/CommunityHeader.vue

@@ -263,7 +263,7 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
-		color: #ffffff;
+		color: $white;
 		font-family: Pacifico, cursive;
 		filter: brightness(0) invert(1);
 
@@ -274,11 +274,11 @@ export default {
 }
 
 a.nav-item {
-	color: #ffffff;
+	color: $white;
 	font-size: 17px;
 
 	&:hover {
-		color: #ffffff;
+		color: $white;
 	}
 
 	padding: 0 12px;
@@ -295,11 +295,11 @@ a.nav-item {
 
 a.nav-item.is-tab:hover {
 	border-bottom: none;
-	border-top: solid 1px #ffffff;
+	border-top: solid 1px $white;
 }
 
 .admin strong {
-	color: #9d42b1;
+	color: $purple;
 }
 
 .grouped {
@@ -319,7 +319,7 @@ a.nav-item.is-tab:hover {
 
 @media screen and (max-width: 998px) {
 	.nav-menu {
-		background-color: white;
+		background-color: $white;
 		box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
 		left: 0;
 		display: none;
@@ -407,7 +407,7 @@ a.nav-item.is-tab:hover {
 .control-sidebar .sidebar-item {
 	font-size: 2rem;
 	height: 50px;
-	color: white;
+	color: $white;
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
@@ -434,7 +434,7 @@ a.nav-item.is-tab:hover {
 	width: 160px;
 	font-size: 12px;
 	background-color: rgba(3, 169, 244, 0.8);
-	color: #fff;
+	color: $white;
 	text-align: center;
 	border-radius: 6px;
 	padding: 5px;

frontend/components/Station/OfficialHeader.vue

@@ -275,7 +275,7 @@ export default {
 		font-size: 2.1rem !important;
 		line-height: 64px !important;
 		padding: 0 20px;
-		color: #ffffff;
+		color: $white;
 		font-family: Pacifico, cursive;
 		filter: brightness(0) invert(1);
 
@@ -286,11 +286,11 @@ export default {
 }
 
 a.nav-item {
-	color: #ffffff;
+	color: $white;
 	font-size: 17px;
 
 	&:hover {
-		color: #ffffff;
+		color: $white;
 	}
 
 	padding: 0 12px;
@@ -307,11 +307,11 @@ a.nav-item {
 
 a.nav-item.is-tab:hover {
 	border-bottom: none;
-	border-top: solid 1px #ffffff;
+	border-top: solid 1px $white;
 }
 
 .admin strong {
-	color: #9d42b1;
+	color: $purple;
 }
 
 .grouped {
@@ -331,7 +331,7 @@ a.nav-item.is-tab:hover {
 
 @media screen and (max-width: 998px) {
 	.nav-menu {
-		background-color: white;
+		background-color: $white;
 		box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
 		left: 0;
 		display: none;
@@ -423,7 +423,7 @@ a.nav-item.is-tab:hover {
 .control-sidebar .sidebar-item {
 	font-size: 2rem;
 	height: 50px;
-	color: white;
+	color: $white;
 	-webkit-box-align: center;
 	-ms-flex-align: center;
 	align-items: center;
@@ -450,7 +450,7 @@ a.nav-item.is-tab:hover {
 	width: 160px;
 	font-size: 12px;
 	background-color: rgba(3, 169, 244, 0.8);
-	color: #fff;
+	color: $white;
 	text-align: center;
 	border-radius: 6px;
 	padding: 5px;

frontend/components/Station/Station.vue

@@ -1246,7 +1246,7 @@ export default {
 	justify-content: center;
 
 	p {
-		color: white;
+		color: $white;
 		font-size: 26px;
 		text-align: center;
 	}
@@ -1286,7 +1286,7 @@ export default {
 }
 
 .stationDisplayName {
-	color: white !important;
+	color: $white !important;
 }
 
 .add-to-playlist {
@@ -1301,7 +1301,7 @@ export default {
 	position: fixed;
 	right: 0;
 	width: 350px;
-	background-color: white;
+	background-color: $white;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 	.slideout-header {
@@ -1310,7 +1310,7 @@ export default {
 		margin: 0;
 		padding-top: 5px;
 		padding-bottom: 7px;
-		color: white;
+		color: $white;
 	}
 
 	.slideout-content {
@@ -1371,7 +1371,7 @@ export default {
 			background-color: rgb(3, 169, 244);
 			text-align: center;
 			padding: 10px;
-			color: white;
+			color: $white;
 			font-weight: 600;
 		}
 
@@ -1400,7 +1400,7 @@ export default {
 			height: 40px;
 			border-radius: 0;
 			background: rgb(3, 169, 244);
-			color: #fff !important;
+			color: $white !important;
 			border: 0;
 			&:active,
 			&:focus {
@@ -1409,7 +1409,7 @@ export default {
 		}
 
 		.add-to-queue:focus {
-			background: #029ce3;
+			background: $primary-color;
 		}
 
 		.media-right {
@@ -1444,7 +1444,7 @@ export default {
 		height: 5.2px;
 		cursor: pointer;
 		box-shadow: 0;
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border-radius: 0;
 		border: 0;
 	}
@@ -1466,7 +1466,7 @@ export default {
 		height: 5.2px;
 		cursor: pointer;
 		box-shadow: 0;
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border-radius: 0;
 		border: 0;
 	}
@@ -1488,19 +1488,19 @@ export default {
 		height: 5.2px;
 		cursor: pointer;
 		box-shadow: 0;
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border-radius: 1.3px;
 	}
 
 	input[type="range"]::-ms-fill-lower {
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border: 0;
 		border-radius: 0;
 		box-shadow: 0;
 	}
 
 	input[type="range"]::-ms-fill-upper {
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border: 0;
 		border-radius: 0;
 		box-shadow: 0;
@@ -1564,12 +1564,12 @@ export default {
 
 #thumbs_up:hover,
 #thumbs_up.liked {
-	color: #87d37c !important;
+	color: $green !important;
 }
 
 #thumbs_down:hover,
 #thumbs_down.disliked {
-	color: #ec644b !important;
+	color: $red !important;
 }
 
 #song-thumbnail {
@@ -1670,7 +1670,7 @@ h6 {
 }
 
 .white {
-	background-color: #ffffff !important;
+	background-color: $white !important;
 }
 
 .btn-search {

frontend/components/User/ResetPassword.vue

@@ -147,6 +147,6 @@ export default {
 
 .skip-step {
 	background-color: #7e7e7e;
-	color: #fff;
+	color: $white;
 }
 </style>

frontend/components/User/Settings.vue

@@ -361,6 +361,6 @@ export default {
 }
 
 a {
-	color: #029ce3 !important;
+	color: $primary-color !important;
 }
 </style>

frontend/components/pages/Admin.vue

@@ -171,38 +171,38 @@ export default {
 @import "styles/global.scss";
 
 .tabs {
-	background-color: #ffffff;
+	background-color: $white;
 	.queueSongs {
-		color: #00d1b2;
-		border-color: #00d1b2;
+		color: $teal;
+		border-color: $teal;
 	}
 	.songs {
 		color: $primary-color;
 		border-color: $primary-color;
 	}
 	.stations {
-		color: #90298c;
-		border-color: #90298c;
+		color: $purple;
+		border-color: $purple;
 	}
 	.reports {
-		color: #f7c218;
-		border-color: #f7c218;
+		color: $yellow;
+		border-color: $yellow;
 	}
 	.news {
-		color: #e49ba6;
-		border-color: #e49ba6;
+		color: $light-pink;
+		border-color: $light-pink;
 	}
 	.users {
-		color: #ea4962;
-		border-color: #ea4962;
+		color: $dark-pink;
+		border-color: $dark-pink;
 	}
 	.statistics {
-		color: #ff5e00;
-		border-color: #ff5e00;
+		color: $light-orange;
+		border-color: $light-orange;
 	}
 	.punishments {
-		color: #fc3200;
-		border-color: #fc3200;
+		color: $dark-orange;
+		border-color: $dark-orange;
 	}
 	.tab {
 		transition: all 0.2s ease-in-out;

frontend/components/pages/Home.vue

@@ -5,61 +5,7 @@
 			<div class="content-wrapper">
 				<div class="group">
 					<div class="group-title">
-						Official Stations
-					</div>
-					<router-link
-						v-for="(station, index) in stations.official"
-						:key="index"
-						class="card station-card"
-						:to="{ name: 'official', params: { id: station.name } }"
-						:class="{ isPrivate: station.privacy === 'private' }"
-					>
-						<div class="card-image">
-							<figure class="image is-square">
-								<img
-									:src="station.currentSong.thumbnail"
-									onerror="this.src='/assets/notes-transparent.png'"
-								/>
-							</figure>
-						</div>
-						<div class="card-content">
-							<div class="media">
-								<div class="media-left displayName">
-									<h5>{{ station.displayName }}</h5>
-								</div>
-							</div>
-
-							<div class="content">
-								{{ station.description }}
-							</div>
-
-							<div class="under-content">
-								<span class="official"
-									><i class="badge material-icons"
-										>verified_user</i
-									>Official</span
-								>
-								<i
-									v-if="station.privacy !== 'public'"
-									class="material-icons right-icon"
-									title="This station is not visible to other users."
-									>lock</i
-								>
-							</div>
-						</div>
-						<router-link
-							href="#"
-							class="absolute-a"
-							:to="{
-								name: 'official',
-								params: { id: station.name }
-							}"
-						/>
-					</router-link>
-				</div>
-				<div class="group">
-					<div class="group-title">
-						Community Stations&nbsp;
+						Stations&nbsp;
 						<a
 							v-if="loggedIn"
 							href="#"
@@ -76,10 +22,10 @@
 						</a>
 					</div>
 					<router-link
-						v-for="(station, index) in stations.community"
+						v-for="(station, index) in filteredStations"
 						:key="index"
 						:to="{
-							name: 'community',
+							name: 'station',
 							params: { id: station.name }
 						}"
 						class="card station-card"
@@ -99,7 +45,14 @@
 						<div class="card-content">
 							<div class="media">
 								<div class="media-left displayName">
-									<h5>{{ station.displayName }}</h5>
+									<h5>
+										{{ station.displayName }}
+										<i
+											v-if="station.type === 'official'"
+											class="badge material-icons"
+											>verified_user</i
+										>
+									</h5>
 								</div>
 							</div>
 
@@ -110,7 +63,13 @@
 								<span class="hostedby"
 									>Hosted by
 									<span class="host">
+										<span
+											v-if="station.type === 'official'"
+											title="Musare"
+											>Musare</span
+										>
 										<user-id-to-username
+											v-else
 											:userId="station.owner"
 											:link="true"
 										/>
@@ -123,7 +82,10 @@
 									>lock</i
 								>
 								<i
-									v-if="isOwner(station)"
+									v-if="
+										station.type === 'community' &&
+											isOwner(station)
+									"
 									class="material-icons right-icon"
 									title="This is your station."
 									>home</i
@@ -131,10 +93,9 @@
 							</div>
 						</div>
 						<router-link
-							href="#"
 							class="absolute-a"
 							:to="{
-								name: 'community',
+								name: 'station',
 								params: { id: station.name }
 							}"
 						/>
@@ -163,17 +124,25 @@ export default {
 			recaptcha: {
 				key: ""
 			},
-			stations: {
-				official: [],
-				community: []
-			}
+			stations: [],
+			searchQuery: ""
 		};
 	},
-	computed: mapState({
-		modals: state => state.modals.modals.home,
-		loggedIn: state => state.user.auth.loggedIn,
-		userId: state => state.user.auth.userId
-	}),
+	computed: {
+		filteredStations() {
+			return this.stations.filter(
+				station =>
+					JSON.stringify(Object.values(station)).indexOf(
+						this.searchQuery
+					) !== -1
+			);
+		},
+		...mapState({
+			modals: state => state.modals.modals.home,
+			loggedIn: state => state.user.auth.loggedIn,
+			userId: state => state.user.auth.userId
+		})
+	},
 	mounted() {
 		io.getSocket(socket => {
 			this.socket = socket;
@@ -191,19 +160,12 @@ export default {
 				if (station.currentSong && !station.currentSong.thumbnail)
 					station.currentSong.thumbnail =
 						"/assets/notes-transparent.png";
-				this.stations[station.type].push(station);
+				this.stations.push(station);
 			});
 			this.socket.on(
 				"event:userCount.updated",
 				(stationId, userCount) => {
-					this.stations.official.forEach(s => {
-						const station = s;
-						if (station._id === stationId) {
-							station.userCount = userCount;
-						}
-					});
-
-					this.stations.community.forEach(s => {
+					this.stations.forEach(s => {
 						const station = s;
 						if (station._id === stationId) {
 							station.userCount = userCount;
@@ -213,20 +175,7 @@ export default {
 			);
 			this.socket.on("event:station.nextSong", (stationId, song) => {
 				let newSong = song;
-				this.stations.official.forEach(s => {
-					const station = s;
-					if (station._id === stationId) {
-						if (!newSong)
-							newSong = {
-								thumbnail: "/assets/notes-transparent.png"
-							};
-						if (newSong && !newSong.thumbnail)
-							newSong.thumbnail = "/assets/notes-transparent.png";
-						station.currentSong = newSong;
-					}
-				});
-
-				this.stations.community.forEach(s => {
+				this.stations.forEach(s => {
 					const station = s;
 					if (station._id === stationId) {
 						if (!newSong)
@@ -244,8 +193,7 @@ export default {
 	methods: {
 		init() {
 			this.socket.emit("stations.index", data => {
-				this.stations.community = [];
-				this.stations.official = [];
+				this.stations = [];
 				if (data.status === "success")
 					data.stations.forEach(s => {
 						const station = s;
@@ -259,9 +207,7 @@ export default {
 						)
 							station.currentSong.thumbnail =
 								"/assets/notes-transparent.png";
-						if (station.type === "official")
-							this.stations.official.push(station);
-						else this.stations.community.push(station);
+						this.stations.push(station);
 					});
 			});
 			this.socket.emit("apis.joinRoom", "home", () => {});
@@ -292,7 +238,7 @@ export default {
 html {
 	width: 100%;
 	height: 100%;
-	color: rgba(0, 0, 0, 0.87);
+	color: $dark-grey-2;
 
 	body {
 		width: 100%;
@@ -343,13 +289,6 @@ html {
 		color: $primary-color;
 		position: relative;
 		top: -5px;
-
-		.badge {
-			position: relative;
-			padding-right: 2px;
-			color: #38d227;
-			top: +5px;
-		}
 	}
 
 	.hostedby {
@@ -387,6 +326,7 @@ html {
 	margin: 10px;
 	cursor: pointer;
 	height: 475px;
+	background: $white;
 
 	transition: all ease-in-out 0.2s;
 
@@ -423,7 +363,7 @@ html {
 	cursor: pointer;
 	transition: 0.25s ease color;
 	font-size: 30px;
-	color: #4a4a4a;
+	color: $dark-grey;
 }
 
 .community-button:hover {
@@ -495,5 +435,12 @@ html {
 	-webkit-line-clamp: 1;
 	line-height: 30px;
 	max-height: 30px;
+
+	.badge {
+		position: relative;
+		padding-right: 2px;
+		color: $green;
+		top: +5px;
+	}
 }
 </style>

frontend/components/pages/News.vue

@@ -134,7 +134,7 @@ export default {
 		padding: 12px;
 		text-transform: uppercase;
 		font-weight: bold;
-		color: #fff;
+		color: $white;
 	}
 
 	.sect-head-features {

frontend/components/pages/Team.vue

@@ -247,7 +247,7 @@ ul {
 }
 
 .custom-tag.purple {
-	border-bottom: 2px #90298c solid;
+	border-bottom: 2px $purple solid;
 }
 
 .thanks {

frontend/main.js

@@ -82,21 +82,9 @@ const router = new VueRouter({
 			}
 		},
 		{
-			name: "official",
-			path: "/official/:id",
-			alias: "/:id",
-			component: () => import("./components/Station/Station.vue"),
-			meta: {
-				officialStation: true
-			}
-		},
-		{
-			name: "community",
-			path: "/community/:id",
-			component: () => import("./components/Station/Station.vue"),
-			meta: {
-				communityStation: true
-			}
+			name: "station",
+			path: "/:id",
+			component: () => import("./components/Station/Station.vue")
 		}
 	]
 });
@@ -150,29 +138,15 @@ router.beforeEach((to, from, next) => {
 		}
 	} else next();
 
-	if (from.name === "community" || from.name === "official") {
+	if (from.name === "station") {
 		document.title = "Musare";
 	}
 
-	if (to.meta.officialStation) {
-		io.getSocket(socket => {
-			socket.emit("stations.findByName", to.params.id, res => {
-				if (res.status === "success") {
-					if (res.data.type === "community")
-						next({ path: `/community/${to.params.id}` });
-					else next();
-				}
-			});
-		});
-	}
-
-	if (to.meta.communityStation) {
+	if (to.name === "station") {
 		io.getSocket(socket => {
 			socket.emit("stations.findByName", to.params.id, res => {
 				if (res.status === "success") {
-					if (res.data.type === "official")
-						next({ path: `/official/${to.params.id}` });
-					else next();
+					next();
 				}
 			});
 		});

frontend/styles/colors.scss

@@ -0,0 +1,20 @@
+$musareBlue: hsl(199, 98%, 48%);
+$teal: hsl(171, 100%, 41%);
+$purple: hsl(302, 56%, 36%);
+$yellow: hsl(46, 93%, 53%);
+$light-pink: hsl(351, 57%, 75%);
+$dark-pink: hsl(351, 79%, 60%);
+$light-orange: hsl(22, 100%, 50%);
+$dark-orange: hsl(12, 100%, 49%);
+$green: hsl(114, 69%, 49%);
+$blue: hsl(214, 82%, 48%);
+$red: hsl(0, 86%, 49%);
+$white: hsl(0, 0%, 100%);
+$black: hsl(0, 0%, 0%);
+$light-grey: hsl(0, 0%, 96%);
+$light-grey-2: hsl(300, 2%, 76%);
+$dark-grey: hsl(0, 0%, 30%);
+$dark-grey-2: hsl(0, 0%, 20%);
+$dark-grey-3: hsl(0, 0%, 10%);
+
+$primary-color: $musareBlue;

frontend/styles/global.scss

@@ -1,4 +1,47 @@
-$primary-color: #03a9f4;
+@import 'colors.scss';
 
+body {
+	background-color: $light-grey;
+	color: $dark-grey;
+	font-family: 'Roboto',Helvetica,Arial,sans-serif;
+}
 
+a {
+	color: $primary-color;
+	text-decoration: none;
+}
 
+.button {
+	&.is-success {
+		background-color: $green !important;
+
+		&:hover, &:focus {
+			background-color: darken($green, 5%) !important;
+		}
+	}
+	&.is-primary {
+		background-color: $primary-color !important;
+		
+		&:hover, &:focus {
+			background-color: darken($primary-color, 5%) !important;
+		}
+	}
+	&.is-danger {
+		background-color: $red !important;
+		
+		&:hover, &:focus {
+			background-color: darken($red, 5%) !important;
+		}
+	}
+	&.is-info {
+		background-color: $blue !important;
+
+		&:hover, &:focus {
+			background-color: darken($blue, 5%) !important;
+		}
+	}
+}
+
+.center {
+	text-align: center;
+}