From 9814abf55f56fa555a5f5f34b0c63b3b1820f840 Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Wed, 4 Feb 2026 16:04:28 +0530
Subject: [PATCH] fix: dark mode issues of course dashboard

---
 frontend/src/components/NumberChartGraph.vue  |  2 +-
 .../src/pages/Courses/CourseDashboard.vue     |  6 +--
 .../pages/Courses/StudentCourseProgress.vue   | 46 +++++++++++++++----
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/NumberChartGraph.vue b/frontend/src/components/NumberChartGraph.vue
index 51c771c3..67fdd508 100644
--- a/frontend/src/components/NumberChartGraph.vue
+++ b/frontend/src/components/NumberChartGraph.vue
@@ -5,7 +5,7 @@
 		</div>
 		<div class="flex items-center space-x-2">
 			<slot name="prefix" />
-			<div class="font-semibold text-2xl">
+			<div class="font-semibold text-ink-gray-9 text-2xl">
 				{{ value }}
 			</div>
 			<slot name="suffix" />
diff --git a/frontend/src/pages/Courses/CourseDashboard.vue b/frontend/src/pages/Courses/CourseDashboard.vue
index 5bb8680f..186c29f1 100644
--- a/frontend/src/pages/Courses/CourseDashboard.vue
+++ b/frontend/src/pages/Courses/CourseDashboard.vue
@@ -22,7 +22,7 @@
 		<div class="grid grid-cols-[2fr_1fr] gap-5 items-start">
 			<div v-if="course.data?.enrollments" class="border rounded-lg py-3 px-4">
 				<div class="flex items-center justify-between mb-3">
-					<div class="text-lg font-semibold">
+					<div class="text-lg text-ink-gray-9 font-semibold">
 						{{ __('Students') }}
 					</div>
 					<div class="flex items-center space-x-2">
@@ -132,7 +132,7 @@
 					<div class="grid grid-cols-[2fr_1fr] items-center justify-between">
 						<div class="flex flex-col space-y-4 flex-1 text-sm">
 							<div
-								class="flex items-center"
+								class="flex items-center text-ink-gray-7"
 								v-for="row in chartDetails.data?.progress_distribution"
 							>
 								<div
@@ -211,7 +211,7 @@
 							class="!w-32"
 						/>
 					</div>
-					<div class="divide-y max-h-[43vh] overflow-y-auto">
+					<div class="divide-y max-h-[43vh] text-ink-gray-7 overflow-y-auto">
 						<div
 							v-for="progress in lessonProgress.data"
 							class="flex justify-between text-sm py-2 my-1"
diff --git a/frontend/src/pages/Courses/StudentCourseProgress.vue b/frontend/src/pages/Courses/StudentCourseProgress.vue
index 2c709114..4f531f21 100644
--- a/frontend/src/pages/Courses/StudentCourseProgress.vue
+++ b/frontend/src/pages/Courses/StudentCourseProgress.vue
@@ -2,18 +2,18 @@
 	<Dialog
 		v-model="show"
 		:options="{
-			title: __('Course Progress'),
-			size: '4xl',
+			title: __('Student Progress'),
+			size: hasAssessmentData ? '3xl' : 'xl',
 		}"
 	>
 		<template #body-content>
-			<div class="text-base">
-				<div class="flex justify-between mb-5">
-					<div class="flex space-x-2">
+			<div class="text-base text-ink-gray-9 max-h-[70vh] overflow-y-auto">
+				<div class="flex justify-between mb-5 px-2">
+					<div class="flex items-center space-x-2">
 						<Avatar
 							:image="student?.member_image"
 							:label="student?.member_name"
-							size="lg"
+							size="xl"
 						/>
 						<div>
 							<div class="font-semibold">
@@ -35,8 +35,11 @@
 					</div>
 				</div>
 
-				<div class="grid grid-cols-2 gap-5">
-					<div v-if="lessons.data" class="border rounded-lg px-3 pt-3">
+				<div class="grid gap-5" :class="hasAssessmentData ? 'grid-cols-2' : ''">
+					<div
+						v-if="lessons.data"
+						class="border border-outline-gray-1 rounded-lg px-3 pt-3 max-h-[60vh] overflow-y-auto"
+					>
 						<div>
 							<div class="text-ink-gray-5 mb-5">
 								{{ __('Lesson Progress') }}
@@ -54,9 +57,18 @@
 									{{ progress.title }}
 								</span>
 							</div>
-							<Badge :theme="getLessonStatusTheme(progress)">
+							<Tooltip
+								v-if="getLessonStatus(progress) == 'Complete'"
+								:text="__('Complete')"
+							>
+								<Check class="text-ink-green-3 size-4" />
+							</Tooltip>
+							<Tooltip v-else :text="__('Pending')">
+								<Minus class="text-ink-amber-2 size-4" />
+							</Tooltip>
+							<!-- <Badge :theme="getLessonStatusTheme(progress)">
 								{{ getLessonStatus(progress) }}
-							</Badge>
+							</Badge> -->
 						</div>
 					</div>
 
@@ -140,8 +152,11 @@ import {
 	createListResource,
 	createResource,
 	Dialog,
+	Tooltip,
 } from 'frappe-ui'
 import ProgressBar from '@/components/ProgressBar.vue'
+import { computed } from 'vue'
+import { Check, Minus } from 'lucide-vue-next'
 
 const show = defineModel<boolean>({ required: true, default: false })
 
@@ -191,4 +206,15 @@ const getAssessmentStatusTheme = (status: string) => {
 	else if (status.includes('Fail')) return 'red'
 	else return 'orange'
 }
+
+const hasAssessmentData = computed(() => {
+	return (
+		(assessmentProgress.data?.quizzes &&
+			assessmentProgress.data.quizzes.length > 0) ||
+		(assessmentProgress.data?.assignments &&
+			assessmentProgress.data.assignments.length > 0) ||
+		(assessmentProgress.data?.exercises &&
+			assessmentProgress.data.exercises.length > 0)
+	)
+})
 </script>