Updated styling of EditSong Modal

frontend/App.vue

@@ -228,6 +228,9 @@
 		}
 	}
 
-	.button:focus { border-color: #dbdbdb !important; }
+	.button:focus, .button:active { border-color: #dbdbdb !important; }
+	.input:focus, .input:active { border-color: #03a9f4 !important; }
 	button.delete:focus { background-color: rgba(10, 10, 10, 0.3); }
+
+	.tag { padding-right: 6px !important; }
 </style>

frontend/components/Modals/EditSong.vue

@@ -32,10 +32,14 @@
 				<h5 class='has-text-centered'>Thumbnail Preview</h5>
 				<img class='thumbnail-preview' :src='$parent.editing.song.thumbnail' onerror="this.src='/assets/notes-transparent.png'">
 
-				<label class='label'>Thumbnail URL</label>
-				<p class='control'>
-					<input class='input' type='text' v-model='$parent.editing.song.thumbnail'>
-				</p>
+				<div class="control is-horizontal">
+					<div class="control-label">
+						<label class="label">Thumbnail URL</label>
+					</div>
+					<div class="control">
+						<input class='input' type='text' v-model='$parent.editing.song.thumbnail'>
+					</div>
+				</div>
 
 				<h5 class='has-text-centered'>Edit Info</h5>
 
@@ -45,16 +49,20 @@
 						Explicit
 					</label>
 				</p>
-				<label class='label'>Song ID</label>
-				<p class='control'>
-					<input class='input' type='text' v-model='$parent.editing.song._id'>
-				</p>
-				<label class='label'>Song Title</label>
-				<p class='control'>
-					<input class='input' type='text' v-model='$parent.editing.song.title' autofocus>
-				</p>
+				<label class='label'>Song ID & Title</label>
+				<div class="control is-horizontal">
+					<div class="control is-grouped">
+						<p class='control is-expanded'>
+							<input class='input' type='text' v-model='$parent.editing.song._id'>
+						</p>
+						<p class='control is-expanded'>
+							<input class='input' type='text' v-model='$parent.editing.song.title' autofocus>
+						</p>
+					</div>
+				</div>
+				<label class='label'>Artists & Genres</label>
 				<div class='control is-horizontal'>
-					<div class='control is-grouped'>
+					<div class='control is-grouped artist-genres'>
 						<div>
 							<p class='control has-addons'>
 								<input class='input' id='new-artist' type='text' placeholder='Artist'>
@@ -215,13 +223,18 @@
 		align-items: center;
 	}
 
+	.artist-genres {
+		display: flex;
+    	justify-content: space-between;
+	}
+
 	#volumeSlider { margin-bottom: 15px; }
 
 	.has-text-centered { padding: 10px; }
 
 	.thumbnail-preview {
 		display: flex;
-		margin: 0 auto;
+		margin: 0 auto 25px auto;
 		max-width: 200px;
 		width: 100%;
 	}