feat: dark mode

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

View File

@@ -16,26 +16,26 @@
<template #body-content>
<div class="flex flex-col gap-4">
<div class="">
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Subject') }}
<span class="text-red-500">*</span>
<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-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Reply To') }}
</div>
<Input type="text" v-model="announcement.replyTo" />
</div>
<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">
{{ __('Announcement') }}
</div>
<TextEditor
:bubbleMenu="true"
@change="(val) => (announcement.announcement = val)"
editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-md bg-surface-gray-3"
/>
</div>
</div>

View File

@@ -18,7 +18,7 @@
{{ student.progress }}% {{ __('Complete') }}
</Badge>
</div>
<div class="text-sm text-gray-700">
<div class="text-sm text-ink-gray-7">
{{ student.email }}
</div>
</div>
@@ -37,7 +37,7 @@
</div>
<div
v-for="assessment in Object.keys(student.assessments)"
class="flex items-center text-gray-700 font-medium"
class="flex items-center text-ink-gray-7 font-medium"
>
<span class="flex-1">
{{ assessment }}
@@ -65,7 +65,7 @@
</div>
<div
v-for="course in Object.keys(student.courses)"
class="flex items-center text-gray-700 font-medium"
class="flex items-center text-ink-gray-7 font-medium"
>
<span class="flex-1">
{{ course }}

View File

@@ -47,19 +47,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>
{{ chapter.scorm_package.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
<span class="text-sm text-ink-gray-4 mt-1">
{{ getFileSize(chapter.scorm_package.file_size) }}
</span>
</div>
<X
@click="() => (chapter.scorm_package = null)"
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>

View File

@@ -18,7 +18,7 @@
<FormControl v-model="topic.title" :label="__('Title')" type="text" />
</div>
<div>
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Details') }}
</div>
<TextEditor
@@ -26,7 +26,7 @@
@change="(val) => (topic.reply = 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>

View File

@@ -5,7 +5,7 @@
</template>
<template #body>
<div
class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-white px-4 sm:px-0 lg:max-w-3xl"
class="absolute left-1/2 mt-3 w-96 max-w-lg -translate-x-1/2 transform rounded-lg bg-surface-white px-4 sm:px-0 lg:max-w-3xl"
>
<div
class="overflow-hidden rounded-lg p-3 shadow-2xl ring-1 ring-black ring-opacity-5"
@@ -35,7 +35,7 @@
</FileUploader>
</div>
<div
class="relative mt-2 grid w-[25.5rem] gap-2 bg-white lg:grid-cols-2"
class="relative mt-2 grid w-[25.5rem] gap-2 bg-surface-white lg:grid-cols-2"
>
<button
v-for="image in images.data"
@@ -53,7 +53,7 @@
</div>
<div
v-if="images.data"
class="mt-2 text-center text-sm text-gray-500"
class="mt-2 text-center text-sm text-ink-gray-4"
>
{{ __('Image search powered by') }}
<a class="underline" target="_blank" href="https://unsplash.com">

View File

@@ -33,24 +33,24 @@
</template>
</FileUploader>
<div v-else class="mb-4">
<div class="text-xs text-gray-600 mb-1">
<div class="text-xs text-ink-gray-5 mb-1">
{{ __('Profile Image') }}
</div>
<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="text-base flex flex-col">
<span>
{{ profile.image.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
<span class="text-sm text-ink-gray-4 mt-1">
{{ getFileSize(profile.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>
@@ -71,14 +71,14 @@
/>
<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">
{{ __('Bio') }}
</div>
<TextEditor
:fixedMenu="true"
@change="(val) => (profile.bio = val)"
:content="profile.bio"
editorClass="prose-sm py-2 px-2 min-h-[200px] border-gray-300 hover:border-gray-400 rounded-md bg-gray-200"
editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-md bg-surface-gray-3"
/>
</div>
</div>

View File

@@ -16,25 +16,25 @@
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Course') }}
</div>
<Select v-model="evaluation.course" :options="getCourses()" />
</div>
<div>
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Date') }}
</div>
<FormControl type="date" v-model="evaluation.date" />
</div>
<div v-if="slots.data?.length">
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Select a slot') }}
</div>
<div class="grid grid-cols-2 gap-2">
<div v-for="slot in slots.data">
<div
class="text-base text-center border rounded-md bg-gray-200 p-2 cursor-pointer"
class="text-base text-center border rounded-md bg-surface-gray-3 p-2 cursor-pointer"
@click="saveSlot(slot)"
:class="{
'border-gray-900': evaluation.start_time == slot.start_time,
@@ -48,7 +48,7 @@
</div>
<div
v-else-if="evaluation.course && evaluation.date"
class="text-sm italic text-red-600"
class="text-sm italic text-ink-red-4"
>
{{ __('No slots available for this date.') }}
</div>
@@ -143,7 +143,7 @@ function submitEvaluation(close) {
title: unavailabilityMessage ? __('Evaluator is Unavailable') : '',
text: message,
icon: unavailabilityMessage ? 'alert-circle' : 'x',
iconClasses: 'bg-yellow-600 text-white rounded-md p-px',
iconClasses: 'bg-yellow-600 text-ink-white rounded-md p-px',
position: 'top-center',
timeout: 10,
})

View File

@@ -12,7 +12,7 @@
{{ event.title }}
</div>
<div class="flex flex-col space-y-4 text-sm text-gray-800">
<div class="flex flex-col space-y-4 text-sm text-ink-gray-8">
<Tooltip :text="__('Email ID')">
<div class="flex items-center space-x-2 w-fit">
<User class="h-4 w-4 stroke-1.5" />

View File

@@ -48,13 +48,13 @@
</div>
<div v-else 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>
{{ resume.file_name }}
</span>
<span class="text-sm text-gray-500 mt-1">
<span class="text-sm text-ink-gray-4 mt-1">
{{ getFileSize(resume.file_size) }}
</span>
</div>
@@ -116,7 +116,7 @@ const submitResume = (close) => {
title: 'Success',
text: 'Your application has been submitted',
icon: 'check',
iconClasses: 'bg-green-600 text-white rounded-md p-px',
iconClasses: 'bg-surface-green-3 text-ink-white rounded-md p-px',
})
application.value.reload()
close()
@@ -126,7 +126,7 @@ const submitResume = (close) => {
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,
})

View File

@@ -200,7 +200,7 @@ const submitLiveClass = (close) => {
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,
})

View File

@@ -4,7 +4,7 @@
<div class="space-y-4">
<div
v-if="!editMode"
class="flex items-center text-xs text-gray-700 space-x-5"
class="flex items-center text-xs text-ink-gray-7 space-x-5"
>
<div class="flex items-center space-x-2">
<input
@@ -34,7 +34,7 @@
</div>
<div v-if="questionType == 'new' || editMode" class="space-y-2">
<div>
<label class="block text-xs text-gray-600 mb-1">
<label class="block text-xs text-ink-gray-5 mb-1">
{{ __('Question') }}
</label>
<TextEditor
@@ -42,7 +42,7 @@
@change="(val) => (question.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>
<FormControl

View File

@@ -16,13 +16,13 @@
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Rating') }}
</div>
<Rating v-model="review.rating" />
</div>
<div>
<div class="mb-1.5 text-sm text-gray-600">
<div class="mb-1.5 text-sm text-ink-gray-5">
{{ __('Review') }}
</div>
<Textarea type="text" size="md" rows="5" v-model="review.review" />
@@ -81,7 +81,7 @@ function submitReview(close) {
createToast({
text: err.messages?.[0] || err,
icon: 'x',
iconClasses: 'text-red-600 bg-red-300',
iconClasses: 'text-ink-red-4 bg-surface-red-4',
})
},
})

View File

@@ -2,14 +2,14 @@
<Dialog v-model="show" :options="{ size: '4xl' }">
<template #body>
<div class="flex h-[calc(100vh_-_8rem)]">
<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
<h1 class="mb-3 px-2 pt-2 text-lg font-semibold">
<div class="flex w-52 shrink-0 flex-col bg-surface-gray-2 p-2">
<h1 class="mb-3 px-2 pt-2 text-lg font-semibold text-ink-gray-9">
{{ __('Settings') }}
</h1>
<div v-for="tab in tabs" :key="tab.label">
<div
v-if="!tab.hideLabel"
class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-ink-gray-5 transition-all duration-300 ease-in-out"
>
<span>{{ __(tab.label) }}</span>
</div>
@@ -21,8 +21,8 @@
class="w-full"
:class="
activeTab?.label == item.label
? 'bg-white shadow-sm'
: 'hover:bg-gray-100'
? 'bg-surface-selected shadow-sm'
: 'hover:bg-surface-gray-2'
"
@click="activeTab = item"
/>
@@ -32,7 +32,7 @@
<div
v-if="activeTab && data.doc"
:key="activeTab.label"
class="flex flex-1 flex-col px-10 py-8"
class="flex flex-1 flex-col px-10 py-8 bg-surface-modal"
>
<Members
v-if="activeTab.label === 'Members'"