refactor(RequestSong): improved song action design

frontend/src/components/SearchQueryItem.vue

@@ -19,36 +19,17 @@
 		</div>
 
 		<div class="universal-item-actions">
-			<tippy
-				:touch="true"
-				:interactive="true"
-				placement="left"
-				theme="songActions"
-				ref="songActions"
-				trigger="click"
-			>
-				<i
-					class="material-icons action-dropdown-icon"
-					content="Song Options"
+			<div class="icons-group">
+				<a
+					target="_blank"
+					:href="`https://www.youtube.com/watch?v=${result.id}`"
+					content="View on Youtube"
 					v-tippy
-					>more_horiz</i
 				>
-
-				<template #content>
-					<div class="icons-group">
-						<a
-							target="_blank"
-							:href="`https://www.youtube.com/watch?v=${result.id}`"
-							content="View on Youtube"
-							v-tippy
-						>
-							<div class="youtube-icon"></div>
-						</a>
-						<slot name="actions" />
-					</div>
-				</template>
-			</tippy>
-		</div>
+					<div class="youtube-icon"></div>
+				</a>
+				<slot name="actions" />
+			</div>		</div>
 	</div>
 </template>
 

frontend/src/components/modals/RequestSong.vue

@@ -50,31 +50,25 @@
 								name="search-query-actions"
 								mode="out-in"
 							>
-								<a
-									class="button is-success"
+								<i
 									v-if="result.isRequested"
-									href="#"
 									key="added-to-playlist"
+									class="material-icons icon-requested"
+									content="Requested song"
+									v-tippy
+									>done</i
 								>
-									<i class="material-icons icon-with-button"
-										>done</i
-									>
-									Requested song
-								</a>
-								<a
-									class="button is-dark"
+								<i
 									v-else
 									@click.prevent="
 										addSongToQueue(result.id, index)
 									"
-									href="#"
 									key="add-to-queue"
+									class="material-icons icon-request"
+									content="Request song"
+									v-tippy
+									>add</i
 								>
-									<i class="material-icons icon-with-button"
-										>add</i
-									>
-									Request song
-								</a>
 							</transition>
 						</template>
 					</search-query-item>
@@ -241,6 +235,10 @@ export default {
 	div {
 		color: var(--dark-grey);
 	}
+
+	.icon-request {
+		color: var(--white);
+	}
 }
 
 .song-actions {
@@ -266,6 +264,14 @@ export default {
 	padding: 20px;
 }
 
+.icon-requested {
+	color: var(--green);
+}
+
+.icon-request {
+	color: var(--dark-gray-3);
+}
+
 #song-query-results {
 	padding: 10px;
 	max-height: 500px;