ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-41: Implement dark/light mode switch

Browse Source 
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <digdippa@gmail.com>
This commit is contained in:
Rotimi Best
2023-05-05 20:19:45 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 5f14b36ef8
commit 1388a41097
95 changed files with 611 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
+3 -1
View File
@@ -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
src/components/Course/components/Lesson/Exercise/EditMode.svelte
+3 -3
View File
@@ -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}
src/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+11 -11
View File
@@ -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>
src/components/Course/components/Lesson/Exercise/ViewMode.svelte
+5 -5
View File
@@ -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>
src/components/Course/components/Lesson/Exercises/index.svelte
+6 -4
View File
@@ -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>
src/components/Course/components/Lesson/Materials/index.svelte
+9 -3
View File
@@ -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}
src/components/Course/components/Navigation/NavExpandable.svelte
+6 -1
View File
@@ -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;
}
src/components/Course/components/Navigation/index.svelte
+6 -1
View File
@@ -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%;
src/components/Course/components/People/DeleteConfirmation.svelte
+1 -1
View File
@@ -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>
src/components/Course/components/Settings/index.svelte
+1 -1
View File
@@ -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