feat: dark mode
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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',
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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'"
|
||||
|
||||
Reference in New Issue
Block a user