refactor: scss color variables

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

@@ -359,7 +359,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.type,
+										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

@@ -218,7 +218,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;
 }
@@ -240,7 +240,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;
 }
@@ -262,19 +262,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;
@@ -341,7 +341,7 @@ h5 {
 }
 
 .save-changes {
-	color: #fff;
+	color: $white;
 }
 
 .tag:not(:last-child) {

frontend/components/Modals/EditSong.vue

@@ -719,7 +719,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;
 }
@@ -741,7 +741,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;
 }
@@ -763,19 +763,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;
@@ -842,7 +842,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

@@ -117,15 +117,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 {
@@ -133,6 +133,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

@@ -148,12 +148,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;
@@ -168,7 +168,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

@@ -143,7 +143,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);
 }
@@ -176,7 +176,7 @@ export default {
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
-	color: white;
+	color: $white;
 	font-weight: 600;
 }
 
@@ -186,7 +186,7 @@ export default {
 	height: 40px;
 	border-radius: 0;
 	background: rgba(3, 169, 244, 1);
-	color: #fff !important;
+	color: $white !important;
 	border: 0;
 
 	&:active,
@@ -196,7 +196,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

@@ -31,7 +31,7 @@
 	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);
 }
@@ -55,7 +55,7 @@
 	background-color: rgb(3, 169, 244);
 	text-align: center;
 	padding: 10px;
-	color: white;
+	color: $white;
 	font-weight: 600;
 }
 

frontend/components/Station/CommunityHeader.vue

@@ -260,7 +260,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);
 
@@ -271,11 +271,11 @@ export default {
 }
 
 a.nav-item {
-	color: #ffffff;
+	color: $white;
 	font-size: 17px;
 
 	&:hover {
-		color: #ffffff;
+		color: $white;
 	}
 
 	padding: 0 12px;
@@ -292,11 +292,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 {
@@ -316,7 +316,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;
@@ -404,7 +404,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;
@@ -431,7 +431,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

@@ -273,7 +273,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);
 
@@ -284,11 +284,11 @@ export default {
 }
 
 a.nav-item {
-	color: #ffffff;
+	color: $white;
 	font-size: 17px;
 
 	&:hover {
-		color: #ffffff;
+		color: $white;
 	}
 
 	padding: 0 12px;
@@ -305,11 +305,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 {
@@ -329,7 +329,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;
@@ -421,7 +421,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;
@@ -448,7 +448,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

@@ -1249,7 +1249,7 @@ export default {
 	justify-content: center;
 
 	p {
-		color: white;
+		color: $white;
 		font-size: 26px;
 		text-align: center;
 	}
@@ -1289,7 +1289,7 @@ export default {
 }
 
 .stationDisplayName {
-	color: white !important;
+	color: $white !important;
 }
 
 .add-to-playlist {
@@ -1304,7 +1304,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 {
@@ -1313,7 +1313,7 @@ export default {
 		margin: 0;
 		padding-top: 5px;
 		padding-bottom: 7px;
-		color: white;
+		color: $white;
 	}
 
 	.slideout-content {
@@ -1374,7 +1374,7 @@ export default {
 			background-color: rgb(3, 169, 244);
 			text-align: center;
 			padding: 10px;
-			color: white;
+			color: $white;
 			font-weight: 600;
 		}
 
@@ -1403,7 +1403,7 @@ export default {
 			height: 40px;
 			border-radius: 0;
 			background: rgb(3, 169, 244);
-			color: #fff !important;
+			color: $white !important;
 			border: 0;
 			&:active,
 			&:focus {
@@ -1412,7 +1412,7 @@ export default {
 		}
 
 		.add-to-queue:focus {
-			background: #029ce3;
+			background: $primary-color;
 		}
 
 		.media-right {
@@ -1447,7 +1447,7 @@ export default {
 		height: 5.2px;
 		cursor: pointer;
 		box-shadow: 0;
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border-radius: 0;
 		border: 0;
 	}
@@ -1469,7 +1469,7 @@ export default {
 		height: 5.2px;
 		cursor: pointer;
 		box-shadow: 0;
-		background: #c2c0c2;
+		background: $light-grey-2;
 		border-radius: 0;
 		border: 0;
 	}
@@ -1491,19 +1491,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;
@@ -1567,12 +1567,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 {
@@ -1673,7 +1673,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

@@ -357,6 +357,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

@@ -48,7 +48,6 @@
 							</div>
 						</div>
 						<router-link
-							href="#"
 							class="absolute-a"
 							:to="{
 								name: 'official',
@@ -131,7 +130,6 @@
 							</div>
 						</div>
 						<router-link
-							href="#"
 							class="absolute-a"
 							:to="{
 								name: 'community',
@@ -292,7 +290,7 @@ export default {
 html {
 	width: 100%;
 	height: 100%;
-	color: rgba(0, 0, 0, 0.87);
+	color: $dark-grey-2;
 
 	body {
 		width: 100%;
@@ -347,7 +345,7 @@ html {
 		.badge {
 			position: relative;
 			padding-right: 2px;
-			color: #38d227;
+			color: $green;
 			top: +5px;
 		}
 	}
@@ -387,6 +385,7 @@ html {
 	margin: 10px;
 	cursor: pointer;
 	height: 475px;
+	background: $white;
 
 	transition: all ease-in-out 0.2s;
 
@@ -423,7 +422,7 @@ html {
 	cursor: pointer;
 	transition: 0.25s ease color;
 	font-size: 30px;
-	color: #4a4a4a;
+	color: $dark-grey;
 }
 
 .community-button:hover {

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/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;
+}