eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode

Browse Source
This commit is contained in:
Jannat Patel
2025-02-10 10:51:21 +05:30
parent 16b9356944
commit dbf443300b
143 changed files with 886 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/pages/AssignmentForm.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<div class="space-x-2">
@@ -41,7 +41,7 @@
/>
</div>
<div>
<div class="text-xs text-gray-600 mb-2">
<div class="text-xs text-ink-gray-5 mb-2">
{{ __('Question') }}
<span class="text-ink-red-3">*</span>
</div>
@@ -50,7 +50,7 @@
@change="(val) => (model.question = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
</div>

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

@@ -1,6 +1,6 @@
<template>
<header
class="flex justify-between sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
class="flex justify-between sticky top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>

8
frontend/src/pages/AssignmentSubmissionList.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>
@@ -26,7 +26,7 @@
rowKey="name"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in submissionColumns" />
</ListHeader>
@@ -60,9 +60,9 @@
</ListView>
<div
v-else
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
>
<Pencil class="size-8 mx-auto stroke-1 text-gray-500" />
<Pencil class="size-8 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-xl font-medium">
{{ __('No submissions') }}
</div>

6
frontend/src/pages/Assignments.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<router-link
@@ -49,9 +49,9 @@
</ListView>
<div
v-else
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
>
<Pencil class="size-10 mx-auto stroke-1 text-gray-500" />
<Pencil class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-xl font-medium">
{{ __('No assignments found') }}
</div>

30
frontend/src/pages/Batch.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="user.data?.is_moderator || isStudent" class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
<div class="flex items-center space-x-2">
@@ -26,13 +26,13 @@
<Tabs
v-model="tabIndex"
:tabs="tabs"
tablistClass="overflow-y-hidden bg-white"
tablistClass="overflow-y-hidden bg-surface-white"
>
<template #tab="{ tab, selected }" class="overflow-x-hidden">
<div>
<button
class="group -mb-px flex items-center gap-1 border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
class="group -mb-px flex items-center gap-1 border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
:class="{ 'text-ink-gray-9': selected }"
>
<component
v-if="tab.icon"
@@ -43,7 +43,7 @@
<Badge
v-if="tab.count"
:class="{
'text-gray-900 border border-gray-900': selected,
'text-ink-gray-9 border border-gray-900': selected,
}"
variant="subtle"
theme="gray"
@@ -92,10 +92,13 @@
</Tabs>
</div>
<div class="p-5">
<div class="text-gray-700 font-semibold mb-4">
<div class="text-ink-gray-7 font-semibold mb-4">
{{ __('About this batch') }}:
</div>
<div v-html="batch.data.description" class="leading-5 mb-4"></div>
<div
v-html="batch.data.description"
class="leading-5 mb-4 text-ink-gray-7"
></div>
<div class="flex items-center avatar-group overlap mb-5">
<div
@@ -116,15 +119,18 @@
:endDate="batch.data.end_date"
class="mb-3"
/>
<div class="flex items-center mb-4">
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<div class="flex items-center mb-4 text-ink-gray-7">
<Clock class="h-4 w-4 stroke-1.5 mr-2" />
<span>
{{ formatTime(batch.data.start_time) }} -
{{ formatTime(batch.data.end_time) }}
</span>
</div>
<div v-if="batch.data.timezone" class="flex items-center mb-4">
<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<div
v-if="batch.data.timezone"
class="flex items-center mb-4 text-ink-gray-7"
>
<Globe class="h-4 w-4 stroke-1.5 mr-2" />
<span>
{{ batch.data.timezone }}
</span>
@@ -141,7 +147,7 @@
<div class="text-base border rounded-md w-1/3 mx-auto my-32">
<div class="border-b px-5 py-3 font-medium">
<span
class="inline-flex items-center before:bg-red-600 before:w-2 before:h-2 before:rounded-md before:mr-2"
class="inline-flex items-center before:bg-surface-red-5 before:w-2 before:h-2 before:rounded-md before:mr-2"
></span>
{{ __('Not Permitted') }}
</div>

18
frontend/src/pages/BatchDetail.vue
View File

@@ -1,21 +1,23 @@
<template>
<div v-if="batch.data" class="">
<header class="sticky top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5">
<header
class="sticky top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>
<div class="m-5 pb-10">
<div>
<div class="text-3xl font-semibold">
<div class="text-3xl font-semibold text-ink-gray-9">
{{ batch.data.title }}
</div>
<div class="my-3">
<div class="my-3 leading-6 text-ink-gray-7">
{{ batch.data.description }}
</div>
<div
class="flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center justify-between lg:w-1/2"
>
<div class="flex items-center">
<BookOpen class="h-4 w-4 text-gray-700 mr-2" />
<div class="flex items-center text-ink-gray-7">
<BookOpen class="h-4 w-4 mr-2" />
<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
</div>
<span class="hidden lg:block" v-if="batch.data.courses"
@@ -28,8 +30,8 @@
<span class="hidden lg:block" v-if="batch.data.start_date"
>&middot;</span
>
<div class="flex items-center">
<Clock class="h-4 w-4 text-gray-700 mr-2" />
<div class="flex items-center text-ink-gray-7">
<Clock class="h-4 w-4 mr-2" />
<span>
{{ formatTime(batch.data.start_time) }} -
{{ formatTime(batch.data.end_time) }}
@@ -54,7 +56,7 @@
<div class="grid lg:grid-cols-[60%,20%] gap-4 lg:gap-20 mt-10">
<div class="order-2 lg:order-none">
<div
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
v-html="batch.data.batch_details"
></div>
</div>

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

@@ -1,7 +1,7 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
<Button variant="solid" @click="saveBatch()">
@@ -36,7 +36,7 @@
</div>
</div>
<div class="mb-4">
<div class="text-xs text-gray-600 mb-2">
<div class="text-xs text-ink-gray-5 mb-2">
{{ __('Meta Image') }}
</div>
<FileUploader
@@ -48,13 +48,13 @@
<template v-slot="{ file, progress, uploading, openFileSelector }">
<div class="flex items-center">
<div class="border rounded-md w-fit py-5 px-20">
<Image class="size-5 stroke-1 text-gray-700" />
<Image class="size-5 stroke-1 text-ink-gray-7" />
</div>
<div class="ml-4">
<Button @click="openFileSelector">
{{ __('Upload') }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
<div class="mt-2 text-ink-gray-5 text-sm">
{{
__(
'Appears when the batch URL is shared on any online platform'
@@ -72,7 +72,7 @@
<Button @click="removeImage()">
{{ __('Remove') }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
<div class="mt-2 text-ink-gray-5 text-sm">
{{
__(
'Appears when the batch URL is shared on any online platform'
@@ -100,16 +100,16 @@
:required="true"
/>
<div>
<label class="block text-sm text-gray-600 mb-1">
<label class="block text-sm text-ink-gray-5 mb-1">
{{ __('Batch Details') }}
<span class="text-red-500">*</span>
<span class="text-ink-red-3">*</span>
</label>
<TextEditor
:content="batch.batch_details"
@change="(val) => (batch.batch_details = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
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"
/>
</div>
</div>

6
frontend/src/pages/Batches.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky flex items-center justify-between top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<router-link
@@ -66,9 +66,9 @@
</div>
<div
v-else-if="!batches.list.loading"
class="flex flex-col items-center justify-center text-sm text-gray-600 italic mt-48"
class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
>
<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-lg font-medium mb-1">
{{ __('No batches found') }}
</div>

16
frontend/src/pages/Billing.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
@@ -19,10 +19,10 @@
</div> -->
<div class="flex flex-col lg:flex-row justify-between">
<div
class="h-fit bg-gray-100 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
class="h-fit bg-surface-gray-2 rounded-md p-5 space-y-4 lg:order-last mb-10 lg:mt-10 text-sm font-medium lg:w-1/4"
>
<div class="flex items-center justify-between space-x-2">
<div class="text-gray-600">
<div class="text-ink-gray-5">
{{ __('Ordered Item') }}
</div>
<div class="">
@@ -33,7 +33,7 @@
v-if="orderSummary.data.gst_applied"
class="flex items-center justify-between"
>
<div class="text-gray-600">
<div class="text-ink-gray-5">
{{ __('Original Amount') }}
</div>
<div class="">
@@ -44,7 +44,7 @@
v-if="orderSummary.data.gst_applied"
class="flex items-center justify-between mt-2"
>
<div class="text-gray-600">
<div class="text-ink-gray-5">
{{ __('GST Amount') }}
</div>
<div>
@@ -52,7 +52,7 @@
</div>
</div>
<div
class="flex items-center justify-between border-t border-gray-400 pt-4 mt-2"
class="flex items-center justify-between border-t border-outline-gray-3 pt-4 mt-2"
>
<div class="text-lg font-semibold">
{{ __('Total') }}
@@ -123,7 +123,7 @@
</div>
</div>
<div class="flex items-center justify-between border-t pt-4 mt-8">
<p class="text-gray-600">
<p class="text-ink-gray-5">
{{
__(
'Make sure to enter the right billing name as the same will be used in your invoice.'
@@ -337,7 +337,7 @@ const showError = (err) => {
title: 'Error',
text: err.messages?.[0] || err,
icon: 'x',
iconClasses: 'bg-red-600 text-white rounded-md p-px',
iconClasses: 'bg-surface-red-5 text-ink-white rounded-md p-px',
position: 'top-center',
timeout: 10,
})

10
frontend/src/pages/CertifiedParticipants.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky flex items-center justify-between top-0 z-10 border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky flex items-center justify-between top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>
@@ -42,7 +42,7 @@
}"
>
<div
class="flex items-center space-x-2 border rounded-md hover:bg-gray-50 p-2"
class="flex items-center space-x-2 border rounded-md hover:bg-surface-menu-bar p-2 text-ink-gray-7"
>
<Avatar
:image="participant.user_image"
@@ -55,7 +55,7 @@
</div>
<div
v-if="participant.headline"
class="headline text-sm text-gray-700"
class="headline text-sm text-ink-gray-7"
>
{{ participant.headline }}
</div>
@@ -74,9 +74,9 @@
</div>
<div
v-else-if="!participants.list.loading"
class="flex flex-col items-center justify-center text-sm text-gray-600 italic mt-48"
class="flex flex-col items-center justify-center text-sm text-ink-gray-5 italic mt-48"
>
<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-lg font-medium mb-1">
{{ __('No participants found') }}
</div>

12
frontend/src/pages/CourseDetail.vue
View File

@@ -1,17 +1,17 @@
<template>
<div v-if="course.data">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
<div class="m-5">
<div class="flex justify-between w-full">
<div class="md:w-2/3">
<div class="text-3xl font-semibold">
<div class="text-3xl font-semibold text-ink-gray-9">
{{ course.data.title }}
</div>
<div class="my-3 leading-6">
<div class="my-3 leading-6 text-ink-gray-7">
{{ course.data.short_introduction }}
</div>
<div class="flex items-center">
@@ -21,7 +21,7 @@
class="flex items-center"
>
<Star class="h-5 w-5 text-gray-100 fill-orange-500" />
<span class="ml-1">
<span class="ml-1 text-ink-gray-7">
{{ course.data.rating }}
</span>
</Tooltip>
@@ -33,7 +33,7 @@
:text="__('Enrolled Students')"
class="flex items-center"
>
<Users class="h-4 w-4 text-gray-700" />
<Users class="h-4 w-4 text-ink-gray-7" />
<span class="ml-1">
{{ course.data.enrollment_count_formatted }}
</span>
@@ -69,7 +69,7 @@
<CourseCardOverlay :course="course" class="md:hidden mb-4" />
<div
v-html="course.data.description"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
></div>
<div class="mt-10">
<CourseOutline

22
frontend/src/pages/CourseForm.vue
View File

@@ -3,7 +3,7 @@
<div class="grid md:grid-cols-[70%,30%] h-full">
<div>
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
<div class="flex items-center mt-3 md:mt-0">
@@ -45,22 +45,22 @@
:required="true"
/>
<div class="mb-4">
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Course Description') }}
<span class="text-red-500">*</span>
<span class="text-ink-red-3">*</span>
</div>
<TextEditor
:content="course.description"
@change="(val) => (course.description = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
editorClass="prose-sm max-w-none border-b border-x bg-surface-gray-2 rounded-b-md py-1 px-2 min-h-[7rem]"
/>
</div>
<div class="mb-4">
<div class="text-xs text-gray-600 mb-2">
<div class="text-xs text-ink-gray-5 mb-2">
{{ __('Course Image') }}
<span class="text-red-500">*</span>
<span class="text-ink-red-3">*</span>
</div>
<FileUploader
v-if="!course.course_image"
@@ -73,13 +73,13 @@
>
<div class="flex items-center">
<div class="border rounded-md w-fit py-5 px-20">
<Image class="size-5 stroke-1 text-gray-700" />
<Image class="size-5 stroke-1 text-ink-gray-7" />
</div>
<div class="ml-4">
<Button @click="openFileSelector">
{{ __('Upload') }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
<div class="mt-2 text-ink-gray-5 text-sm">
{{
__('Appears on the course card in the course list')
}}
@@ -98,7 +98,7 @@
<Button @click="removeImage()">
{{ __('Remove') }}
</Button>
<div class="mt-2 text-gray-600 text-sm">
<div class="mt-2 text-ink-gray-5 text-sm">
{{ __('Appears on the course card in the course list') }}
</div>
</div>
@@ -116,14 +116,14 @@
class="mb-4"
/>
<div class="mb-4">
<div class="mb-1.5 text-xs text-gray-600">
<div class="mb-1.5 text-xs text-ink-gray-5">
{{ __('Tags') }}
</div>
<div class="flex items-center">
<div
v-if="course.tags"
v-for="tag in course.tags?.split(', ')"
class="flex items-center bg-gray-100 p-2 rounded-md mr-2"
class="flex items-center bg-surface-gray-2 p-2 rounded-md mr-2"
>
{{ tag }}
<X

23
frontend/src/pages/Courses.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="courses.data">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
@@ -25,7 +25,10 @@
@input="courses.reload()"
>
<template #prefix>
<Search class="w-4 h-4 stroke-1.5 text-gray-600" name="search" />
<Search
class="w-4 h-4 stroke-1.5 text-ink-gray-5"
name="search"
/>
</template>
</FormControl>
</div>
@@ -57,8 +60,8 @@
<template #tab="{ tab, selected }">
<div>
<button
class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-gray-600 duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
:class="{ 'text-gray-900': selected }"
class="group -mb-px flex items-center gap-2 overflow-hidden border-b border-transparent py-2.5 text-base text-ink-gray-5 duration-300 ease-in-out hover:border-outline-gray-3 hover:text-ink-gray-9"
:class="{ 'text-ink-gray-9': selected }"
>
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
{{ __(tab.label) }}
@@ -103,7 +106,7 @@
<CourseCard :course="course" />
</router-link>
</div>
<div v-else class="p-5 italic text-gray-500">
<div v-else class="p-5 italic text-ink-gray-4">
{{ __('No {0} courses').format(tab.label.toLowerCase()) }}
</div>
</template>
@@ -123,15 +126,15 @@
},
}"
>
<div class="bg-gray-50 py-32 px-5 rounded-md">
<div class="bg-surface-menu-bar py-32 px-5 rounded-md">
<div class="flex flex-col items-center text-center space-y-2">
<Plus
class="size-10 stroke-1 text-gray-800 p-1 rounded-full border bg-white"
class="size-10 stroke-1 text-ink-gray-8 p-1 rounded-full border bg-surface-white"
/>
<div class="font-medium">
{{ __('Create a Course') }}
</div>
<span class="text-gray-700 text-sm leading-4">
<span class="text-ink-gray-7 text-sm leading-4">
{{ __('You can add chapters and lessons to it.') }}
</span>
</div>
@@ -140,9 +143,9 @@
</div>
<div
v-else-if="!courses.loading && !hasCourses"
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
>
<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-xl font-medium">
{{ __('No courses found') }}
</div>

18
frontend/src/pages/JobCreation.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<Button variant="solid" @click="saveJob()">
@@ -46,16 +46,16 @@
</div>
</div>
<div class="mt-4">
<label class="block text-gray-600 text-xs mb-1">
<label class="block text-ink-gray-5 text-xs mb-1">
{{ __('Description') }}
<span class="text-red-500">*</span>
<span class="text-ink-red-3">*</span>
</label>
<TextEditor
:content="job.description"
@change="(val) => (job.description = val)"
:editable="true"
:fixedMenu="true"
editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem] mb-4"
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"
/>
</div>
</div>
@@ -84,9 +84,9 @@
class="mb-4"
:required="true"
/>
<label class="block text-gray-600 text-xs mb-1 mt-4">
<label class="block text-ink-gray-5 text-xs mb-1 mt-4">
{{ __('Company Logo') }}
<span class="text-red-500">*</span>
<span class="text-ink-red-3">*</span>
</label>
<FileUploader
v-if="!job.image"
@@ -109,19 +109,19 @@
<div v-else class="">
<div class="flex items-center">
<div class="border rounded-md p-2 mr-2">
<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
<FileText class="h-5 w-5 stroke-1.5 text-ink-gray-7" />
</div>
<div class="flex flex-col">
<span>
{{ job.image.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
<span class="text-sm text-ink-gray-4 mt-1">
{{ getFileSize(job.image.file_size) }}
</span>
</div>
<X
@click="removeImage()"
class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
/>
</div>
</div>

26
frontend/src/pages/JobDetail.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
@@ -68,11 +68,11 @@
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-5 md:gap-y-5"
>
<div class="flex items-center space-x-2">
<span class="p-4 bg-green-50 rounded-full">
<Building2 class="h-4 w-4 text-green-500" />
<span class="p-4 bg-surface-green-1 rounded-full">
<Building2 class="h-4 w-4 text-ink-green-2" />
</span>
<div class="flex flex-col space-y-2">
<span class="text-xs text-gray-600 font-medium uppercase">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Organisation') }}
</span>
<span class="text-sm font-semibold">
@@ -81,11 +81,11 @@
</div>
</div>
<div class="flex items-center space-x-2">
<span class="p-4 bg-red-50 rounded-full">
<MapPin class="h-4 w-4 text-red-500" />
<span class="p-4 bg-surface-red-1 rounded-full">
<MapPin class="h-4 w-4 text-ink-red-3" />
</span>
<div class="flex flex-col space-y-2">
<span class="text-xs text-gray-600 font-medium uppercase">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Location') }}
</span>
<span class="text-sm font-semibold">
@@ -98,7 +98,7 @@
<ClipboardType class="h-4 w-4 text-yellow-500" />
</span>
<div class="flex flex-col space-y-2">
<span class="text-xs font-medium text-gray-600 uppercase">
<span class="text-xs font-medium text-ink-gray-5 uppercase">
{{ __('Category') }}
</span>
<span class="text-sm font-semibold">
@@ -107,11 +107,11 @@
</div>
</div>
<div class="flex items-center space-x-2">
<span class="p-4 bg-blue-50 rounded-full">
<CalendarDays class="h-4 w-4 text-blue-500" />
<span class="p-4 bg-surface-blue-1 rounded-full">
<CalendarDays class="h-4 w-4 text-ink-blue-2" />
</span>
<div class="flex flex-col space-y-2">
<span class="text-xs text-gray-600 font-medium uppercase">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Posted on') }}
</span>
<span class="text-sm font-semibold">
@@ -127,7 +127,7 @@
<SquareUserRound class="h-4 w-4 text-purple-500" />
</span>
<div class="flex flex-col space-y-2">
<span class="text-xs text-gray-600 font-medium uppercase">
<span class="text-xs text-ink-gray-5 font-medium uppercase">
{{ __('Applications Received') }}
</span>
<span class="text-sm font-semibold">
@@ -140,7 +140,7 @@
</div>
<p
v-html="job.data.description"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
></p>
</div>
<JobApplicationModal

6
frontend/src/pages/Jobs.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs
class="h-7"
@@ -42,7 +42,7 @@
>
<template #prefix>
<Search
class="w-4 h-4 stroke-1.5 text-gray-600"
class="w-4 h-4 stroke-1.5 text-ink-gray-5"
name="search"
/>
</template>
@@ -73,7 +73,7 @@
<JobCard :job="job" />
</router-link>
</div>
<div v-else class="text-gray-700 italic p-5 w-fit mx-auto">
<div v-else class="text-ink-gray-7 italic p-5 w-fit mx-auto">
{{ __('No jobs posted') }}
</div>
</div>

25
frontend/src/pages/Lesson.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="lesson.data" class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
@@ -26,7 +26,7 @@
</div>
<div v-else class="border-r container pt-5 pb-10 px-5">
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div class="text-3xl font-semibold">
<div class="text-3xl font-semibold text-ink-gray-9">
{{ lesson.data.title }}
</div>
<div class="flex items-center mt-2 md:mt-0">
@@ -122,31 +122,31 @@
JSON.parse(lesson.data.instructor_content)?.blocks?.length > 1 &&
allowInstructorContent()
"
class="bg-gray-100 p-3 rounded-md mt-6"
class="bg-surface-gray-2 p-3 rounded-md mt-6"
>
<div class="text-gray-600 font-medium">
<div class="text-ink-gray-5 font-medium">
{{ __('Instructor Notes') }}
</div>
<div
id="instructor-content"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
></div>
</div>
<div
v-else-if="lesson.data.instructor_notes"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-6"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-6"
>
<LessonContent :content="lesson.data.instructor_notes" />
</div>
<div
v-if="lesson.data.content"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-5"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
>
<div id="editor"></div>
</div>
<div
v-else
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal mt-5"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal mt-5"
>
<LessonContent
v-if="lesson.data?.body"
@@ -166,11 +166,14 @@
</div>
</div>
<div class="sticky top-10">
<div class="bg-gray-50 py-5 px-2 border-b">
<div class="text-lg font-semibold">
<div class="bg-surface-menu-bar py-5 px-2 border-b">
<div class="text-lg font-semibold text-ink-gray-9">
{{ lesson.data.course_title }}
</div>
<div v-if="user && lesson.data.membership" class="text-sm mt-3">
<div
v-if="user && lesson.data.membership"
class="text-sm mt-4 mb-2 text-ink-gray-5"
>
{{ Math.ceil(lessonProgress) }}% {{ __('completed') }}
</div>

16
frontend/src/pages/LessonForm.vue
View File

@@ -3,7 +3,7 @@
<div class="grid md:grid-cols-[75%,25%] h-screen">
<div class="border-r">
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="text-ellipsis" :items="breadcrumbs" />
<Button
@@ -38,11 +38,11 @@
}
"
>
<label class="block font-medium text-gray-600 mb-1">
<label class="block font-medium text-ink-gray-5 mb-1">
{{ __('Instructor Notes') }}
</label>
<ChevronRight
class="stroke-2 h-5 w-5 text-gray-600"
class="stroke-2 h-5 w-5 text-ink-gray-5"
:class="{
'rotate-90 transform duration-200': openInstructorEditor,
'duration-200': !openInstructorEditor,
@@ -52,18 +52,18 @@
<div
v-show="openInstructorEditor"
id="instructor-notes"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal py-3"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal py-3"
></div>
</div>
</div>
<div class="border-t mt-4">
<div class="w-5/6 mx-auto pt-4">
<label class="block font-medium text-gray-600 mb-1">
<label class="block font-medium text-ink-gray-5 mb-1">
{{ __('Content') }}
</label>
<div
id="content"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal py-3"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal py-3"
></div>
</div>
</div>
@@ -448,8 +448,8 @@ const showToast = (title, text, icon) => {
icon: icon,
iconClasses:
icon == 'check'
? 'bg-green-600 text-white rounded-md p-px'
: 'bg-red-600 text-white rounded-md p-px',
? 'bg-surface-green-3 text-ink-white rounded-md p-px'
: 'bg-surface-red-5 text-ink-white rounded-md p-px',
position: icon == 'check' ? 'bottom-right' : 'top-center',
timeout: icon == 'check' ? 5 : 10,
})

10
frontend/src/pages/Notifications.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<div class="flex items-center space-x-2">
@@ -26,14 +26,14 @@
>
<div class="flex items-center">
<Avatar :image="log.user_image" :label="log.full_name" class="mr-2" />
<div class="notification" v-html="log.subject"></div>
<div class="notification text-ink-gray-7" v-html="log.subject"></div>
</div>
<div class="flex items-center space-x-2">
<Link
v-if="log.link"
:to="log.link"
@click="markAsRead.submit({ name: log.name })"
class="text-gray-600 font-medium text-sm hover:text-gray-700"
class="text-ink-gray-5 font-medium text-sm hover:text-ink-gray-7"
>
{{ __('View') }}
</Link>
@@ -44,13 +44,13 @@
@click="markAsRead.submit({ name: log.name })"
>
<template #icon>
<X class="h-4 w-4 text-gray-700 stroke-1.5" />
<X class="h-4 w-4 text-ink-gray-7 stroke-1.5" />
</template>
</Button>
</Tooltip>
</div>
</div>
<div v-else class="text-gray-600">
<div v-else class="text-ink-gray-5">
{{ __('Nothing to see here.') }}
</div>
</div>

12
frontend/src/pages/Profile.vue
View File

@@ -2,7 +2,7 @@
<NoPermission v-if="!$user.data" />
<div v-else-if="profile.data">
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
@@ -14,7 +14,7 @@
/>
<div
v-else
:class="{ 'bg-gray-100': !profile.data.cover_image }"
:class="{ 'bg-surface-gray-2': !profile.data.cover_image }"
class="h-[130px] w-full"
></div>
<div
@@ -27,7 +27,7 @@
<template v-slot="{ togglePopover }">
<Button variant="outline" @click="togglePopover()">
<template #prefix>
<Edit class="w-4 h-4 stroke-1.5 text-gray-700" />
<Edit class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
</template>
{{ __('Edit') }}
</Button>
@@ -50,10 +50,10 @@
/>
</div>
<div class="ml-6">
<h2 class="mt-2 text-3xl font-semibold text-gray-900">
<h2 class="mt-2 text-3xl font-semibold text-ink-gray-9">
{{ profile.data.full_name }}
</h2>
<div class="mt-2 text-base text-gray-700">
<div class="mt-2 text-base text-ink-gray-7">
{{ profile.data.headline }}
</div>
</div>
@@ -63,7 +63,7 @@
@click="editProfile()"
>
<template #prefix>
<Edit class="w-4 h-4 stroke-1.5 text-gray-700" />
<Edit class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
</template>
{{ __('Edit Profile') }}
</Button>

20
frontend/src/pages/ProfileAbout.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="mt-7 mb-10">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
<h2 class="mb-3 text-lg font-semibold text-ink-gray-9">
{{ __('About') }}
</h2>
<div
v-if="profile.data.bio"
v-html="profile.data.bio"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100 prose-sm max-w-none !whitespace-normal"
class="ProseMirror prose prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-outline-gray-2 prose-th:border-outline-gray-2 prose-td:relative prose-th:relative prose-th:bg-surface-gray-2 prose-sm max-w-none !whitespace-normal"
></div>
<div v-else class="text-gray-700 text-sm italic">
<div v-else class="text-ink-gray-7 text-sm italic">
{{ __('No introduction') }}
</div>
</div>
<div class="mt-7 mb-10" v-if="badges.data?.length">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
<h2 class="mb-3 text-lg font-semibold text-ink-gray-9">
{{ __('Achievements') }}
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
@@ -28,7 +28,7 @@
/>
<div
v-if="badge.count > 1"
class="flex items-end bg-gray-100 p-2 text-xs font-semibold rounded-full absolute right-0 bottom-0"
class="flex items-end bg-surface-gray-2 p-2 text-xs font-semibold rounded-full absolute right-0 bottom-0"
>
<span>
<X class="w-3 h-3" />
@@ -42,7 +42,7 @@
<img
:src="badge.badge_image"
:alt="badge.badge"
class="bg-gray-100 rounded-t-md h-[200px] mx-auto"
class="bg-surface-gray-2 rounded-t-md h-[200px] mx-auto"
/>
<div class="p-5">
<div class="text-2xl font-semibold mb-2">
@@ -52,13 +52,13 @@
{{ badge.badge_description }}
</div>
<div class="flex flex-col mb-4">
<span class="text-xs text-gray-700 font-medium mb-1">
<span class="text-xs text-ink-gray-7 font-medium mb-1">
{{ __('Issued on') }}:
</span>
{{ dayjs(badge.issued_on).format('DD MMM YYYY') }}
</div>
<div class="flex flex-col">
<span class="text-xs text-gray-700 font-medium mb-1">
<span class="text-xs text-ink-gray-7 font-medium mb-1">
{{ __('Share on') }}:
</span>
<div class="flex items-center space-x-2">
@@ -68,7 +68,7 @@
@click="shareOnSocial(badge, 'LinkedIn')"
>
<template #prefix>
<LinkedinIcon class="h-3 w-3 text-gray-700" />
<LinkedinIcon class="h-3 w-3 text-ink-gray-7" />
</template>
<span class="text-xs">
{{ __('LinkedIn') }}
@@ -80,7 +80,7 @@
@click="shareOnSocial(badge, 'Twitter')"
>
<template #prefix>
<Twitter class="h-3 w-3 text-gray-700" />
<Twitter class="h-3 w-3 text-ink-gray-7" />
</template>
<span class="text-xs">
{{ __('Twitter') }}

8
frontend/src/pages/ProfileCertificates.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="mt-7 mb-10">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
<h2 class="mb-3 text-lg font-semibold text-ink-gray-9">
{{ __('Certificates') }}
</h2>
<div class="grid grod-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div
v-for="certificate in certificates.data"
:key="certificate.name"
class="flex flex-col bg-white shadow rounded-lg p-3 cursor-pointer hover:bg-gray-50"
class="flex flex-col bg-surface-white border rounded-lg p-3 cursor-pointer hover:bg-surface-menu-bar"
@click="openCertificate(certificate)"
>
<div class="font-medium leading-5 mb-2">
<div class="font-medium leading-5 mb-2 text-ink-gray-9">
{{ certificate.course_title || certificate.batch_title }}
</div>
<div class="text-sm text-gray-700 font-medium mt-auto">
<div class="text-sm text-ink-gray-7 font-medium mt-auto">
<span> {{ __('Issued on') }}: </span>
{{ dayjs(certificate.issue_date).format('DD MMM YYYY') }}
</div>

14
frontend/src/pages/ProfileEvaluator.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="mt-7 mb-20">
<h2 class="mb-4 text-lg font-semibold text-gray-900">
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
{{ __('My availability') }}
</h2>
<div class="">
<div
class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-gray-700 mb-4"
class="grid grid-cols-3 md:grid-cols-4 gap-4 text-sm text-ink-gray-7 mb-4"
>
<div>
{{ __('Day') }}
@@ -42,7 +42,7 @@
/>
<X
@click="deleteRow(slot.name)"
class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-red-100 hidden group-hover:block"
class="w-6 h-auto stroke-1.5 text-red-900 rounded-md cursor-pointer p-1 bg-surface-red-2 hidden group-hover:block"
/>
</div>
@@ -70,13 +70,13 @@
<Button @click="showSlotsTemplate = 1">
<template #prefix>
<Plus class="w-4 h-4 stroke-1.5 text-gray-700" />
<Plus class="w-4 h-4 stroke-1.5 text-ink-gray-7" />
</template>
{{ __('Add Slot') }}
</Button>
</div>
<div class="my-10">
<h2 class="mb-4 text-lg font-semibold text-gray-900">
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
{{ __('I am unavailable') }}
</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -109,12 +109,12 @@
</div>
</div>
<div>
<h2 class="mb-4 text-lg font-semibold text-gray-900">
<h2 class="mb-4 text-lg font-semibold text-ink-gray-9">
{{ __('My calendar') }}
</h2>
<div
v-if="evaluator.data?.calendar && evaluator.data?.is_authorized"
class="flex items-center bg-green-100 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
class="flex items-center bg-surface-green-2 text-green-900 text-sm p-1 rounded-md mb-4 w-fit"
>
<Check class="h-4 w-4 stroke-1.5 mr-2" />
{{ __('Your calendar is set.') }}

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

@@ -1,6 +1,6 @@
<template>
<div class="mt-7">
<h2 class="mb-3 text-lg font-semibold text-gray-900">
<h2 class="mb-3 text-lg font-semibold text-ink-gray-9">
{{ __('Settings') }}
</h2>
<div

6
frontend/src/pages/ProgramForm.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadbrumbs" />
<Button variant="solid" @click="saveProgram()">
@@ -40,7 +40,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in courseColumns" />
</ListHeader>
@@ -102,7 +102,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in memberColumns" />
</ListHeader>

10
frontend/src/pages/Programs.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadbrumbs" />
<Button
@@ -73,20 +73,20 @@
v-if="lockCourse(course)"
class="absolute inset-0 flex items-center justify-center"
>
<LockKeyhole class="size-10 text-white" />
<LockKeyhole class="size-10 text-ink-white" />
</div>
</div>
</div>
<div v-else class="text-sm italic text-gray-600 mt-4">
<div v-else class="text-sm italic text-ink-gray-5 mt-4">
{{ __('No courses in this program') }}
</div>
</div>
</div>
<div
v-else
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
>
<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-xl font-medium">
{{ __('No programs found') }}
</div>

4
frontend/src/pages/QuizForm.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<div class="space-x-2">
@@ -132,7 +132,7 @@
}"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in questionColumns" />
</ListHeader>

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

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>

16
frontend/src/pages/QuizSubmission.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs v-if="submisisonDetails.doc" :items="breadcrumbs" />
<div class="space-x-2">
@@ -16,7 +16,7 @@
</div>
</header>
<div v-if="submisisonDetails.doc" class="w-1/2 mx-auto py-5 space-y-5">
<div class="text-xl font-semibold">
<div class="text-xl font-semibold text-ink-gray-9">
{{ submisisonDetails.doc.member_name }}
</div>
<div class="space-y-4 border p-5 rounded-md">
@@ -48,13 +48,19 @@
</div>
<div
v-for="row in submisisonDetails.doc.result"
v-for="(row, index) in submisisonDetails.doc.result"
class="border p-5 rounded-md space-y-4"
>
<div class="flex space-x-1 font-semibold">
<div class="flex items-start space-x-1 font-semibold text-ink-gray-9">
<!-- <span>
{{ index + 1 }}.
</span> -->
<span class="leading-5" v-html="row.question"> </span>
</div>
<div v-html="row.answer" class="leading-5"></div>
<div class="leading-5 text-ink-gray-7 space-x-1">
<span> {{ __('Answer') }}: </span>
<span v-html="row.answer"></span>
</div>
<div class="grid grid-cols-2 gap-5">
<FormControl v-model="row.marks" :label="__('Marks')" />
<FormControl

4
frontend/src/pages/QuizSubmissionList.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
</header>
@@ -15,7 +15,7 @@
:options="{ showTooltip: false, selectable: false }"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in quizColumns">
</ListHeaderItem>

8
frontend/src/pages/Quizzes.vue
View File

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs :items="breadcrumbs" />
<router-link
@@ -27,7 +27,7 @@
:options="{ showTooltip: false, selectable: false }"
>
<ListHeader
class="mb-2 grid items-center space-x-4 rounded bg-gray-100 p-2"
class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
>
<ListHeaderItem :item="item" v-for="item in quizColumns">
</ListHeaderItem>
@@ -54,9 +54,9 @@
</div>
<div
v-else
class="text-center p-5 text-gray-600 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
class="text-center p-5 text-ink-gray-5 mt-52 w-3/4 md:w-1/2 mx-auto space-y-2"
>
<BookOpen class="size-10 mx-auto stroke-1 text-gray-500" />
<BookOpen class="size-10 mx-auto stroke-1 text-ink-gray-4" />
<div class="text-xl font-medium">
{{ __('No quizzes found') }}
</div>

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

@@ -1,6 +1,6 @@
<template>
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>

60
frontend/src/pages/Statistics.vue
View File

@@ -1,101 +1,111 @@
<template>
<div class="">
<header
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
class="sticky top-0 z-10 flex items-center justify-between border-b bg-surface-white px-3 py-2.5 sm:px-5"
>
<Breadcrumbs class="h-7" :items="breadcrumbs" />
</header>
<div v-if="chartDetails.data" class="p-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<BookOpen class="w-18 h-18 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<BookOpen class="w-18 h-18 stroke-1.5" />
</div>
<div>
<div class="text-xl font-semibold mb-1">
{{ formatNumber(chartDetails.data.courses) }}
</div>
<div class="text-gray-700">
<div>
{{ __('Courses') }}
</div>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<LogIn class="w-18 h-18 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<LogIn class="w-18 h-18 stroke-1.5" />
</div>
<div>
<div class="text-xl font-semibold mb-1">
{{ formatNumber(chartDetails.data.users) }}
</div>
<div class="text-gray-700">
<div>
{{ __('Signups') }}
</div>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<BookOpenCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<BookOpenCheck class="w-18 h-18 stroke-1.5" />
</div>
<div>
<div class="text-xl font-semibold mb-1">
{{ formatNumber(chartDetails.data.enrollments) }}
</div>
<div class="text-gray-700">
<div>
{{ __('Enrollments') }}
</div>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<FileCheck class="w-18 h-18 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<FileCheck class="w-18 h-18 stroke-1.5" />
</div>
<div>
<div class="text-xl font-semibold mb-1">
{{ formatNumber(chartDetails.data.completions) }}
</div>
<div class="text-gray-700">
<div>
{{ __('Completions') }}
</div>
</div>
</div>
<div class="flex items-center shadow py-2 px-3 rounded-md">
<div class="p-2 rounded-md bg-gray-100 mr-3">
<FileCheck2 class="w-18 h-18 stroke-1.5 text-gray-700" />
<div
class="flex items-center border py-2 px-3 rounded-md text-ink-gray-7"
>
<div class="p-2 rounded-md bg-surface-gray-2 mr-3">
<FileCheck2 class="w-18 h-18 stroke-1.5" />
</div>
<div>
<div class="text-xl font-semibold mb-1">
{{ formatNumber(chartDetails.data.lesson_completions) }}
</div>
<div class="text-gray-700">
<div class="text-ink-gray-7">
{{ __('Milestones') }}
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
<div class="shadow rounded-md p-5 min-h-72">
<div class="border rounded-md p-5 min-h-72">
<Line
v-if="signupsChart.data"
:data="signupsChart.data"
:options="signupChartOptions()"
/>
</div>
<div class="shadow rounded-md p-5 min-h-72">
<div class="border rounded-md p-5 min-h-72">
<Line
v-if="enrollmentChart.data"
:data="enrollmentChart.data"
:options="enrollmentChartOptions()"
/>
</div>
<div class="shadow rounded-md p-5">
<div class="border rounded-md p-5">
<Line
v-if="lessonCompletion.data"
:data="lessonCompletion.data"
:options="lessonChartOptions()"
/>
</div>
<div class="shadow rounded-md p-5">
<div class="border rounded-md p-5">
<Pie
v-if="courseCompletion.data"
:data="courseCompletion.data"