From 092d310c5c56dfd9af9de553ddbc6f86b4c957bd Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 2 Jan 2023 16:01:50 +1100
Subject: Visually distinguish 'discover' events

---
 src/components/TimeLine.vue | 4 +++-
 src/store.ts                | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 1e78a87..b50141a 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -48,7 +48,7 @@
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
 		<!-- Image -->
-		<div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
+		<div class="rounded-full" :style="eventImgStyles(id)"></div>
 		<!-- Label -->
 		<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
 			{{idToEvent.get(id)!.title}}
@@ -1172,6 +1172,8 @@ function eventImgStyles(eventId: number){
 		height: store.eventImgSz + 'px',
 		backgroundImage: `url(${getImagePath(event.imgId)})`,
 		backgroundSize: 'cover',
+		borderColor: event.ctg == 'discovery' ? store.color.alt2 : store.color.altDark,
+		borderWidth: '1px',
 	};
 }
 function eventLineStyles(eventId: number){
diff --git a/src/store.ts b/src/store.ts
index 8b92c6f..bb29dba 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -18,7 +18,8 @@ export const useStore = defineStore('store', {
 			alt: '#fde047',      // yellow-300
 			altDark: '#eab308',  // yellow-500
 			altDark2: '#ca8a04', // yellow-600
-			altBg: '#6a5e2e'
+			altBg: '#6a5e2e',
+			alt2: '#2563eb',     // sky-600
 		};
 		return {
 			tickLen: 16,
-- 
cgit v1.2.3