feat(Activities): if type is editing a station's theme, show the theme colour in the ActivityItem

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

frontend/src/components/ui/ActivityItem.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="item activity-item universal-item">
-		<div class="thumbnail">
+		<div :class="[theme, 'thumbnail']">
 			<img
 				v-if="activity.payload.thumbnail"
 				:src="activity.payload.thumbnail"
@@ -39,6 +39,11 @@ export default {
 			default: () => {}
 		}
 	},
+	data() {
+		return {
+			theme: "blue"
+		};
+	},
 	computed: {
 		formattedMessage() {
 			const { songId, playlistId, stationId } = this.activity.payload;
@@ -92,6 +97,13 @@ export default {
 			return message;
 		}
 	},
+	mounted() {
+		if (this.activity.type === "station__edit_theme")
+			this.theme = this.activity.payload.message.replace(
+				/to\s(\w+)/g,
+				"$1"
+			);
+	},
 	methods: {
 		getIcon() {
 			const icons = {
@@ -170,7 +182,34 @@ export default {
 		min-width: 70.5px;
 		max-width: 70.5px;
 		height: 70.5px;
-		background-color: var(--primary-color);
+
+		&.red {
+			background-color: var(--red);
+		}
+
+		&.green {
+			background-color: var(--green);
+		}
+
+		&.blue {
+			background-color: var(--primary-color);
+		}
+
+		&.orange {
+			background-color: var(--orange);
+		}
+
+		&.yellow {
+			background-color: var(--yellow);
+		}
+
+		&.purple {
+			background-color: var(--purple);
+		}
+
+		&.teal {
+			background-color: var(--teal);
+		}
 
 		.activity-type-icon {
 			position: absolute;