Add the popularity modal for describing what it is

src/components/cards/Artist.vue

@@ -22,6 +22,7 @@
 		<div
 			v-tooltip.auto="popularity_tooltip"
 			class="popularity corner"
+			@click.self="show_pop_modal = true"
 		>
 			{{ item.popularity }}
 		</div>
@@ -31,13 +32,22 @@
 		>
 			{{ item.followers.total.toLocaleString() }}
 		</div>
+		<PopularityModal
+			v-if="show_pop_modal"
+			@close="show_pop_modal = false"
+		/>
 	</div>
 </template>
 
 <script>
+// Import Components
+import PopularityModal from "../modals/PopularityInfo.vue";
+
 export default {
 	name: `ArtistCard`,
-	components: {},
+	components: {
+		PopularityModal: PopularityModal
+	},
 	props: {
 		item: {
 			type: Object,
@@ -47,6 +57,7 @@ export default {
 	data() { return {
 		followers_tooltip: `Total Followers`,
 		popularity_tooltip: `Artist Popularity`,
+		show_pop_modal: false,
 	}},
 	computed: {
 		genres() {
@@ -106,6 +117,9 @@ img {
 	bottom: 0;
 	left: 0;
 }
+.popularity:hover {
+	cursor: pointer;
+}
 
 .followers {
 	border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;

src/components/cards/Track.vue

@@ -24,6 +24,7 @@
 		<div
 			v-tooltip.auto="popularity_tooltip"
 			class="popularity corner"
+			@click.self="show_pop_modal = true"
 		>
 			{{ item.popularity }}
 		</div>
@@ -33,13 +34,22 @@
 		>
 			{{ duration }}
 		</div>
+		<PopularityModal
+			v-if="show_pop_modal"
+			@close="show_pop_modal = false"
+		/>
 	</div>
 </template>
 
 <script>
+// Import Components
+import PopularityModal from "../modals/PopularityInfo.vue";
+
 export default {
 	name: `TrackCard`,
-	components: {},
+	components: {
+		PopularityModal: PopularityModal,
+	},
 	props: {
 		item: {
 			type: Object,
@@ -49,6 +59,7 @@ export default {
 	data() { return {
 		duration_tooltip: `Song Duration`,
 		popularity_tooltip: `Song Popularity`,
+		show_pop_modal: false,
 	}},
 	computed: {
 		duration() {
@@ -121,6 +132,9 @@ img {
 	bottom: 0;
 	left: 0;
 }
+.popularity:hover {
+	cursor: pointer;
+}
 
 .duration {
 	border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;

src/components/modals/PopularityInfo.vue

@@ -1,17 +1,71 @@
-<template>
-	<div id=""></div>
+<template id="pop-modal">
+	<transition name="fade" @after-enter="content = true">
+		<div
+			v-if="container"
+			class="modal-container"
+			@click.self="content = false"
+		>
+			<transition name="burst" @after-leave="$emit('close')">
+				<div v-if="content" class="modal">
+					<h2 class="center">How is Popularity Calculated?</h2>
+					<p class="center">
+						Popularity is a value between 0 and 100 that is calculated by Spotify based on how many plays the song/artist has recieved and how recent those plays are.
+					</p>
+					<p class="center">
+						This means that an artist/song that has had 100 plays today will have a higher popularity than a song/artist that has 100 from a month ago.
+					</p>
+					<p class="center">
+						This number is not updated in real time so refreshing the page will not reflect it's absolute accurate value.
+					</p>
+				</div>
+			</transition>
+		</div>
+	</transition>
 </template>
 
 <script>
 export default {
-	name: ``,
-	components: {},
-	data() { return {}},
-	computed: {},
-	methods: {}
+	name: `PopularityModal`,
+	data() {return {
+		container: false,
+		content: false,
+	}},
+	mounted() {
+		this.$nextTick(function() {
+			this.container = true;
+		});
+	},
 }
 </script>
 
-<style>
+<style scoped>
+.modal-container {
+	background-color: var(--modal-container-background);
+	justify-content: center;
+	align-items: center;
+	position: fixed;
+	display: flex;
+	height: 100vh;
+	width: 100vw;
+	z-index: 10;
+	left: 0;
+	top: 0;
+}
 
+.modal {
+	background-color: var(--modal-background);
+	border-radius: var(--corner-rounding);
+	text-align: center;
+	max-height: 85%;
+	padding: 0 15px;
+	z-index: 11;
+	width: 90%;
+}
+
+@media only screen and (min-width: 768px) {
+	.modal {
+		width: 50%;
+		max-height: 75%;
+	}
+}
 </style>

src/css/dark_theme.css

@@ -20,6 +20,7 @@
 
 	--modal-container-background: #0e0f10eb;
 	--modal-background: var(--card-colour);
+	--modal-close-button: var(--card-text);
 	--modal-text: var(--card-text);
 
 	--fonts: 'Open Sans', sans-serif;