CLASSROOMIO-T-41: Implement dark/light mode switch
Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-8 Merged-by: Digdippa Team <[email protected]>
This commit is contained in:
Rotimi Best
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
5f14b36ef8
commit
1388a41097
@@ -21,7 +21,9 @@
|
||||
modalHeading="Delete question"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-lg">Are you sure you want to delete this question?</h1>
|
||||
<h1 class="dark:text-white text-lg">
|
||||
Are you sure you want to delete this question?
|
||||
</h1>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
>
|
||||
{#if shouldDelete}
|
||||
<form on:submit|preventDefault={() => (shouldDelete = false)}>
|
||||
<h1 class="text-2xl">Are you sure?</h1>
|
||||
<h1 class="dark:text-white text-2xl">Are you sure?</h1>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
@@ -222,7 +222,7 @@
|
||||
handleOptionClick={handleOptionClick(question.id)}
|
||||
>
|
||||
<AddFilled24 class="carbon-icon" />
|
||||
<p class="ml-2 text-gray-600">Add</p>
|
||||
<p class="dark:text-white ml-2 text-gray-600">Add</p>
|
||||
</Dropdown> -->
|
||||
|
||||
<Select
|
||||
@@ -333,7 +333,7 @@
|
||||
onClick={handleAddOption(question.id)}
|
||||
>
|
||||
<AddFilled24 class="carbon-icon" />
|
||||
<p class="ml-2">Add option</p>
|
||||
<p class="dark:text-white ml-2">Add option</p>
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -116,9 +116,9 @@
|
||||
</div>
|
||||
<div class="border border-gray-300 rounded-md mt-2">
|
||||
<div
|
||||
class="hover:bg-gray-100 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
|
||||
class="hover:bg-gray-100 dark:bg-gray-700 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
|
||||
>
|
||||
<p class="font-bold text-lg">
|
||||
<p class="dark:text-white font-bold text-lg">
|
||||
Details
|
||||
{#if data.isEarly}
|
||||
<span
|
||||
@@ -137,30 +137,30 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-2/5">Total grade</p>
|
||||
<p>{total} / {maxPoints}</p>
|
||||
<p class="dark:text-white font-bold w-2/5">Total grade</p>
|
||||
<p class="dark:text-white">{total} / {maxPoints}</p>
|
||||
</div>
|
||||
<!-- <div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Status</p>
|
||||
<p class="dark:text-white font-bold w-1/2">Status</p>
|
||||
<div class="flex items-center">
|
||||
<p class="rounded-full w-5 h-5 bg-yellow-300 mr-2" />
|
||||
<p>Grading</p>
|
||||
<p class="dark:text-white rounded-full w-5 h-5 bg-yellow-300 mr-2" />
|
||||
<p class="dark:text-white">Grading</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-2/5">Student</p>
|
||||
<p class="dark:text-white font-bold w-2/5">Student</p>
|
||||
{#if data.student}
|
||||
<img
|
||||
alt="Student avatar"
|
||||
class="block rounded-full h-6 w-6"
|
||||
src={data.student.avatar_url}
|
||||
/>
|
||||
<p class="ml-2 text-sm">{data.student.fullname}</p>
|
||||
<p class="dark:text-white ml-2 text-sm">{data.student.fullname}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- <div class="flex items-center text-sm p-3">
|
||||
<p class="font-bold w-1/2">Teacher</p>
|
||||
<p>rotimi-best</p>
|
||||
<p class="dark:text-white font-bold w-1/2">Teacher</p>
|
||||
<p class="dark:text-white">rotimi-best</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
<div
|
||||
class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
|
||||
>
|
||||
<h3 class="text-2xl">
|
||||
<h3 class="dark:text-white text-2xl">
|
||||
No questions added. <br />
|
||||
<RoleBasedSecurity allowedRoles="[1,2]">
|
||||
Click the <span class="text-blue-700">Edit</span> button to add.
|
||||
@@ -193,18 +193,18 @@
|
||||
<h2 class="my-1">{$questionnaire.title}</h2>
|
||||
|
||||
<div class="flex items-center">
|
||||
<p class="mx-2">
|
||||
<p class="dark:text-white mx-2">
|
||||
<strong>{$questionnaire.questions.length}</strong> questions
|
||||
</p>
|
||||
|
|
||||
<p class="mx-2">
|
||||
<p class="dark:text-white mx-2">
|
||||
<strong>{getTotalPossibleGrade()}</strong> points.
|
||||
</p>
|
||||
|
|
||||
<p class="mx-2">All required</p>
|
||||
<p class="dark:text-white mx-2">All required</p>
|
||||
{#if $questionnaire.due_by}
|
||||
|
|
||||
<p class="mx-2">
|
||||
<p class="dark:text-white mx-2">
|
||||
<strong>Due by:</strong>
|
||||
{new Date($questionnaire.due_by).toLocaleString()}
|
||||
</p>
|
||||
|
||||
@@ -168,16 +168,18 @@
|
||||
<div class="flex flex-wrap">
|
||||
{#each $lesson.exercises as exercise}
|
||||
<a
|
||||
class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4"
|
||||
class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4"
|
||||
href="{path}/{exercise.id}"
|
||||
>
|
||||
<h3 class="text-xl">{exercise.title}</h3>
|
||||
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
|
||||
<h3 class="dark:text-white text-xl">{exercise.title}</h3>
|
||||
<p class="dark:text-white mt-4 text-sm">Created Jul 3, 2021</p>
|
||||
</a>
|
||||
{:else}
|
||||
<Box>
|
||||
<AudioConsole32 class="carbon-icon w-80" />
|
||||
<h3 class="text-3xl text-gray-500">No Exercise Added</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
|
||||
No Exercise Added
|
||||
</h3>
|
||||
</Box>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -81,7 +81,9 @@
|
||||
/>
|
||||
{:else}
|
||||
<Box>
|
||||
<h3 class="text-3xl text-gray-500">No slide added</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
|
||||
No slide added
|
||||
</h3>
|
||||
<img alt="Slide not found" src="/notfound.webp" class="w-80" />
|
||||
</Box>
|
||||
{/if}
|
||||
@@ -99,7 +101,9 @@
|
||||
<MarkdownRender content={$lesson.materials.note} />
|
||||
{:else}
|
||||
<Box>
|
||||
<h3 class="text-3xl text-gray-500">No note added</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
|
||||
No note added
|
||||
</h3>
|
||||
<img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
|
||||
</Box>
|
||||
{/if}
|
||||
@@ -129,7 +133,9 @@
|
||||
{/each}
|
||||
{:else}
|
||||
<Box>
|
||||
<h3 class="text-3xl text-gray-500">No youtube video added</h3>
|
||||
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
|
||||
No youtube video added
|
||||
</h3>
|
||||
<img alt="Video not found" src="/notfound.webp" class="w-80" />
|
||||
</Box>
|
||||
{/if}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
|
||||
/>
|
||||
{/if}
|
||||
<span class="font-bold">{label}</span>
|
||||
<span class="dark:text-white font-bold">{label}</span>
|
||||
</div>
|
||||
{#if isExpanded}
|
||||
<div class="flex flex-col">
|
||||
@@ -52,6 +52,11 @@
|
||||
border-left: 3px solid var(--main-primary-color);
|
||||
}
|
||||
|
||||
:global(body.dark) .active,
|
||||
:global(body.dark) .item:hover {
|
||||
background-color: rgba(107, 114, 128);
|
||||
}
|
||||
|
||||
.active span {
|
||||
padding-left: 1.3rem;
|
||||
}
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
|
||||
>
|
||||
{#if show}
|
||||
<div class="relative h-full">
|
||||
<div class="relative h-full dark:bg-gray-700">
|
||||
<PageNav bind:title={$course.title} paddingClass="pl-2">
|
||||
<slot:fragment slot="image">
|
||||
<Avatar src={$course.logo} />
|
||||
@@ -280,10 +280,15 @@
|
||||
|
||||
.item {
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
background-color: #cae2f9;
|
||||
}
|
||||
}
|
||||
:global(body.dark) .active,
|
||||
:global(body.dark) .item:hover {
|
||||
background-color: rgba(107, 114, 128);
|
||||
}
|
||||
|
||||
.navItems {
|
||||
height: 82%;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
modalHeading="Delete"
|
||||
>
|
||||
<div>
|
||||
<h1 class="text-lg">
|
||||
<h1 class="dark:text-white text-lg">
|
||||
Are you sure you want to delete <strong>{email}</strong>?
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
>
|
||||
{#if shouldDelete}
|
||||
<form on:submit|preventDefault={() => (shouldDelete = false)}>
|
||||
<h1 class="text-2xl">Are you sure?</h1>
|
||||
<h1 class="dark:text-white text-2xl">Are you sure?</h1>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
|
||||
Reference in New Issue
Block a user