From 861947620e402abce14a2f66c2a221d29e520f60 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 22 Aug 2020 00:03:17 -0600
Subject: [PATCH 01/12] Update the icon to use the properly cased prop

---
 src/components/Icon.vue | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 58f3720..03bc253 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -2,15 +2,15 @@
 	<div id="icon" :style="div_styles">
 		<span v-if="type === 'notes'" :style="span_styles">
 			<svg
-				:width="inner_size"
-				:height="inner_size"
+				:width="innerSize"
+				:height="innerSize"
 				viewBox="0 0 24 24"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				<rect
-					:width="inner_size"
-					:height="inner_size"
+					:width="innerSize"
+					:height="innerSize"
 					fill="none"
 					rx="0"
 					ry="0"
@@ -25,15 +25,15 @@
 		</span>
 		<span v-else-if="type === 'note_filled'" :style="span_styles">
 			<svg
-				:width="inner_size"
-				:height="inner_size"
+				:width="innerSize"
+				:height="innerSize"
 				viewBox="0 0 24 24"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				<rect
-					:width="inner_size"
-					:height="inner_size"
+					:width="innerSize"
+					:height="innerSize"
 					fill="none"
 					rx="0"
 					ry="0"
@@ -48,12 +48,12 @@
 		</span>
 		<span v-else-if="type === 'palette'" :style="span_styles">
 			<svg
-				:width="inner_size"
-				:height="inner_size"
+				:width="innerSize"
+				:height="innerSize"
 			>
 				<rect
-					:width="inner_size"
-					:height="inner_size"
+					:width="innerSize"
+					:height="innerSize"
 					fill="none"
 					rx="0"
 					ry="0"
@@ -68,15 +68,15 @@
 		</span>
 		<span v-else-if="type === 'info'" :style="span_styles">
 			<svg
-				:width="inner_size"
-				:height="inner_size"
+				:width="innerSize"
+				:height="innerSize"
 				viewBox="0 0 24 24"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				<rect
-					:width="inner_size"
-					:height="inner_size"
+					:width="innerSize"
+					:height="innerSize"
 					fill="none"
 					rx="0"
 					ry="0"
@@ -114,7 +114,7 @@ export default {
 			default: 25,
 			required: false,
 		},
-		inner_size: {
+		innerSize: {
 			type: Number,
 			default: null,
 			required: false,
@@ -140,10 +140,10 @@ export default {
 	}},
 	computed: {
 		span_styles() {
-			if (this.inner_size) {
+			if (this.innerSize) {
 				return {
-					"width": `${this.inner_size}px`,
-					"height": `${this.inner_size}px`,
+					"width": `${this.innerSize}px`,
+					"height": `${this.innerSize}px`,
 				}
 			}
 			let x = Math.floor(this.size * 0.6);

From 1220be2a85583309b833688528af399d1c6d7a41 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 22 Aug 2020 00:03:50 -0600
Subject: [PATCH 02/12] Add share icon

---
 src/components/Icon.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 03bc253..872a905 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -88,6 +88,29 @@
 				/>
 			</svg>
 		</span>
+		<span v-if="type === 'share'">
+			<svg
+				:width="innerSize"
+				:height="innerSize"
+				viewBox="0 0 24 24"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<rect
+					:width="innerSize"
+					:height="innerSize"
+					fill="none"
+					rx="0"
+					ry="0"
+				/>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M21 11.0973L11.649 2V7.88894C9.79571 8.47147 7.64026 9.4555 5.92961 11.1081C2.12878 14.7798 3.25909 22 3.25909 22C3.25909 22 4.96118 17.4943 9.72838 15.4683C10.4461 15.1633 11.0837 14.9656 11.649 14.8498V20.1945L21 11.0973ZM12.8057 4.83626L19.3342 11.1398L12.8057 17.4398V13.4238C12.0637 13.3957 10.804 13.5736 8.78581 14.445C4.9332 16.1084 3.808 18.9049 3.808 18.9049C3.808 18.9049 4.31903 14.445 7.22448 11.7612C9.22285 9.91537 11.5484 9.30242 12.8057 9.09961V4.83626Z"
+					:fill="primary"
+				/>
+			</svg>
+		</span>
 	</div>
 </template>
 

From cadb8e7358263fd742efda739194b6a6ed743f23 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 22 Aug 2020 00:04:26 -0600
Subject: [PATCH 03/12] Adds some CSS variables for the bottom bar of the cards

---
 src/css/theme/dark.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/css/theme/dark.css b/src/css/theme/dark.css
index b9e12b8..4e89d4c 100644
--- a/src/css/theme/dark.css
+++ b/src/css/theme/dark.css
@@ -60,4 +60,9 @@
 	--scrollbar-background: #0f0f0f;
 	--scrollbar-handle: #4d4d4d;
 	--scrollbar-handle-hover: #5e5e5e;
+
+	--card-bottom-row-text-colour: var(--accent2);
+	--card-bottom-row-background: var(--on-card-colour);
+	--card-bottom-row-divider-colour: #000000;
+	--card-bottom-row-icon-colour: var(--card-bottom-row-text-colour);
 }
\ No newline at end of file

From 0e757cabf555944a4a3fa7b81139980f9d3673b3 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 22 Aug 2020 00:05:03 -0600
Subject: [PATCH 04/12] Change colour of on-card-text

---
 src/css/theme/dark.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/theme/dark.css b/src/css/theme/dark.css
index 4e89d4c..cc75c13 100644
--- a/src/css/theme/dark.css
+++ b/src/css/theme/dark.css
@@ -23,7 +23,7 @@
 	--card-text: #ffffff80;
 
 	--on-card-colour: #4c4c4c;
-	--on-card-text: var(--spotify-green);
+	--on-card-text: var(--accent2);
 
 	--modal-container-background: #0e0f10eb;
 	--modal-background: var(--card-colour);

From d7d780c188ef2fb20f02c33476dcb9e743ee1955 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 22 Aug 2020 00:05:43 -0600
Subject: [PATCH 05/12] Add the bottom bar with the icons.

Adds styling for the bottom of the card.
---
 src/components/cards/Track.vue | 99 ++++++++++++++++++++++++----------
 1 file changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 9bb4f5d..68b796f 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -21,18 +21,29 @@
 				{{ item.artists.map(x => x.name).join(`, `) }}
 			</div>
 		</div>
-		<div
-			v-tooltip.auto="popularity_tooltip"
-			class="popularity corner"
-			@click.self.stop="show_pop_modal = true"
-		>
-			{{ item.popularity }}
-		</div>
-		<div
-			v-tooltip.auto="duration_tooltip"
-			class="duration corner"
-		>
-			{{ duration }}
+		<div class="bottom-bar">
+			<div class="popularity">
+				{{ item.popularity }}
+			</div>
+			<div class="share">
+				<icon
+					type="share"
+					:size="25"
+					:inner-size="25"
+					:primary="css_var('--card-bottom-row-icon-colour')"
+				/>
+			</div>
+			<div class="information">
+				<icon
+					type="info"
+					:size="25"
+					:inner-size="25"
+					:primary="css_var('--card-bottom-row-icon-colour')"
+				/>
+			</div>
+			<div class="duration">
+				{{ duration }}
+			</div>
 		</div>
 		<PopularityModal
 			v-if="show_pop_modal"
@@ -48,6 +59,7 @@
 
 <script>
 // Import Components
+import Icon from "../Icon";
 import PopularityModal from "../modals/PopularityInfo.vue";
 import DetailedTrackModal from "../modals/DetailedTrack.vue";
 
@@ -56,6 +68,7 @@ export default {
 	components: {
 		PopularityModal: PopularityModal,
 		TrackInfo: DetailedTrackModal,
+		icon: Icon,
 	},
 	props: {
 		item: {
@@ -100,7 +113,6 @@ export default {
 .card {
 	border-radius: var(--corner-rounding);
 	background-color: var(--card-colour);
-	padding: 10px 10px 1.75em;
 	color: var(--card-text);
 	flex-direction: column;
 	align-items: center;
@@ -108,6 +120,7 @@ export default {
 	position: relative;
 	margin: 5px auto;
 	display: flex;
+	padding: 10px;
 	width: 90%;
 }
 
@@ -118,6 +131,14 @@ img {
 	height: var(--size);
 }
 
+.track-info {
+	justify-content: center;
+	flex-direction: column;
+	margin-bottom: 1.25em;
+	display: flex;
+	height: 100%;
+}
+
 .title {
 	text-align: center;
 	font-size: larger;
@@ -128,27 +149,49 @@ img {
 	font-size: smaller;
 }
 
-.corner {
-	background-color: var(--on-card-colour);
-	color: var(--on-card-text);
+.bottom-bar {
+	border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
+	background-color: var(--card-bottom-row-background);
+	color: var(--card-bottom-row-text-colour);
+	justify-content: space-between;
 	position: absolute;
-	padding: 1px 6px;
+	padding-right: 5%;
+	padding-left: 5%;
+	display: flex;
+	width: 90%;
+	bottom: 0;
 }
 
-.popularity {
-	border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding);
-	bottom: 0;
-	left: 0;
+/* Setting the growth and alignments of the bottom bar buttons */
+.bottom-bar > div {
+	border-color: var(--card-bottom-row-divider-colour);
+	padding-bottom: 2px;
+	padding-top: 2px;
 }
-.popularity:hover {
-	cursor: pointer;
+.bottom-bar > :nth-child(1) {
+	border-right-style: solid;
+	border-width: 2px;
+	flex-grow: 1;
+}
+.bottom-bar > :nth-child(2) {
+	border-right-style: solid;
+	text-align: center;
+	border-width: 1px;
+	flex-grow: 2;
+}
+.bottom-bar > :nth-child(3) {
+	border-left-style: solid;
+	text-align: center;
+	border-width: 1px;
+	flex-grow: 2;
+}
+.bottom-bar > :nth-child(4) {
+	border-left-style: solid;
+	text-align: right;
+	border-width: 2px;
+	flex-grow: 1;
 }
 
-.duration {
-	border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;
-	bottom: 0;
-	right: 0;
-}
 
 @media only screen and (min-width: 768px) {
 	.card {

From f70d8fb2adc9b0edf3a0971f5f6ceb8272e54de8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:12:54 -0600
Subject: [PATCH 06/12] Add sharing modal

---
 src/components/cards/Track.vue       | 12 +++-
 src/components/modals/ShareTrack.vue | 99 ++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 src/components/modals/ShareTrack.vue

diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 68b796f..13befb9 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -54,20 +54,27 @@
 			:track="item"
 			@close="show_track_info = false"
 		/>
+		<Sharing
+			v-if="show_share_modal"
+			:track="item"
+			@close="show_share_modal = false"
+		/>
 	</div>
 </template>
 
 <script>
 // Import Components
 import Icon from "../Icon";
-import PopularityModal from "../modals/PopularityInfo.vue";
-import DetailedTrackModal from "../modals/DetailedTrack.vue";
+import ShareModal from "../modals/ShareTrack";
+import PopularityModal from "../modals/PopularityInfo";
+import DetailedTrackModal from "../modals/DetailedTrack";
 
 export default {
 	name: `TrackCard`,
 	components: {
 		PopularityModal: PopularityModal,
 		TrackInfo: DetailedTrackModal,
+		Sharing: ShareModal,
 		icon: Icon,
 	},
 	props: {
@@ -81,6 +88,7 @@ export default {
 		popularity_tooltip: `Song Popularity`,
 		show_pop_modal: false,
 		show_track_info: false,
+		show_share_modal: false,
 	}},
 	computed: {
 		duration() {
diff --git a/src/components/modals/ShareTrack.vue b/src/components/modals/ShareTrack.vue
new file mode 100644
index 0000000..b202aa1
--- /dev/null
+++ b/src/components/modals/ShareTrack.vue
@@ -0,0 +1,99 @@
+<template>
+	<transition name="fade" @after-enter="content = true">
+		<div
+			v-if="container"
+			class="modal-container"
+			@click.self.stop="content = false"
+		>
+			<transition name="burst" @after-leave="$emit('close')">
+				<div v-if="content" class="modal">
+					<h2 class="center">Track Sharing</h2>
+					<div class="share-buttons">
+						<button
+							@click="copy_link(track.external_urls.spotify)"
+						>
+							Copy Track Link
+						</button>
+						<button
+							@click="copy_link(track.album.external_urls.spotify)"
+						>
+							Copy Album Link
+						</button>
+						<button
+							v-for="artist in track.artists"
+							:key="artist.uri"
+							@click="copy_link(artist.external_urls.spotify)"
+						>
+							Copy {{ artist.name }}'s Link
+						</button>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: `ShareTrack`,
+	props: {
+		track: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {return {
+		content: false,
+		container: false,
+	}},
+	computed: {},
+	mounted() {
+		this.$nextTick(function() {
+			this.container = true;
+		});
+	}
+}
+</script>
+
+<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);
+	padding: 0 15px 15px 15px;
+	text-align: center;
+	max-height: 85%;
+	z-index: 11;
+	width: 90%;
+}
+
+.share-buttons {
+	flex-direction: column;
+	align-items: center;
+	display: flex;
+}
+
+.share-buttons > button {
+	margin-bottom: 10px;
+	width: 64%;
+}
+
+@media only screen and (min-width: 768px) {
+	.modal {
+		width: 50%;
+		max-height: 75%;
+	}
+}
+</style>
\ No newline at end of file

From 33cf7db1887260465742286a8832288ce45d675b Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:13:25 -0600
Subject: [PATCH 07/12] Finish track V2

---
 src/components/cards/Track.vue | 77 +++++++++++++++++++++++++---------
 1 file changed, 57 insertions(+), 20 deletions(-)

diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 13befb9..5c9c958 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="card" @click="show_track_info = true">
+	<div class="card">
 		<div class="image">
 			<img
 				v-if="item.album.images.length !== 0"
@@ -22,25 +22,36 @@
 			</div>
 		</div>
 		<div class="bottom-bar">
-			<div class="popularity">
+			<button
+				class="popularity"
+				@click="show_pop_modal = true"
+			>
 				{{ item.popularity }}
-			</div>
-			<div class="share">
+			</button>
+			<button
+				class="share"
+				name="Share"
+				@click="show_share_modal = true"
+			>
 				<icon
 					type="share"
-					:size="25"
-					:inner-size="25"
+					:size="22"
+					:inner-size="22"
 					:primary="css_var('--card-bottom-row-icon-colour')"
 				/>
-			</div>
-			<div class="information">
+			</button>
+			<button
+				class="information"
+				name="Track Information"
+				@click="show_track_info = true"
+			>
 				<icon
 					type="info"
-					:size="25"
-					:inner-size="25"
+					:size="22"
+					:inner-size="22"
 					:primary="css_var('--card-bottom-row-icon-colour')"
 				/>
-			</div>
+			</button>
 			<div class="duration">
 				{{ duration }}
 			</div>
@@ -142,7 +153,7 @@ img {
 .track-info {
 	justify-content: center;
 	flex-direction: column;
-	margin-bottom: 1.25em;
+	margin-bottom: 25px;
 	display: flex;
 	height: 100%;
 }
@@ -163,40 +174,66 @@ img {
 	color: var(--card-bottom-row-text-colour);
 	justify-content: space-between;
 	position: absolute;
-	padding-right: 5%;
-	padding-left: 5%;
 	display: flex;
-	width: 90%;
+	width: 100%;
 	bottom: 0;
 }
+.bottom-bar > button {
+	background-color: var(--card-bottom-row-background);
+	color: var(--card-bottom-row-text-colour);
+	font-size: initial;
+	padding: 0;
+}
+
+
+.popularity { cursor: pointer; }
+.popularity:hover { background-color: var(--card-bottom-row-hover-background); }
+
+.information, .share {
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+}
+.information:hover, .share:hover {
+	background-color: var(--card-bottom-row-hover-background);
+}
+
 
 /* Setting the growth and alignments of the bottom bar buttons */
-.bottom-bar > div {
+.bottom-bar > * {
 	border-color: var(--card-bottom-row-divider-colour);
 	padding-bottom: 2px;
 	padding-top: 2px;
 }
 .bottom-bar > :nth-child(1) {
+	border-radius: 0 0 0 var(--corner-rounding);
 	border-right-style: solid;
-	border-width: 2px;
+	border-right-width: 2px;
+	padding-left: 5%;
+	text-align: left;
 	flex-grow: 1;
 }
 .bottom-bar > :nth-child(2) {
+	border-radius: 0;
 	border-right-style: solid;
+	border-right-width: 1px;
 	text-align: center;
-	border-width: 1px;
 	flex-grow: 2;
 }
 .bottom-bar > :nth-child(3) {
+	border-radius: 0;
 	border-left-style: solid;
+	border-left-width: 1px;
 	text-align: center;
-	border-width: 1px;
 	flex-grow: 2;
 }
 .bottom-bar > :nth-child(4) {
+	border-radius: 0 0 var(--corner-rounding) 0;
 	border-left-style: solid;
+	border-left-width: 2px;
+	padding-right: 5%;
 	text-align: right;
-	border-width: 2px;
 	flex-grow: 1;
 }
 

From 9c68ac5e8a61f54412010cb6e120f6cd664b2421 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:14:12 -0600
Subject: [PATCH 08/12] Add span styles to the SVG wrapping span and change
 share logo

---
 src/components/Icon.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 872a905..325f892 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -88,7 +88,7 @@
 				/>
 			</svg>
 		</span>
-		<span v-if="type === 'share'">
+		<span v-if="type === 'share'" :style="span_styles">
 			<svg
 				:width="innerSize"
 				:height="innerSize"
@@ -106,7 +106,7 @@
 				<path
 					fill-rule="evenodd"
 					clip-rule="evenodd"
-					d="M21 11.0973L11.649 2V7.88894C9.79571 8.47147 7.64026 9.4555 5.92961 11.1081C2.12878 14.7798 3.25909 22 3.25909 22C3.25909 22 4.96118 17.4943 9.72838 15.4683C10.4461 15.1633 11.0837 14.9656 11.649 14.8498V20.1945L21 11.0973ZM12.8057 4.83626L19.3342 11.1398L12.8057 17.4398V13.4238C12.0637 13.3957 10.804 13.5736 8.78581 14.445C4.9332 16.1084 3.808 18.9049 3.808 18.9049C3.808 18.9049 4.31903 14.445 7.22448 11.7612C9.22285 9.91537 11.5484 9.30242 12.8057 9.09961V4.83626Z"
+					d="M17 10C19.2091 10 21 8.20914 21 6C21 3.79086 19.2091 2 17 2C14.7909 2 13 3.79086 13 6C13 6.44376 13.0723 6.87064 13.2057 7.26952L9.90706 9.25245C9.17789 8.48121 8.14514 8 7 8C4.79086 8 3 9.79086 3 12C3 14.2091 4.79086 16 7 16C8.14608 16 9.17958 15.518 9.90885 14.7457L13.2074 16.7252C13.0729 17.1256 13 17.5543 13 18C13 20.2091 14.7909 22 17 22C19.2091 22 21 20.2091 21 18C21 15.7909 19.2091 14 17 14C15.8535 14 14.8197 14.4823 14.0904 15.2551L10.7922 13.2758C10.927 12.8751 11 12.4461 11 12C11 11.5527 10.9266 11.1226 10.7911 10.721L14.0861 8.74027C14.8156 9.51576 15.8513 10 17 10ZM19.8 18C19.8 19.5464 18.5464 20.8 17 20.8C15.4536 20.8 14.2 19.5464 14.2 18C14.2 16.4536 15.4536 15.2 17 15.2C18.5464 15.2 19.8 16.4536 19.8 18ZM19.8 6C19.8 7.5464 18.5464 8.8 17 8.8C15.4536 8.8 14.2 7.5464 14.2 6C14.2 4.4536 15.4536 3.2 17 3.2C18.5464 3.2 19.8 4.4536 19.8 6ZM9.8 12C9.8 13.5464 8.5464 14.8 7 14.8C5.4536 14.8 4.2 13.5464 4.2 12C4.2 10.4536 5.4536 9.2 7 9.2C8.5464 9.2 9.8 10.4536 9.8 12Z"
 					:fill="primary"
 				/>
 			</svg>

From 24328f1a04e47f29509f57fdf32291bc11eab8b3 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:14:48 -0600
Subject: [PATCH 09/12] Add hover colour for the bottom bar buttons.

---
 src/css/theme/dark.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/css/theme/dark.css b/src/css/theme/dark.css
index cc75c13..f02912d 100644
--- a/src/css/theme/dark.css
+++ b/src/css/theme/dark.css
@@ -63,6 +63,7 @@
 
 	--card-bottom-row-text-colour: var(--accent2);
 	--card-bottom-row-background: var(--on-card-colour);
+	--card-bottom-row-hover-background: #414141;
 	--card-bottom-row-divider-colour: #000000;
 	--card-bottom-row-icon-colour: var(--card-bottom-row-text-colour);
 }
\ No newline at end of file

From 1c8923f5fa675bb67275d8e6053ab8b22af5ebf4 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:28:39 -0600
Subject: [PATCH 10/12] Add a hover colour for all buttons.

---
 src/css/inputs.css     | 5 ++++-
 src/css/theme/dark.css | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/css/inputs.css b/src/css/inputs.css
index 505058c..eb4c0f9 100644
--- a/src/css/inputs.css
+++ b/src/css/inputs.css
@@ -8,7 +8,10 @@ button {
 	font-size: larger;
 	outline: none;
 }
-button:hover { cursor: pointer; }
+button:hover {
+	background-color: var(--button-hover-background);
+	cursor: pointer;
+}
 button[disabled] {
 	background-color: var(--button-disabled-background);
 	color: var(--button-disabled-text);
diff --git a/src/css/theme/dark.css b/src/css/theme/dark.css
index f02912d..bd15283 100644
--- a/src/css/theme/dark.css
+++ b/src/css/theme/dark.css
@@ -38,6 +38,7 @@
 	--input-text: var(--spotify-green);
 	--input-active-border: var(--accent2);
 
+	--button-hover-background: var(--accent2);
 	--button-background: var(--spotify-green);
 	--button-disabled-background: #09682a;
 	--button-text: var(--spotify-black);

From 0c9d94a6bd80d4a96e7e7a315cd050913ec6a42a Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:38:09 -0600
Subject: [PATCH 11/12] Add the tooltips back to the bottom row

---
 src/components/cards/Track.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/cards/Track.vue b/src/components/cards/Track.vue
index 5c9c958..382814d 100644
--- a/src/components/cards/Track.vue
+++ b/src/components/cards/Track.vue
@@ -24,6 +24,7 @@
 		<div class="bottom-bar">
 			<button
 				class="popularity"
+				v-tooltip="popularity_tooltip"
 				@click="show_pop_modal = true"
 			>
 				{{ item.popularity }}
@@ -31,6 +32,7 @@
 			<button
 				class="share"
 				name="Share"
+				v-tooltip="share_tooltip"
 				@click="show_share_modal = true"
 			>
 				<icon
@@ -43,6 +45,7 @@
 			<button
 				class="information"
 				name="Track Information"
+				v-tooltip="info_tooltip"
 				@click="show_track_info = true"
 			>
 				<icon
@@ -52,7 +55,10 @@
 					:primary="css_var('--card-bottom-row-icon-colour')"
 				/>
 			</button>
-			<div class="duration">
+			<div
+				class="duration"
+				v-tooltip="duration_tooltip"
+			>
 				{{ duration }}
 			</div>
 		</div>
@@ -97,6 +103,8 @@ export default {
 	data() { return {
 		duration_tooltip: `Song Duration`,
 		popularity_tooltip: `Song Popularity`,
+		info_tooltip: `Audio Features`,
+		share_tooltip: `Share`,
 		show_pop_modal: false,
 		show_track_info: false,
 		show_share_modal: false,

From 6beda918c318386a4041b1693385a941a50548c8 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 23 Aug 2020 01:39:03 -0600
Subject: [PATCH 12/12] Add mobile style for the buttons in the share modal

---
 src/components/modals/ShareTrack.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/modals/ShareTrack.vue b/src/components/modals/ShareTrack.vue
index b202aa1..c483c71 100644
--- a/src/components/modals/ShareTrack.vue
+++ b/src/components/modals/ShareTrack.vue
@@ -87,7 +87,7 @@ export default {
 
 .share-buttons > button {
 	margin-bottom: 10px;
-	width: 64%;
+	width: 90%;
 }
 
 @media only screen and (min-width: 768px) {
@@ -95,5 +95,8 @@ export default {
 		width: 50%;
 		max-height: 75%;
 	}
+	.share-buttons > button {
+		width: 64%;
+	}
 }
 </style>
\ No newline at end of file