fix: minor UI issues

frontend/src/components/CourseReviews.vue

@@ -8,9 +8,7 @@
 			{{ __('Write a Review') }}
 		</Button>
 		<div class="flex items-center font-semibold text-2xl">
-			<Star class="h-6 w-6 stroke-1 text-gray-50 fill-orange-500 mr-1" />
+			{{ __('Student Reviews') }}
-			{{ avg_rating }} {{ __('ratings and ') }} {{ reviews.data.length }}
-			{{ __('reviews') }}
 		</div>
 		<div class="grid gap-8 mt-10">
 			<div v-for="(review, index) in reviews.data">

frontend/src/components/JobCard.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="flex rounded px-2 py-2.5 hover:bg-gray-100">
+	<div class="flex rounded p-1 lg:px-2 lg:py-2.5 hover:bg-gray-100">
-		<div class="flex w-2/5">
+		<div class="flex w-3/5 md:w-2/5">
 			<img
 				:src="job.company_logo"
 				class="w-12 h-12 rounded-lg object-contain mr-4"
@@ -18,7 +18,9 @@
 		<div class="flex justify-end w-1/5 text-gray-700">
 			{{ job.location.replace(',', '').split(' ')[0] }}
 		</div>
-		<div class="flex justify-end w-1/5 text-gray-700">
+		<div
+			class="flex justify-end w-1/5 text-gray-700 text-right hidden md:block"
+		>
 			{{ job.type }}
 		</div>
 		<div class="flex justify-end w-1/5 text-sm text-gray-700 text-right">

frontend/src/components/MobileLayout.vue

@@ -18,7 +18,7 @@
 				@click="handleClick(tab)"
 			>
 				<component
-					:is="tab.icon"
+					:is="icons[tab.icon]"
 					class="h-6 w-6 stroke-1.5"
 					:class="[isActive(tab) ? 'text-gray-900' : 'text-gray-600']"
 				/>
@@ -32,6 +32,7 @@ import { useRouter } from 'vue-router'
 import { computed } from 'vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/user'
+import * as icons from 'lucide-vue-next'
 import { LogOut, LogIn, UserRound } from 'lucide-vue-next'
 
 const { logout, user } = sessionStore()
@@ -45,7 +46,7 @@ const tabs = computed(() => {
 	if (user) {
 		links.push({
 			label: 'Profile',
-			icon: UserRound,
+			icon: 'UserRound',
 			activeFor: [
 				'Profile',
 				'ProfileAbout',
@@ -56,12 +57,12 @@ const tabs = computed(() => {
 		})
 		links.push({
 			label: 'Log out',
-			icon: LogOut,
+			icon: 'LogOut',
 		})
 	} else {
 		links.push({
 			label: 'Log in',
-			icon: LogIn,
+			icon: 'LogIn',
 		})
 	}
 	return links

frontend/src/pages/CourseDetail.vue

@@ -70,11 +70,7 @@
 						class="course-description"
 					></div>
 					<div class="mt-10">
-						<CourseOutline
+						<CourseOutline :courseName="course.data.name" :showOutline="true" />
-							:courseName="course.data.name"
-							:showOutline="true"
-							title="Course Outline"
-						/>
 					</div>
 					<CourseReviews
 						:courseName="course.data.name"

frontend/src/pages/Jobs.vue

@@ -27,7 +27,7 @@
 			</div>
 		</header>
 		<div v-if="jobs.data?.length">
-			<div class="divide-y w-3/4 mx-auto p-5">
+			<div class="divide-y lg:w-3/4 mx-auto p-5">
 				<div v-for="job in jobs.data">
 					<router-link
 						:to="{