MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2083 from raizasafeel/fix/dark-mode

Browse Source 
fix: dark mode ui
This commit is contained in:
Jannat Patel
2026-02-17 17:41:40 +05:30
committed by GitHub
parent 3cd9d89f0b 6e44da1993
commit 3b80ccd8db
27 changed files with 141 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Assignment.vue
View File

@@ -141,7 +141,7 @@
:uploadArgs="{
private: true,
}"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
@@ -190,7 +190,7 @@
:uploadArgs="{
private: true,
}"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
</div>

35
frontend/src/components/BatchCard.vue
View File

@@ -6,24 +6,26 @@
<div class="text-lg leading-5 font-semibold mb-2 text-ink-gray-9">
{{ batch.title }}
</div>
<div
<Badge
v-if="batch.seat_count && batch.seats_left > 0"
class="text-xs bg-green-100 text-green-700 self-start px-2 py-0.5 rounded-md"
>
{{ batch.seats_left }}
<span v-if="batch.seats_left > 1">
{{ __('Seats Left') }}
</span>
<span v-else-if="batch.seats_left == 1">
{{ __('Seat Left') }}
</span>
</div>
<div
variant="subtle"
theme="green"
size="md"
class="self-start"
:label="
batch.seats_left +
' ' +
(batch.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
"
/>
<Badge
v-else-if="batch.seat_count && batch.seats_left <= 0"
class="text-xs bg-red-100 text-red-700 self-start px-2 py-0.5 rounded-md"
>
{{ __('Sold Out') }}
</div>
variant="subtle"
theme="red"
size="md"
class="self-start"
:label="__('Sold Out')"
/>
<div class="short-introduction text-sm text-ink-gray-7">
{{ batch.description }}
</div>
@@ -70,6 +72,7 @@
</div>
</template>
<script setup>
import { Badge } from 'frappe-ui'
import { formatTime } from '@/utils'
import { Clock, Globe } from 'lucide-vue-next'
import DateRange from '@/components/Common/DateRange.vue'

35
frontend/src/components/BatchOverlay.vue
View File

@@ -1,28 +1,29 @@
<template>
<div v-if="batch.data" class="border-2 rounded-md p-5 lg:w-72">
<div
<Badge
v-if="batch.data.seat_count && batch.data.seats_left > 0"
class="text-sm bg-green-100 text-green-700 px-2 py-1 rounded-md"
variant="subtle"
theme="green"
size="md"
:class="
batch.data.amount || batch.data.courses.length
? 'float-right'
: 'w-fit mb-4'
"
>
{{ batch.data.seats_left }}
<span v-if="batch.data.seats_left > 1">
{{ __('Seats Left') }}
</span>
<span v-else-if="batch.data.seats_left == 1">
{{ __('Seat Left') }}
</span>
</div>
<div
:label="
batch.data.seats_left +
' ' +
(batch.data.seats_left > 1 ? __('Seats Left') : __('Seat Left'))
"
/>
<Badge
v-else-if="batch.data.seat_count && batch.data.seats_left <= 0"
class="text-xs bg-red-100 text-red-700 float-right px-2 py-0.5 rounded-md"
>
{{ __('Sold Out') }}
</div>
variant="subtle"
theme="red"
size="md"
class="float-right"
:label="__('Sold Out')"
/>
<div
v-if="batch.data.amount"
class="text-lg font-semibold mb-3 text-ink-gray-9"
@@ -136,7 +137,7 @@
</template>
<script setup>
import { inject, computed } from 'vue'
import { Button, createResource, toast } from 'frappe-ui'
import { Badge, Button, createResource, toast } from 'frappe-ui'
import {
BookOpen,
Clock,

10
frontend/src/components/Controls/Autocomplete.vue
View File

@@ -19,7 +19,7 @@
<!-- Dropdown -->
<ComboboxOptions
class="absolute z-20 mt-1 w-full rounded-lg bg-surface-white py-1 text-base border-2 shadow-lg"
class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal py-1 text-base border-2 border-outline-gray-modals shadow-lg"
>
<input
ref="search"
@@ -76,7 +76,10 @@
</div>
<!-- Footer -->
<div v-if="slots.footer" class="border-t p-1.5 pb-0.5">
<div
v-if="slots.footer"
class="border-t border-outline-gray-modals p-1.5 pb-0.5"
>
<slot
name="footer"
v-bind="{
@@ -100,7 +103,6 @@ import {
ComboboxButton,
} from '@headlessui/vue'
import { ref, computed, useAttrs, useSlots, watch, nextTick } from 'vue'
import { ChevronDown, X } from 'lucide-vue-next'
import { watchDebounced } from '@vueuse/core'
const props = defineProps({
@@ -225,7 +227,7 @@ const inputClasses = computed(() => {
const variantClasses = {
subtle:
'border border-gray-100 bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
'border border-outline-gray-modals bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
outline:
'border border-outline-gray-2 bg-surface-white placeholder-ink-gray-4 hover:border-outline-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3',
disabled: [

8
frontend/src/components/Controls/ChildTable.vue
View File

@@ -3,10 +3,10 @@
<div class="text-xs text-ink-gray-5 mb-2">
{{ label }}
</div>
<div class="overflow-visible border rounded-md">
<div class="overflow-visible border border-outline-gray-modals rounded-md">
<div class="overflow-x-auto">
<div
class="grid items-center space-x-4 p-2 border-b"
class="grid items-center space-x-4 p-2 border-b border-outline-gray-modals"
:style="{ gridTemplateColumns: getGridTemplateColumns() }"
>
<div
@@ -28,7 +28,7 @@
<input
v-if="showKey(key)"
v-model="row[key]"
class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
class="py-1.5 px-2 w-full border-none bg-transparent text-ink-gray-8 focus:ring-0 focus:border focus:border-outline-gray-3 focus:bg-surface-gray-2 rounded-md text-sm focus:outline-none"
/>
</template>
@@ -47,7 +47,7 @@
<div
v-if="menuOpenIndex === rowIndex"
ref="menuRef"
class="absolute right-0 w-32 z-50 bg-surface-white border border-outline-gray-1 rounded-md shadow-sm"
class="absolute right-0 w-32 z-50 bg-surface-modal border border-outline-gray-modals rounded-md shadow-sm"
:class="
rowIndex == (rows?.length ?? 0) - 1
? 'bottom-full mb-1'

2
frontend/src/components/Controls/MultiSelect.vue
View File

@@ -22,7 +22,7 @@
<ComboboxOptions
v-show="open"
static
class="absolute z-20 mt-1 w-full rounded-lg bg-surface-white border-2 max-h-[13rem] flex flex-col"
class="absolute z-20 mt-1 w-full rounded-lg bg-surface-modal border-2 border-outline-gray-modals max-h-[13rem] flex flex-col"
>
<div
class="flex-1 my-1 overflow-y-auto px-1.5"

34
frontend/src/components/Modals/AnnouncementModal.vue
View File

@@ -15,20 +15,18 @@
>
<template #body-content>
<div class="flex flex-col gap-4">
<div class="">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Subject') }}
<span class="text-ink-red-3">*</span>
</div>
<Input type="text" v-model="announcement.subject" />
</div>
<div class="">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Reply To') }}
<span class="text-ink-red-3">*</span>
</div>
<Input type="text" v-model="announcement.replyTo" />
</div>
<FormControl
:label="__('Subject')"
type="text"
v-model="announcement.subject"
:required="true"
/>
<FormControl
:label="__('Reply To')"
type="text"
v-model="announcement.replyTo"
:required="true"
/>
<div class="mb-4">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Announcement') }}
@@ -45,7 +43,13 @@
</Dialog>
</template>
<script setup>
import { Dialog, Input, TextEditor, createResource, toast } from 'frappe-ui'
import {
Dialog,
FormControl,
TextEditor,
createResource,
toast,
} from 'frappe-ui'
import { reactive } from 'vue'
const show = defineModel()

2
frontend/src/components/Modals/AssignmentForm.vue
View File

@@ -43,7 +43,7 @@
@change="(val) => (assignment.question = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
/>
</div>
</div>

2
frontend/src/components/Modals/DiscussionModal.vue
View File

@@ -26,7 +26,7 @@
@change="(val) => (topic.reply = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
</div>

2
frontend/src/components/Modals/EmailTemplateModal.vue
View File

@@ -67,7 +67,7 @@
'Dear {{ member_name }},\n\nYou have been enrolled in our upcoming batch {{ batch_name }}.\n\nThanks,\nFrappe Learning'
)
"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[18rem] overflow-y-auto"
/>
</div>
</div>

2
frontend/src/components/Modals/Question.vue
View File

@@ -31,7 +31,7 @@
@change="(val) => (question.question = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
<div class="grid grid-cols-2 gap-8 mt-4">

2
frontend/src/components/Quiz.vue
View File

@@ -205,7 +205,7 @@
@change="(val) => (possibleAnswer = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
<div class="flex items-center justify-between mt-4">

4
frontend/src/components/Settings/Categories.vue
View File

@@ -45,7 +45,7 @@
</div>
<div class="overflow-y-scroll">
<div class="divide-y space-y-2">
<div class="divide-y divide-outline-gray-modals space-y-2">
<div
v-for="(cat, index) in categories.data"
:key="cat.name"
@@ -53,7 +53,7 @@
>
<div
v-if="editing?.name !== cat.name"
class="flex items-center justify-between group text-sm"
class="flex items-center justify-between group text-sm text-ink-gray-9"
>
<div class="text-ink-gray-9" @dblclick="allowEdit(cat, index)">
{{ cat.category }}

2
frontend/src/components/Settings/Evaluators.vue
View File

@@ -32,7 +32,7 @@
</template>
</FormControl>
<div class="overflow-auto h-[60vh]">
<div class="divide-y">
<div class="divide-y divide-outline-gray-modals">
<div
v-for="evaluator in evaluators.data"
:key="evaluator.evaluator"

4
frontend/src/components/Settings/Members.vue
View File

@@ -32,7 +32,7 @@
</template>
</FormControl>
<div class="overflow-y-scroll h-[60vh]">
<ul class="divide-y">
<ul class="divide-y divide-outline-gray-modals">
<li
v-for="member in memberList"
class="flex items-center justify-between py-2 cursor-pointer"
@@ -58,7 +58,7 @@
</div>
</div>
<div
class="flex items-center space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
class="flex items-center text-ink-gray-9 space-x-1 bg-surface-gray-2 px-2 py-1.5 rounded-md"
v-if="member.role && member.role !== 'LMS Student'"
>
<Shield class="size-4 stroke-1.5" />

2
frontend/src/components/Settings/SettingFields.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mb-5 divide-y overflow-y-auto">
<div class="mb-5 divide-y divide-outline-gray-modals overflow-y-auto">
<div v-for="(section, index) in sections" class="py-5">
<div v-if="section.label" class="font-semibold text-ink-gray-9 mb-4">
{{ section.label }}

2
frontend/src/components/Sidebar/Apps.vue
View File

@@ -17,7 +17,7 @@
</template>
<template #body>
<div
class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-surface-white shadow-xl"
class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
>
<div v-for="app in apps.data" key="name">
<a

62
frontend/src/components/Sidebar/Configuration.vue
View File

@@ -1,26 +1,48 @@
<template>
<div class="grid grid-cols-3 justify-between bg-surface-white">
<div key="name" class="py-1 px-2 hover:bg-surface-gray-2 rounded">
<router-link
:to="{
name: 'DataImportList',
query: {
step: 'list',
},
}"
<Popover placement="right-start" trigger="hover" class="flex w-full">
<template #target="{ togglePopover }">
<button
:class="[
'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-7 hover:bg-surface-gray-2',
]"
>
<div class="flex flex-col items-center space-y-1">
<ArrowDownToLine
class="size-9 text-ink-gray-7 p-2 bg-surface-gray-2 rounded-md"
/>
<div class="text-sm text-ink-gray-7">
{{ __('Import') }}
</div>
<div class="flex gap-2">
<Wrench class="size-4 stroke-1.5" />
<span class="whitespace-nowrap">
{{ __('Configuration') }}
</span>
</div>
</router-link>
</div>
</div>
<ChevronRight class="h-4 w-4 stroke-1.5" />
</button>
</template>
<template #body>
<div
class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5"
>
<div key="name" class="py-1 px-2 hover:bg-surface-gray-2 rounded">
<router-link
:to="{
name: 'DataImportList',
query: {
step: 'list',
},
}"
>
<div class="flex flex-col items-center space-y-1">
<ArrowDownToLine
class="size-9 text-ink-gray-7 p-2 bg-surface-gray-2 rounded-md"
/>
<div class="text-sm text-ink-gray-7">
{{ __('Import') }}
</div>
</div>
</router-link>
</div>
</div>
</template>
</Popover>
</template>
<script setup lang="ts">
import { ArrowDownToLine } from 'lucide-vue-next'
import { Popover } from 'frappe-ui'
import { ArrowDownToLine, Wrench, ChevronRight } from 'lucide-vue-next'
</script>

9
frontend/src/components/Sidebar/UserDropdown.vue
View File

@@ -85,7 +85,6 @@ import {
User,
Settings,
Sun,
Wrench,
Zap,
} from 'lucide-vue-next'
@@ -171,13 +170,7 @@ const userDropdownOptions = computed(() => {
},
},
{
label: 'Configuration',
icon: Wrench,
submenu: [
{
component: markRaw(Configuration),
},
],
component: markRaw(Configuration),
condition: () => {
return userResource.data?.is_moderator
},

2
frontend/src/pages/BatchForm.vue
View File

@@ -138,7 +138,7 @@
@change="(val) => (batch.batch_details = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[20rem] overflow-y-scroll mb-4"
/>
</div>
</div>

12
frontend/src/pages/Courses/CourseDashboard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="p-5">
<div class="grid grid-cols-4 gap-5 mb-5">
<div class="grid grid-cols-4 gap-5 mb-5 text-ink-gray-9">
<NumberChartGraph
:title="__('Enrolled')"
:value="formatAmount(course.data?.enrollments)"
@@ -129,7 +129,9 @@
<div class="text-ink-gray-5 mb-4">
{{ __('Progress Summary') }}
</div>
<div class="grid grid-cols-[2fr_1fr] items-center justify-between">
<div
class="grid grid-cols-[2fr_1fr] items-center justify-between text-ink-gray-9"
>
<div class="flex flex-col space-y-4 flex-1 text-sm">
<div
class="flex items-center text-ink-gray-7"
@@ -211,10 +213,12 @@
class="!w-32"
/>
</div>
<div class="divide-y max-h-[43vh] text-ink-gray-7 overflow-y-auto">
<div
class="divide-y max-h-[43vh divide-outline-gray-modals text-ink-gray-7 overflow-y-auto"
>
<div
v-for="progress in lessonProgress.data"
class="flex justify-between text-sm py-2 my-1"
class="flex justify-between text-sm py-2 my-1 text-ink-gray-9"
>
<div class="">
<span class="mr-3 text-xs">

2
frontend/src/pages/Courses/CourseForm.vue
View File

@@ -155,7 +155,7 @@
"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>

2
frontend/src/pages/Courses/NewCourseModal.vue
View File

@@ -58,7 +58,7 @@
@change="(val: string) => (course.description = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[10rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[10rem]"
/>
</div>
</div>

2
frontend/src/pages/JobApplications.vue
View File

@@ -141,7 +141,7 @@
@change="(val) => (emailForm.message = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
</div>

2
frontend/src/pages/JobForm.vue
View File

@@ -101,7 +101,7 @@
@change="(val) => (job.description = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
/>
</div>
</div>

2
frontend/src/pages/ProgrammingExercises/ProgrammingExerciseForm.vue
View File

@@ -51,7 +51,7 @@
@change="(val: string) => (exercise.problem_statement = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[21rem] overflow-y-auto"
editorClass="prose-sm max-w-none border-b border-x border-outline-gray-modals bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem] max-h-[21rem] overflow-y-auto"
/>
</div>
</div>