feat(Tooltips): seperate theme for info tooltips (compared to action-based tooltips), smaller font size

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

frontend/src/App.vue

@@ -451,12 +451,17 @@ a {
 	}
 }
 
+.tippy-tooltip.info-theme {
+	font-size: 12px;
+	letter-spacing: 1px;
+}
+
 .tippy-tooltip.confirm-theme {
 	background-color: var(--red);
 	padding: 5px 10px;
 	a {
 		color: var(--white);
-		font-size: 14px;
+		font-size: 15px;
 		font-weight: 600;
 		&:hover,
 		&:focus {
@@ -466,7 +471,7 @@ a {
 }
 
 .tippy-tooltip.songActions-theme {
-	font-size: 14px;
+	font-size: 15px;
 	padding: 5px 10px;
 	border: 1px solid var(--light-grey-3);
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
@@ -574,7 +579,7 @@ a {
 }
 
 .tippy-tooltip.addToPlaylist-theme {
-	font-size: 14px;
+	font-size: 15px;
 	padding: 5px;
 	border: 1px solid var(--light-grey-3);
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);

frontend/src/components/PlaylistItem.vue

@@ -7,7 +7,7 @@
 					v-if="playlist.privacy === 'private'"
 					class="private-playlist-icon material-icons"
 					content="This playlist is not visible to other users."
-					v-tippy
+					v-tippy="{ theme: 'info' }"
 					>lock</i
 				>
 			</p>

frontend/src/components/Queue.vue

@@ -106,7 +106,7 @@
 						station.type === 'official')
 			"
 			content="Login to add songs to queue"
-			v-tippy
+			v-tippy="{ theme: 'info' }"
 		>
 			<i class="material-icons icon-with-button">queue</i>
 			<span class="optional-desktop-only-text"> Add Song To Queue </span>

frontend/src/components/SongItem.vue

@@ -24,7 +24,7 @@
 						v-if="song.status === 'verified'"
 						class="material-icons verified-song"
 						content="Verified Song"
-						v-tippy
+						v-tippy="{ theme: 'info' }"
 					>
 						check_circle
 					</i>
@@ -307,6 +307,7 @@ export default {
 		.song-title {
 			display: flex;
 			flex-direction: row;
+
 			.verified-song {
 				margin-left: 5px;
 			}

frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -116,7 +116,7 @@
 								v-if="isExcluded(playlist._id)"
 								class="material-icons stop-icon"
 								content="This playlist is blacklisted in this station"
-								v-tippy
+								v-tippy="{ theme: 'info' }"
 								>play_disabled</i
 							>
 							<confirm
@@ -235,7 +235,7 @@
 									v-if="isExcluded(playlist._id)"
 									class="material-icons stop-icon"
 									content="This playlist is blacklisted in this station"
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>play_disabled</i
 								>
 								<i

frontend/src/components/modals/ManageStation/Tabs/Settings.vue

@@ -187,7 +187,7 @@
 					<button
 						class="blue"
 						content="Can not be changed on official stations."
-						v-tippy
+						v-tippy="{ theme: 'info' }"
 					>
 						<i class="material-icons">playlist_play</i>
 						Playlist
@@ -240,7 +240,7 @@
 					<button
 						class="blue"
 						content="Can not be changed on official stations."
-						v-tippy
+						v-tippy="{ theme: 'info' }"
 					>
 						<i class="material-icons">shuffle</i>
 						Random

frontend/src/components/modals/ViewReport.vue

@@ -24,7 +24,10 @@
 					/>
 					<br />
 					<strong>Time of report:</strong>
-					<span :content="report.createdAt" v-tippy>
+					<span
+						:content="report.createdAt"
+						v-tippy="{ theme: 'info' }"
+					>
 						{{
 							formatDistance(
 								new Date(report.createdAt),

frontend/src/pages/Admin/tabs/Reports.vue

@@ -28,13 +28,17 @@
 							/>
 						</td>
 						<td>
-							<span :content="report.createdAt" v-tippy>{{
-								formatDistance(
-									new Date(report.createdAt),
-									new Date(),
-									{ addSuffix: true }
-								)
-							}}</span>
+							<span
+								:content="report.createdAt"
+								v-tippy="{ theme: 'info' }"
+								>{{
+									formatDistance(
+										new Date(report.createdAt),
+										new Date(),
+										{ addSuffix: true }
+									)
+								}}</span
+							>
 						</td>
 						<td>
 							<span>{{ report.description }}</span>

frontend/src/pages/Home.vue

@@ -107,7 +107,9 @@
 											v-if="station.type === 'official'"
 											class="material-icons verified-station"
 											content="Verified Station"
-											v-tippy
+											v-tippy="{
+												theme: 'info'
+											}"
 										>
 											check_circle
 										</i>
@@ -143,14 +145,14 @@
 											"
 											class="homeIcon material-icons"
 											content="This is your station."
-											v-tippy
+											v-tippy="{ theme: 'info' }"
 											>home</i
 										>
 										<i
 											v-if="station.privacy === 'private'"
 											class="privateIcon material-icons"
 											content="This station is not visible to other users."
-											v-tippy
+											v-tippy="{ theme: 'info' }"
 											>lock</i
 										>
 										<i
@@ -159,7 +161,7 @@
 											"
 											class="unlistedIcon material-icons"
 											content="Unlisted Station"
-											v-tippy
+											v-tippy="{ theme: 'info' }"
 											>link</i
 										>
 									</div>
@@ -173,7 +175,7 @@
 									"
 									class="material-icons"
 									content="Station Paused"
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>pause</i
 								>
 								<i
@@ -216,7 +218,7 @@
 											? 'Station in Party mode'
 											: 'Station in Playlist mode'
 									"
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>{{
 										station.partyMode
 											? "emoji_people"
@@ -321,7 +323,7 @@
 									v-if="station.type === 'official'"
 									class="material-icons verified-station"
 									content="Verified Station"
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 								>
 									check_circle
 								</i>
@@ -355,21 +357,21 @@
 									"
 									class="homeIcon material-icons"
 									content="This is your station."
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>home</i
 								>
 								<i
 									v-if="station.privacy === 'private'"
 									class="privateIcon material-icons"
 									content="This station is not visible to other users."
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>lock</i
 								>
 								<i
 									v-if="station.privacy === 'unlisted'"
 									class="unlistedIcon material-icons"
 									content="Unlisted Station"
-									v-tippy
+									v-tippy="{ theme: 'info' }"
 									>link</i
 								>
 							</div>
@@ -380,7 +382,7 @@
 							v-if="station.paused && station.currentSong.title"
 							class="material-icons"
 							content="Station Paused"
-							v-tippy
+							v-tippy="{ theme: 'info' }"
 							>pause</i
 						>
 						<i
@@ -417,7 +419,7 @@
 									? 'Station in Party mode'
 									: 'Station in Playlist mode'
 							"
-							v-tippy
+							v-tippy="{ theme: 'info' }"
 							>{{
 								station.partyMode
 									? "emoji_people"

frontend/src/pages/Profile/index.vue

@@ -63,7 +63,7 @@
 						<i
 							class="material-icons"
 							content="Account Creation Date"
-							v-tippy
+							v-tippy="{ theme: 'info' }"
 							>calendar_today</i
 						>
 						<p>{{ user.createdAt }}</p>

frontend/src/pages/Station/Sidebar/Playlists.vue

@@ -24,7 +24,7 @@
 							v-if="isExcluded(playlist._id)"
 							class="material-icons stop-icon"
 							content="This playlist is blacklisted in this station"
-							v-tippy
+							v-tippy="{ theme: 'info' }"
 							>play_disabled</i
 						>
 						<i

frontend/src/pages/Station/Sidebar/index.vue

@@ -27,7 +27,7 @@
 				v-else
 				class="button is-default"
 				content="Login to manage playlists"
-				v-tippy
+				v-tippy="{ theme: 'info' }"
 			>
 				My Playlists
 			</button>

frontend/src/pages/Station/index.vue

@@ -102,7 +102,7 @@
 												? 'Station in Party mode'
 												: 'Station in Playlist mode'
 										"
-										v-tippy
+										v-tippy="{ theme: 'info' }"
 										>{{
 											station.partyMode
 												? "emoji_people"
@@ -339,7 +339,7 @@
 										v-else
 										class="button is-primary disabled"
 										content="Login to vote to skip songs"
-										v-tippy
+										v-tippy="{ theme: 'info' }"
 									>
 										<i
 											class="material-icons icon-with-button"
@@ -477,7 +477,7 @@
 											class="button is-success disabled"
 											id="like-song"
 											content="Login to like songs"
-											v-tippy
+											v-tippy="{ theme: 'info' }"
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -490,7 +490,7 @@
 											class="button is-danger disabled"
 											id="dislike-song"
 											content="Login to dislike songs"
-											v-tippy
+											v-tippy="{ theme: 'info' }"
 										>
 											<i
 												class="material-icons icon-with-button"
@@ -504,7 +504,7 @@
 											<button
 												class="button is-primary disabled"
 												content="Login to add songs to playlist"
-												v-tippy
+												v-tippy="{ theme: 'info' }"
 											>
 												<i class="material-icons"
 													>queue</i