fix: hide start learning button if self enrollment is disabled

frontend/src/components/CourseCardOverlay.vue

@@ -48,12 +48,13 @@
 					</span>
 				</Button>
 			</router-link>
-			<div
+			<Badge
 				v-else-if="course.data.disable_self_learning"
-				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
+				theme="blue"
+				size="lg"
 			>
 				{{ __('Contact the Administrator to enroll for this course.') }}
-			</div>
+			</Badge>
 			<Button
 				v-else
 				@click="enrollStudent()"
@@ -140,7 +141,7 @@
 <script setup>
 import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource, Tooltip } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'

frontend/src/pages/Lesson.vue

@@ -31,9 +31,21 @@
 							)
 						}}
 					</div>
-					<Button v-if="user.data" @click="enrollStudent()" variant="solid">
+					<Button
+						v-if="user.data && !lesson.data.disable_self_learning"
+						@click="enrollStudent()"
+						variant="solid"
+					>
 						{{ __('Start Learning') }}
 					</Button>
+					<Badge
+						theme="blue"
+						size="lg"
+						v-else-if="lesson.data.disable_self_learning"
+						class="mt-2"
+					>
+						{{ __('Contact the Administrator to enroll for this course.') }}
+					</Badge>
 					<Button v-else @click="redirectToLogin()">
 						<template #prefix>
 							<LogIn class="w-4 h-4 stroke-1" />
@@ -254,6 +266,7 @@
 <script setup>
 import {
 	createResource,
+	Badge,
 	Breadcrumbs,
 	Button,
 	Tooltip,