Styling updates

src/components/ControlBar.vue

@@ -213,7 +213,7 @@ export default {
 }
 
 #control > div {
-	margin-bottom: 10px;
+	margin: 5px 5px 10px 5px;
 }
 
 #error {

src/components/LoginView.vue

@@ -4,7 +4,7 @@
 			<a :href="spotify_auth_url">
 				<button>Login With Spotify</button>
 			</a>
-			<p> {{ alert }} </p>
+			<p class="alert"> {{ alert }} </p>
 		</div>
 	</div>
 </template>
@@ -49,7 +49,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #login_screen {
 	font-family: var(--fonts);
 	justify-content: center;
@@ -80,8 +80,20 @@ button {
 }
 button:hover { cursor: pointer; }
 
-p {
+
+.alert {
 	margin-bottom: 0px;
 	margin-top: 15px;
 }
+
+
+.error {
+	background-color: var(--error-background);
+	border-radius: var(--corner-rounding);
+	border-color: var(--error);
+	border-style: solid;
+	color: var(--error);
+	margin-bottom: 15px;
+	border-width: 2px;
+}
 </style>

src/components/MainView.vue

@@ -94,8 +94,8 @@ export default {
 }
 
 .card {
+	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
-	border-radius: var(--border-radius);
 	color: var(--card-text);
 	padding: 20px 10px 10px;
 	flex-direction: column;

src/css/dark_theme.css

@@ -7,6 +7,7 @@
 	--accent2: #00aa00;
 
 	--error: #ff0000;
+	--error-background: #ff00005d;
 
 	--background: #23272A;
 	--background-text: var(--spotify-white);