feat: read only mode

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/components/DesktopLayout.vue

@@ -8,6 +8,18 @@
 					<AppSidebar />
 				</div>
 				<div class="w-full overflow-auto" id="scrollContainer">
+					<div
+						v-if="readOnlyMode"
+						class="right-0 top-0 mb-3 bg-surface-gray-2 py-3 text-sm text-ink-gray-5"
+					>
+						<div class="mx-auto px-10">
+							{{
+								__(
+									'This site is running in read-only mode. Full functionality will be restored soon.'
+								)
+							}}
+						</div>
+					</div>
 					<slot />
 				</div>
 			</div>
@@ -16,4 +28,6 @@
 </template>
 <script setup>
 import AppSidebar from './AppSidebar.vue'
+
+const readOnlyMode = window.read_only_mode
 </script>