fix: ui issues

frontend/src/components/CourseOutline.vue

@@ -16,13 +16,13 @@
 						}"
 						class="h-5 w-5 text-gray-900 stroke-1 mr-2"
 					/>
-					<div class="text-base">
+					<div class="text-base font-medium">
 						{{ chapter.title }}
 					</div>
 				</DisclosureButton>
 				<DisclosurePanel class="pb-2">
 					<div v-for="lesson in chapter.lessons" :key="lesson.name">
-						<div class="outline-lesson mb-2 pl-9">
+						<div class="outline-lesson my-2 pl-9">
 							<router-link
 								:to="{
 									name: 'Lesson',
@@ -91,6 +91,6 @@ const openChapter = (index) => {
 <style>
 .outline-lesson:has(.router-link-active) {
 	background-color: theme('colors.gray.100');
-	padding: 0.5rem 0 0.5rem 2rem;
+	padding: 0.5rem 0 0.5rem 2.25rem;
 }
 </style>

frontend/src/components/JobCard.vue

@@ -0,0 +1,45 @@
+<template>
+	<div class="flex border rounded-md p-2 mb-4 h-full">
+		<div class="mr-4">
+			<img
+				:src="job.company_logo"
+				class="w-11 h-11 rounded-lg object-contain"
+			/>
+		</div>
+		<div>
+			<div class="text-lg font-semibold mb-2">
+				{{ job.job_title }}
+			</div>
+			<div class="flex items-center mb-2 text-gray-700">
+				<div class="mr-5">
+					{{ job.company_name }}
+				</div>
+				<div class="flex items-center">
+					<MapPin class="h-4 w-4 mr-1 stroke-1.5" />
+					<span class="text-gray-700">
+						{{ job.location }}
+					</span>
+				</div>
+			</div>
+			<div class="flex items-center">
+				<Badge :label="job.type" theme="green" />
+				<div class="ml-5">
+					{{ dayjs(job.creation).format('DD MMM YYYY') }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup>
+import { MapPin } from 'lucide-vue-next'
+import { Badge } from 'frappe-ui'
+import { inject } from 'vue'
+
+const dayjs = inject('$dayjs')
+const props = defineProps({
+	job: {
+		type: Object,
+		default: null,
+	},
+})
+</script>