fix(css): removed unnecessary inline styles

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/components/modals/EditStation.vue

@@ -173,7 +173,6 @@
 						>
 							<button
 								:class="privacyButtons[station.privacy].style"
-								style="text-transform: capitalize"
 								@click="updatePrivacyLocal(station.privacy)"
 							>
 								<i class="material-icons">{{
@@ -344,7 +343,6 @@
 							class="button-wrapper"
 						>
 							<button
-								style="text-transform: capitalize"
 								:class="station.theme"
 								@click="updateThemeLocal(station.theme)"
 							>
@@ -1205,59 +1203,60 @@ export default {
 	.button-wrapper {
 		display: flex;
 		flex-direction: column;
-	}
 
-	button {
-		width: 100%;
-		height: 36px;
-		border: 0;
-		border-radius: 3px;
-		font-size: 18px;
-		color: white;
-		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
-		display: block;
-		text-align: center;
-		justify-content: center;
-		display: inline-flex;
-		-ms-flex-align: center;
-		align-items: center;
-		-moz-user-select: none;
-		user-select: none;
-		cursor: pointer;
-		margin-bottom: 10px;
-		padding: 0;
+		button {
+			width: 100%;
+			height: 36px;
+			border: 0;
+			border-radius: 3px;
+			font-size: 18px;
+			color: white;
+			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
+			display: block;
+			text-align: center;
+			justify-content: center;
+			display: inline-flex;
+			-ms-flex-align: center;
+			align-items: center;
+			-moz-user-select: none;
+			user-select: none;
+			cursor: pointer;
+			margin-bottom: 10px;
+			padding: 0;
+			text-transform: capitalize;
 
-		&.red {
-			background-color: $red;
-		}
+			&.red {
+				background-color: $red;
+			}
 
-		&.green {
-			background-color: $green;
-		}
+			&.green {
+				background-color: $green;
+			}
 
-		&.blue {
-			background-color: $musare-blue;
-		}
+			&.blue {
+				background-color: $musare-blue;
+			}
 
-		&.orange {
-			background-color: $light-orange;
-		}
+			&.orange {
+				background-color: $light-orange;
+			}
 
-		&.yellow {
-			background-color: $yellow;
-		}
+			&.yellow {
+				background-color: $yellow;
+			}
 
-		&.purple {
-			background-color: $purple;
-		}
+			&.purple {
+				background-color: $purple;
+			}
 
-		&.teal {
-			background-color: $teal;
-		}
+			&.teal {
+				background-color: $teal;
+			}
 
-		i {
-			font-size: 20px;
-			margin-right: 4px;
+			i {
+				font-size: 20px;
+				margin-right: 4px;
+			}
 		}
 	}
 }

frontend/src/pages/Settings/tabs/Profile.vue

@@ -72,10 +72,7 @@
 				autocomplete="off"
 				v-model="modifiedUser.bio"
 			/>
-			<span
-				v-if="modifiedUser.bio"
-				class="character-counter"
-				style="height: initial"
+			<span v-if="modifiedUser.bio" class="character-counter"
 				>{{ modifiedUser.bio.length }}/200</span
 			>
 		</p>
@@ -297,6 +294,10 @@ export default {
 	margin-bottom: 15px;
 }
 
+.character-counter {
+	height: initial;
+}
+
 .avatar-selection-outer-container {
 	display: flex;
 	flex-direction: column;

frontend/src/pages/Station/AddSongToQueue.vue

@@ -36,11 +36,7 @@
 
 				<!-- Choosing a song from youtube - query results -->
 
-				<table
-					class="table"
-					style="margin-top: 20px;"
-					v-if="queryResults.length > 0"
-				>
+				<table class="table" v-if="queryResults.length > 0">
 					<tbody>
 						<tr
 							v-for="(result, index) in queryResults"
@@ -95,7 +91,7 @@
 				<!-- Import a playlist from youtube -->
 
 				<div v-if="station.type === 'official'">
-					<hr style="margin: 30px 0;" />
+					<hr class="section-horizontal-rule" />
 
 					<h4 class="section-title">
 						Import a playlist
@@ -148,7 +144,7 @@
 							playlists.length > 0
 					"
 				>
-					<hr style="margin: 30px 0;" />
+					<hr class="section-horizontal-rule" />
 
 					<aside id="playlist-to-queue-selection">
 						<h4 class="section-title">Choose a playlist</h4>
@@ -409,6 +405,7 @@ tr td {
 
 .table {
 	margin-bottom: 0;
+	margin-top: 20px;
 }
 
 .night-mode {

frontend/src/pages/Station/index.vue

@@ -10,7 +10,7 @@
 				primary-color="#f3f3f3"
 				secondary-color="#cccccc"
 				preserve-aspect-ratio="none"
-				style="position: absolute; height: inherit; max-width: 1800px; transform: translateX(-50%); left: 50%;"
+				id="content-loader content-loader-content"
 			>
 				<rect x="100" y="108" rx="5" ry="5" width="1048" height="672" />
 				<rect x="100" y="810" rx="5" ry="5" width="1048" height="110" />
@@ -24,7 +24,7 @@
 				primary-color="#f3f3f3"
 				secondary-color="#cccccc"
 				preserve-aspect-ratio="none"
-				style="height: inherit"
+				id="content-loader"
 			>
 				<rect x="0" y="0" rx="0" ry="0" width="1920" height="64" />
 				<rect x="0" y="980" rx="0" ry="0" width="1920" height="100" />
@@ -1558,6 +1558,19 @@ export default {
 
 <style lang="scss" scoped>
 @import "../../styles/global.scss";
+
+#content-loader {
+	height: inherit;
+}
+
+#content-loader-content {
+	position: absolute;
+	height: inherit;
+	max-width: 1800px;
+	transform: translateX(-50%);
+	left: 50%;
+}
+
 .progress {
 	width: 50px;
 	animation: rotate 0.8s infinite linear;