fix: dark mode for course and batch tags

frontend/src/components/BatchCard.vue

@@ -1,27 +1,23 @@
 <template>
 	<div
-		class="flex flex-col border hover:bg-surface-gray-2 rounded-md p-4 h-full"
+		class="flex flex-col border-2 hover:bg-surface-gray-2 rounded-md p-4 h-full"
 		style="min-height: 150px"
 	>
 		<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
 			{{ batch.title }}
 		</div>
-		<Badge
-			v-if="batch.seat_count && batch.seats_left > 0"
-			theme="green"
-			class="self-start mb-2"
-		>
+		<div v-if="batch.seat_count && batch.seats_left > 0" class="text-xs bg-green-200 text-green-800 self-start px-2 py-0.5 rounded-md">
 			{{ batch.seats_left }}
-			<span v-if="batch.seats_left > 1">{{ __('Seats Left') }}</span
-			><span v-else-if="batch.seats_left == 1">{{ __('Seat Left') }}</span>
-		</Badge>
-		<Badge
-			v-else-if="batch.seat_count && batch.seats_left <= 0"
-			theme="red"
-			class="self-start mb-2"
-		>
+			<span v-if="batch.seats_left > 1">
+				{{ __('Seats Left') }}
+			</span>
+			<span v-else-if="batch.seats_left == 1">
+				{{ __('Seat Left') }}
+			</span>
+		</div>
+		<div v-else-if="batch.seat_count && batch.seats_left <= 0" class="text-xs bg-red-200 text-red-900 self-start px-2 py-0.5 rounded-md">
 			{{ __('Sold Out') }}
-		</Badge>
+		</div>
 		<div class="short-introduction text-sm text-ink-gray-7">
 			{{ batch.description }}
 		</div>

frontend/src/components/BatchOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="batch.data" class="border rounded-md p-5 lg:w-72">
+	<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
 		<Badge
 			v-if="batch.data.seat_count && seats_left > 0"
 			theme="green"

frontend/src/components/CourseCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="course.title"
-		class="flex flex-col h-full rounded-md shadow-md border overflow-auto"
+		class="flex flex-col h-full rounded-md shadow-md border-2 overflow-auto"
 		style="min-height: 350px"
 	>
 		<div
@@ -15,14 +15,9 @@
 				<Badge v-if="course.featured" variant="subtle" theme="green" size="md">
 					{{ __('Featured') }}
 				</Badge>
-				<Badge
-					variant="solid"
-					theme="gray"
-					size="md"
-					v-for="tag in course.tags"
-				>
+				<div v-for="tag in course.tags" class="text-xs bg-white text-gray-800 px-2 py-0.5 rounded-md">
 					{{ tag }}
-				</Badge>
+				</div>
 			</div>
 			<div v-if="!course.image" class="image-placeholder">
 				{{ course.title[0] }}

frontend/src/components/CourseCardOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="border rounded-md min-w-80">
+	<div class="border-2 rounded-md min-w-80">
 		<iframe
 			v-if="course.data.video_link"
 			:src="video_link"

frontend/src/components/JobCard.vue

@@ -3,7 +3,7 @@
 		<Avatar :image="job.company_logo" :label="job.job_title" size="2xl" />
 		<div class="flex flex-col space-y-2 flex-1">
 			<div class="flex items-center justify-between">
-				<span class="font-semibold">
+				<span class="font-semibold text-ink-gray-9">
 					{{ job.job_title }}
 				</span>
 			</div>