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

frontend/src/components/Confirm.vue

@@ -9,16 +9,6 @@
 		<template #trigger>
 			<slot />
 		</template>
-		<a @click.prevent="confirm()"> Confirm </a>
+		<a @click.prevent="$emit('confirm')"> Confirm </a>
 	</tippy>
 </template>
-
-<script>
-export default {
-	methods: {
-		confirm() {
-			this.$emit("confirm");
-		}
-	}
-};
-</script>

frontend/src/components/SongItem.vue

@@ -27,10 +27,10 @@
 				</div>
 				<h5
 					class="item-description"
-					v-if="song.artists"
-					:title="song.artists.join(', ')"
+					v-if="formatArtists()"
+					:title="formatArtists()"
 				>
-					{{ song.artists.join(", ") }}
+					{{ formatArtists() }}
 				</h5>
 				<p
 					class="song-request-time"
@@ -173,6 +173,20 @@ export default {
 		})
 	},
 	methods: {
+		formatArtists() {
+			if (this.song.artists.length === 1) {
+				return this.song.artists[0];
+			}
+			if (this.song.artists.length === 2) {
+				return this.song.artists.join(" & ");
+			}
+			if (this.song.artists.length > 2) {
+				return `${this.song.artists
+					.slice(0, -1)
+					.join(", ")} & ${this.song.artists.slice(-1)}`;
+			}
+			return null;
+		},
 		hideTippyElements() {
 			this.$refs.songActions.tip.hide();
 
@@ -267,15 +281,16 @@ export default {
 			font-family: Karla, Arial, sans-serif;
 		}
 
+		h6 {
+			color: var(--primary-color) !important;
+			font-weight: bold;
+			font-size: 17px;
+			margin-bottom: 5px;
+		}
+
 		.song-title {
 			display: flex;
 			flex-direction: row;
-			h6 {
-				color: var(--primary-color) !important;
-				font-weight: bold;
-				font-size: 17px;
-				margin-bottom: 5px;
-			}
 			.verified-song {
 				margin-left: 5px;
 			}