Update the artist card to the V2 design

src/components/cards/Artist.vue

@@ -4,50 +4,70 @@
 			<img
 				v-if="item.images.length !== 0"
 				:src="item.images[0].url"
-				:alt="`${item.name} profile image`"
+				:alt="`${item.name}'s artist image`"
 			>
 			<icon
 				v-else
 				type="notes"
-				:size="230"
+				:size="200"
-				:border="115"
+				:border="100"
 				:primary="'--missing-picture-foreground'"
 				:background="'--missing-picture-background'"
 			/>
 		</div>
 		<div class="artist-info">
-			<div class="title">{{ item.name }}</div>
+			<div class="title">
-			<div class="subtitle">{{ genres }}</div>
+				{{ item.name }}
+			</div>
+			<div class="subtitle">
+				{{ item.genres.map(x => x.toTitleCase()).join(`, `) }}
+			</div>
 		</div>
-		<div
+		<div class="bottom-bar">
-			v-tooltip.auto="popularity_tooltip"
+			<button
-			class="popularity corner"
+				v-tooltip="popularity_tooltip"
-			@click.self="show_pop_modal = true"
+				class="popularity"
-		>
+				@click="show_pop_modal = true"
-			{{ item.popularity }}
+			>
-		</div>
+				{{ item.popularity }}
-		<div
+			</button>
-			v-tooltip.auto="followers_tooltip"
+			<button
-			class="followers corner"
+				v-tooltip="share_tooltip"
-		>
+				class="share"
-			{{ item.followers.total.toLocaleString() }}
+				name="Share"
+				@click="copy_text(item.external_urls.spotify)"
+			>
+				<icon
+					type="share"
+					:size="22"
+					:inner-size="22"
+					:primary="'--card-bottom-row-icon-colour'"
+				/>
+			</button>
 		</div>
 		<PopularityModal
 			v-if="show_pop_modal"
 			@close="show_pop_modal = 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 ShareModal from "../modals/ShareTrack";
+import PopularityModal from "../modals/PopularityInfo";
 
 export default {
-	name: `ArtistCard`,
+	name: `TrackCard`,
 	components: {
 		PopularityModal: PopularityModal,
+		Sharing: ShareModal,
 		icon: Icon,
 	},
 	props: {
@@ -57,19 +77,12 @@ export default {
 		}
 	},
 	data() { return {
-		followers_tooltip: `Total Followers`,
 		popularity_tooltip: `Artist Popularity`,
+		share_tooltip: `Click to Copy Artist Link`,
 		show_pop_modal: false,
+		show_share_modal: false,
 	}},
-	computed: {
+	computed: {},
-		genres() {
-			let genres = [];
-			for (var genre of this.item.genres) {
-				genres.push(genre.toTitleCase());
-			};
-			return genres.join(`, `);
-		}
-	},
 	methods: {}
 }
 </script>
@@ -81,13 +94,13 @@ export default {
 	border-width: var(--card-border-width);
 	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;
 	position: relative;
 	margin: 5px auto;
 	display: flex;
+	padding: 10px;
 	width: 90%;
 }
 
@@ -96,7 +109,15 @@ img {
 	--size: 230px;
 	width: var(--size);
 	height: var(--size);
-	border-radius: var(--corner-rounding);
+	border-radius: 5px;
+}
+
+.artist-info {
+	justify-content: center;
+	flex-direction: column;
+	margin-bottom: 25px;
+	display: flex;
+	height: 100%;
 }
 
 .title {
@@ -109,27 +130,57 @@ img {
 	font-size: smaller;
 }
 
-.corner {
+.bottom-bar {
-	background-color: var(--on-card-colour);
+	border-radius: 0 0 var(--corner-rounding) var(--corner-rounding);
-	color: var(--on-card-text);
+	background-color: var(--card-bottom-row-background);
+	color: var(--card-bottom-row-text-colour);
+	justify-content: space-between;
 	position: absolute;
-	padding: 1px 6px;
+	display: flex;
+	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 {
+
-	border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding);
+.popularity { cursor: pointer; }
-	bottom: 0;
+.popularity:hover { background-color: var(--card-bottom-row-hover-background); }
-	left: 0;
+
-}
+.share {
-.popularity:hover {
+	justify-content: center;
+	align-items: center;
 	cursor: pointer;
+	display: flex;
+}
+.share:hover {
+	background-color: var(--card-bottom-row-hover-background);
 }
 
-.followers {
+
-	border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0;
+/* Setting the growth and alignments of the bottom bar buttons */
-	bottom: 0;
+.bottom-bar > * {
-	right: 0;
+	border-color: var(--card-bottom-row-divider-colour);
+	padding-bottom: 2px;
+	padding-top: 2px;
 }
+.bottom-bar > :first-child {
+	border-radius: 0 0 0 var(--corner-rounding);
+	border-right-style: solid;
+	border-right-width: 1px;
+	flex-grow: 1;
+}
+.bottom-bar > :last-child {
+	border-radius: 0 0 var(--corner-rounding) 0;
+	border-left-style: solid;
+	border-left-width: 1px;
+	flex-grow: 1;
+}
+
 
 @media only screen and (min-width: 768px) {
 	.card {