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/routes/_error.svelte
+2 -2
View File
@@ -25,7 +25,7 @@
<div class="w-3/5 h-3/5 m-auto flex flex-col items-center justify-center">
<h1>Opps 😢</h1>
<h2>Something wen't wrong and it's our fault.</h2>
<p>Please screenshot this page and send to me.</p>
<p class="dark:text-white">Please screenshot this page and send to me.</p>
<pre>
{errorContent}
</pre>
@@ -34,7 +34,7 @@
<!-- {#if dev && error.stack}
<h1>{status}</h1>
<p>{error.message}</p>
<p class="dark:text-white">{error.message}</p>
<pre>{error.stack}</pre>
{/if} -->
<style>
src/routes/_layout.svelte
+12 -2
View File
@@ -27,6 +27,8 @@
import { isMobile } from '../utils/store/useMobile';
import { ROUTES_TO_HIDE_NAV, ROUTE } from '../utils/constants/routes';
import { getOrganizations } from '../utils/services/org';
import { toggleBodyByTheme } from '../utils/functions/app';
import { appStore } from '../utils/store/app';
export let segment;
export let config;
@@ -155,6 +157,10 @@
}
);
// Update theme - dark or light mode
$appStore.isDark = localStorage.getItem('theme') === 'dark';
toggleBodyByTheme($appStore.isDark);
return () => {
authListener.unsubscribe();
};
@@ -185,7 +191,7 @@
<!-- <Nav {segment} /> -->
<Snackbar />
<main>
<main class="dark:bg-gray-800">
{#if $preloading && $delayedPreloading}
<Backdrop>
<Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
@@ -203,7 +209,7 @@
{#if isOrgPage($page.path)}
<div class="org-root w-full flex items-center justify-between">
<OrgSideBar />
<div class="org-slot bg-white">
<div class="org-slot bg-white dark:bg-gray-800">
<slot />
</div>
</div>
@@ -252,4 +258,8 @@
:global(.bx--data-table-container) {
width: 100%;
}
:global(.dark svg.dark path) {
fill: #fff;
}
</style>
src/routes/admin.svelte
+16 -14
View File
@@ -84,11 +84,11 @@
<title>Admin Dashboard - ClassroomIO</title>
</svelte:head>
<div class="root w-full py-10 bg-gray-100">
<div class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
<div class="flex items-center justify-evenly max-w-6xl m-auto">
{#each boxes as box}
<div
class="bg-white rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
class="bg-white dark:bg-gray-800 rounded-md py-3 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
>
{#if box.icon === 'students'}
<UserSpeaker32 class="carbon-icon" />
@@ -97,43 +97,45 @@
{:else if box.icon === 'courses'}
<Book32 class="carbon-icon" />
{/if}
<p class="text-xl">{box.label}</p>
<h3 class="text-3xl m-0 my-2">{box.value}</h3>
<p class="dark:text-white text-xl">{box.label}</p>
<h3 class="dark:text-white text-3xl m-0 my-2">{box.value}</h3>
</div>
{/each}
</div>
<div class="flex items-center justify-evenly mt-16">
<div class="table rounded-md bg-white shadow-md">
<div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
<div class="flex border-t-0 {borderBottomGrey} p-3">
<h3 class="m-0 py-3 pl-2 text-lg">Outstanding students</h3>
<h3 class="dark:text-white m-0 py-3 pl-2 text-lg">
Outstanding students
</h3>
</div>
{#each topStudents as topStudent, index}
<div
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
>
<span class="mr-2">{index + 1}</span>
<p class="text-lg">{topStudent.name}</p>
<p class="dark:text-white text-lg">{topStudent.name}</p>
<span class="flex-grow" />
<p class="text-lg">{topStudent.score}</p>
<p class="dark:text-white text-lg">{topStudent.score}</p>
</div>
{/each}
</div>
<div class="table rounded-md bg-white shadow-md">
<div class="table rounded-md bg-white dark:bg-gray-800 shadow-md">
<div class="flex border-t-0 {borderBottomGrey} p-3">
<h3 class="m-0 py-3 pl-2 text-lg">Top rated courses</h3>
<h3 class="dark:text-white m-0 py-3 pl-2 text-lg">Top rated courses</h3>
</div>
{#each topCourses as topCourse, index}
<div
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100 dark:bg-gray-700"
>
<span class="mr-2">{index + 1}</span>
<p class="text-lg">{topCourse.title}</p>
<p class="dark:text-white text-lg">{topCourse.title}</p>
<span class="flex-grow" />
<p class="text-lg">{topCourse.rating}</p>
<p class="dark:text-white text-lg">{topCourse.rating}</p>
</div>
{/each}
</div>
src/routes/ask.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
{#if facultyFilterOpened}
<div
class="w-48 bg-white border border-grey rounded-lg mt-2 py-3 absolute"
class="w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
>
{#each faculties as faculty}
<div class="block px-4 py-3 border-b">
src/routes/courses/[id]/attendance.svelte
+10 -6
View File
@@ -136,9 +136,9 @@
<div
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<p class="w-1/4">Student</p>
<p class="dark:text-white w-1/4">Student</p>
{#each $lessons as lesson, index}
<p class="col" title={lesson.title}>
<p class="dark:text-white col" title={lesson.title}>
{getLectureNo(index + 1)}
</p>
{/each}
@@ -155,14 +155,16 @@
class="w-8 h-8 rounded-full mr-2"
/>
<div class="text-sm">
<p class="font-semibold">{student.profile.fullname}</p>
<p class="dark:text-white font-semibold">
{student.profile.fullname}
</p>
{#if student.assigned_student_id}
<p>#{student.assigned_student_id}</p>
<p class="dark:text-white">#{student.assigned_student_id}</p>
{/if}
</div>
</div>
{#each $lessons as lesson}
<p class="col">
<p class="dark:text-white col">
<input
class="form-radio {isStudent && 'cursor-not-allowed'}"
type="checkbox"
@@ -180,7 +182,9 @@
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No Student Added
</h3>
</Box>
{/each}
</div>
src/routes/courses/[id]/lessons/index.svelte
+8 -6
View File
@@ -198,7 +198,7 @@
</RoleBasedSecurity>
<div class="">
<h3 class="text-3xl font-bold">
<h3 class="dark:text-white text-3xl font-bold">
{getLessonOrder(lesson.id)}.
</h3>
</div>
@@ -206,7 +206,7 @@
{#if lessonEditing === lesson.id}
<TextField bind:value={lesson.title} autofocus={true} />
{:else}
<h3 class="text-2xl m-0 flex items-center">
<h3 class="dark:text-white text-2xl m-0 flex items-center">
<a
href={isStudent && !lesson.is_complete
? $page.path
@@ -237,7 +237,7 @@
labelKey="fullname"
/>
{:else if !lesson.profile}
<p class="ml-2 text-sm">No tutor added</p>
<p class="dark:text-white ml-2 text-sm">No tutor added</p>
{:else}
<a href="." class="flex items-center hover:underline">
<img
@@ -247,7 +247,7 @@
height="20"
src={lesson.profile.avatar_url}
/>
<p class="ml-2 text-sm">
<p class="dark:text-white ml-2 text-sm">
{lesson.profile.fullname}
</p>
</a>
@@ -265,7 +265,7 @@
/>
{:else}
<Time24 class="carbon-icon" />
<p class="text-md ml-2">
<p class="dark:text-white text-md ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
{/if}
@@ -303,7 +303,9 @@
</div>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No lesson added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No lesson added
</h3>
<img alt="No lesson added" src="/notfound2.gif" class="w-80" />
</Box>
{/each}
src/routes/courses/[id]/marks.svelte
+14 -9
View File
@@ -103,12 +103,12 @@
<div class="table rounded-md border border-gray-300 w-auto">
<div class="flex items-center {borderBottomGrey}">
<div class="box flex items-center p-3">
<p class="w-40">Student</p>
<p class="dark:text-white w-40">Student</p>
</div>
{#each $lessons as lesson, index}
{#if lessonMapping[lesson.id]}
<div class="box flex flex-col items-center {borderleftGrey}">
<p class="col lesson-number" title={lesson.title}>
<p class="dark:text-white col lesson-number" title={lesson.title}>
{getLectureNo(index + 1)}
</p>
<div
@@ -116,7 +116,8 @@
>
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
<p
class="col text-sm {index && borderleftGrey}"
class="col text-sm dark:text-white {index &&
borderleftGrey}"
title={lessonMapping[lesson.id][exerciseId].title}
>
{lessonMapping[lesson.id][exerciseId].title}
@@ -128,7 +129,7 @@
{/if}
{/each}
<div class="box flex items-center {borderleftGrey}">
<p class="w-20 text-center">Total</p>
<p class="dark:text-white w-20 text-center">Total</p>
</div>
</div>
@@ -143,8 +144,10 @@
class="w-8 h-8 rounded-full mr-2"
/>
<div class="text-sm">
<p class="font-semibold">{student.profile.fullname}</p>
<p>
<p class="dark:text-white font-semibold">
{student.profile.fullname}
</p>
<p class="dark:text-white">
{`${
student.assigned_student_id
? '#' + student.assigned_student_id
@@ -157,7 +160,7 @@
{#if lessonMapping[lesson.id]}
<div class="flex items-center">
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
<p class="col">
<p class="dark:text-white col">
{studentMarksByExerciseId[student.id]
? studentMarksByExerciseId[student.id][exerciseId] || '-'
: '-'}
@@ -169,7 +172,7 @@
<div class="w-20 flex items-center">
<div class="text-sm">
<p class="col">
<p class="dark:text-white col">
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
</p>
</div>
@@ -178,7 +181,9 @@
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
<h3 class="text-3xl text-gray-500 dark:text-gray-200">
No Student Added
</h3>
</Box>
{/each}
</div>
src/routes/courses/[id]/people.svelte
+11 -7
View File
@@ -136,12 +136,12 @@
<div
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<span class="w-1/4 text-center">ID</span>
<span class="dark:text-white w-1/4 text-center">ID</span>
<!-- <span class="flex-grow" /> -->
<p class="text-lg w-2/4">Name</p>
<p class="text-lg w-1/4 ">Role</p>
<p class="dark:text-white text-lg w-2/4">Name</p>
<p class="dark:text-white text-lg w-1/4">Role</p>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<p class="hidden lg:block text-lg w-20" />
<p class="dark:text-white hidden lg:block text-lg w-20" />
</RoleBasedSecurity>
</div>
@@ -157,7 +157,9 @@
/>
{:else}
<div class="student-id flex items-center justify-between relative">
<p class="w-11/12">{person.assigned_student_id || '-'}</p>
<p class="dark:text-white w-11/12">
{person.assigned_student_id || '-'}
</p>
{#if !isStudent}
<div class="absolute edit-btn">
<IconButton
@@ -182,7 +184,7 @@
name={person.profile.fullname}
/>
<div class="ml-2 break-all">
<p class="text-lg">{person.profile.fullname}</p>
<p class="dark:text-white text-lg">{person.profile.fullname}</p>
{#if !isStudent}
<a
href="mailto:{person.profile.email}"
@@ -206,7 +208,9 @@
</div>
{/if}
<p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
<p class="dark:text-white text-lg w-1/4">
{ROLE_LABEL[person.role_id]}
</p>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="hidden lg:block w-20">
src/routes/courses/[id]/submissions.svelte
+10 -6
View File
@@ -276,12 +276,12 @@
<div class="flex items-center w-full">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
class="section rounded-md bg-gray-100 dark:bg-gray-700 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
<Chip value={items.length} class="bg-set" />
<p class="ml-2 font-bold">{title}</p>
<p class="dark:text-white ml-2 font-bold">{title}</p>
</div>
<div
class="content pr-2 overflow-y-auto mb-3"
@@ -297,7 +297,7 @@
<div
class="border {item.isEarly
? 'border-grey-700'
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white py-3 px-3"
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-800 py-3 px-3"
animate:flip={{ duration: flipDurationMs }}
>
<div
@@ -311,7 +311,9 @@
class="block rounded-full h-6 w-6"
src={item.student.avatar_url}
/>
<p class="ml-2 text-sm">{item.student.username}</p>
<p class="dark:text-white ml-2 text-sm">
{item.student.username}
</p>
</div>
<a
class="text-blue-700 text-md font-bold"
@@ -324,12 +326,14 @@
href="{$page.path.replace('submissions', 'lessons')}/{item
.lesson.id}/exercises/{item.exercise.id}"
>
<p class="text-grey text-sm">
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
{`${item.tutor ? 'created by' + item.tutor.name : ''}`}
</p>
</a>
<p class="text-gray-500 text-xs">
<p
class="dark:text-white text-gray-500 dark:text-gray-200 text-xs"
>
{item.submittedAt}
</p>
<!-- <div class="badge rounded-md px-2 bg-green-500 text-white">
src/routes/dashboard.svelte
+5 -3
View File
@@ -136,7 +136,7 @@
<title>Dashboard - ClassroomIO</title>
</svelte:head>
<section class="root w-full py-10 bg-gray-100">
<section class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
<div class="calendar-root flex mx-2">
{#if !$isMobile}
<div id="calendar">
@@ -188,7 +188,7 @@
<span class="text-md ml-2">🔒</span>
{/if}
</a>
<p class="text-grey text-sm flex items-center">
<p class="dark:text-white text-grey text-sm flex items-center">
<a
class="underline text-blue-700 my-2"
href="/courses/{lessonData.course_id}"
@@ -212,7 +212,9 @@
{/if}
</div>
{:else}
<p class="flex items-center justify-center w-full no-data">
<p
class="dark:text-white flex items-center justify-center w-full no-data"
>
No lesson on this day
</p>
{/each}
src/routes/discussions.svelte
+1 -1
View File
@@ -177,7 +177,7 @@
<div class="discussion-box">
<Vote value={discussion.votes} />
<div class="discussion-topic-author">
<h4>
<h4 class="dark:text-white">
<a rel="prefetch" href="discussions/{discussion.id}"
>{discussion.title}</a
>
src/routes/discussions/[id].svelte
+12 -4
View File
@@ -45,8 +45,12 @@
class="block rounded-full"
src="https://picsum.photos/32/32/?random"
/>
<p class="ml-2 text-sm">{discussion.author.name}</p>
<p class="ml-2 text-sm text-gray-500">12h ago</p>
<p class="dark:text-white ml-2 text-sm">{discussion.author.name}</p>
<p
class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
>
12h ago
</p>
</a>
</header>
<section class="prose prose-sm sm:prose p-2">
@@ -75,8 +79,12 @@
height="20"
src={comment.avatar}
/>
<p class="ml-2 text-sm">{comment.name}</p>
<p class="ml-2 text-sm text-gray-500">12h ago</p>
<p class="dark:text-white ml-2 text-sm">{comment.name}</p>
<p
class="dark:text-white ml-2 text-sm text-gray-500 dark:text-gray-200"
>
12h ago
</p>
</a>
<CheckmarkOutline20 />
src/routes/forgot.svelte
+9 -5
View File
@@ -61,8 +61,8 @@
{#if success}
<div class="mt-4 w-full flex items-center justify-center flex-col">
<EmailSentIcon />
<h3 class="text-xl font-semibold my-3">Email Sent!</h3>
<p class="text-md mb-6 text-center">
<h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
<p class="dark:text-white text-md mb-6 text-center">
We have sent a confirmation email to <span class="text-blue-700"
>{fields.email}</span
>. Kindly check your inbox to reset password or spam to reset your
@@ -80,8 +80,12 @@
</div>
{:else}
<div class="mt-4 w-full">
<h3 class="text-xl font-semibold my-3">Forgot Password</h3>
<p class="text-sm mb-6">We will send you a reset link to your email</p>
<h3 class="dark:text-white text-xl font-semibold my-3">
Forgot Password
</h3>
<p class="dark:text-white text-sm mb-6">
We will send you a reset link to your email
</p>
<TextField
label="Your email"
bind:value={fields.email}
@@ -94,7 +98,7 @@
errorMessage={errors.email}
/>
{#if submitError}
<p class="text-sm text-red-500">{submitError}</p>
<p class="dark:text-white text-sm text-red-500">{submitError}</p>
{/if}
</div>
src/routes/index.svelte
+8 -6
View File
@@ -65,10 +65,10 @@
/>
-->
<div>
<h3 class="text-4xl text-center">
<h3 class="dark:text-white text-4xl text-center">
Classroom<span class="text-blue-700">IO</span>
</h3>
<p class="text-lg text-center">
<p class="dark:text-white text-lg text-center">
The operating system for classroooms of the future 🚀🚀🚀.
</p>
</div>
@@ -76,7 +76,9 @@
<form on:submit|preventDefault={handleSubmit} class="my-4">
<div class="flex items-center flex-col sm:flex-row">
{#if success}
<p>You have been added successfully. Thanks for joining.</p>
<p class="dark:text-white">
You have been added successfully. Thanks for joining.
</p>
{:else}
<TextField
bind:value={email}
@@ -97,9 +99,9 @@
<div class="flex flex-col md:flex-row">
{#each areas as area, index}
<div
class="box m-3 bg-white rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
>
<h3 class="text-3xl">
<h3 class="dark:text-white text-3xl">
{#if index === 0}
<FlowStreamReference32 class="carbon-icon" />
{:else if index === 1}
@@ -109,7 +111,7 @@
{/if}
{area.title}
</h3>
<p>{area.description}</p>
<p class="dark:text-white">{area.description}</p>
</div>
{/each}
</div>
src/routes/login.svelte
+2 -2
View File
@@ -58,7 +58,7 @@
bind:formRef
>
<div class="mt-4 w-full">
<p class="text-lg font-semibold mb-6">Welcome back</p>
<p class="dark:text-white text-lg font-semibold mb-6">Welcome back</p>
<TextField
label="Your email"
bind:value={fields.email}
@@ -81,7 +81,7 @@
errorMessage={errors.password}
/>
{#if submitError}
<p class="text-sm text-red-500">{submitError}</p>
<p class="dark:text-white text-sm text-red-500">{submitError}</p>
{/if}
<div class="w-full text-right">
<a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
src/routes/onboarding.svelte
+19 -9
View File
@@ -193,15 +193,15 @@
width="50"
data-atf="1"
/>
<h4 class="text-xl">ClassroomIO</h4>
<h4 class="dark:text-white text-xl">ClassroomIO</h4>
</div>
<!-- Loggedin Email -->
<div
class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 rounded-2xl border border-gray-300"
class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 dark:bg-gray-700 rounded-2xl border border-gray-300"
>
<UserProfileIcon />
<p class="text-sm ml-2">{$profile.email}</p>
<p class="dark:text-white text-sm ml-2">{$profile.email}</p>
</div>
</div>
@@ -252,14 +252,17 @@
<div
class="w-full flex items-start flex-col justify-between mb-10"
>
<label for="text-field" class="m-0 text-lg font-normal mb-3">
<label
for="text-field"
class="dark:text-white m-0 text-lg font-normal mb-3"
>
What brings you to ClassroomIO?
</label>
<!-- Loop through Goals -->
{#each educatorGoals as goal}
<label
class="w-full inline-flex items-center mb-1 font-light"
class="dark:text-white w-full inline-flex items-center mb-1 font-light"
>
<input
type="radio"
@@ -273,20 +276,25 @@
{/each}
<!-- Goal: Error message -->
{#if errors.goal}
<p class="text-sm text-red-500">{errors.goal}</p>
<p class="dark:text-white text-sm text-red-500">
{errors.goal}
</p>
{/if}
</div>
<!-- Source Question -->
<div class="w-full flex items-start flex-col justify-between">
<label for="text-field" class="m-0 text-lg font-normal mb-3">
<label
for="text-field"
class="dark:text-white m-0 text-lg font-normal mb-3"
>
How did you hear about us?
</label>
<!-- Loop through Goals -->
{#each sources as source}
<label
class="w-full inline-flex items-center mb-1 font-light"
class="dark:text-white w-full inline-flex items-center mb-1 font-light"
>
<input
type="radio"
@@ -300,7 +308,9 @@
{/each}
<!-- Goal: Error message -->
{#if errors.source}
<p class="text-sm text-red-500">{errors.source}</p>
<p class="dark:text-white text-sm text-red-500">
{errors.source}
</p>
{/if}
</div>
</div>
src/routes/org/[slug]/audience.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Audience</h1>
<h1 class="dark:text-white text-3xl font-bold">Audience</h1>
<PrimaryButton
label="Export"
onClick={exportAudience}
src/routes/org/[slug]/courses.svelte
+1 -1
View File
@@ -68,7 +68,7 @@
<section class="w-full max-w-7xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Courses</h1>
<h1 class="dark:text-white text-3xl font-bold">Courses</h1>
<PrimaryButton
label="Create Course"
onClick={() => ($createCourseModal.open = true)}
src/routes/org/[slug]/index.svelte
+13 -11
View File
@@ -211,7 +211,7 @@
<div class="py-10 px-5 w-full max-w-7xl mx-auto">
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Dashboard</h1>
<h1 class="dark:text-white text-3xl font-bold">Dashboard</h1>
<PrimaryButton label="Create Course" onClick={createCourse} />
</div>
@@ -220,8 +220,8 @@
<div
class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5"
>
<p class="mb-2 text-sm">{box.label}</p>
<p class="text-xl font-bold">{box.value}</p>
<p class="dark:text-white mb-2 text-sm">{box.label}</p>
<p class="dark:text-white text-xl font-bold">{box.value}</p>
</div>
{/each}
</div>
@@ -229,7 +229,7 @@
<div class="flex flex-wrap">
<!-- Your Schedule -->
<div>
<p class="font-bold mb-7">Your Schedule</p>
<p class="dark:text-white font-bold mb-7">Your Schedule</p>
<div class="rounded border w-2/5 border-gray-200 mr-5 schedule-box">
{#if !$isMobile}
<div id="calendar" class="flex justify-center mt-5">
@@ -253,7 +253,7 @@
</Datepicker>
</div>
{:else}
<p class="font-bold m-5">
<p class="dark:text-white font-bold m-5">
{formatDate($store?.selected)}
</p>
{/if}
@@ -276,7 +276,7 @@
<span class="text-md ml-2">🔒</span>
{/if}
</a>
<p class="text-grey text-sm flex items-center">
<p class="dark:text-white text-grey text-sm flex items-center">
<a
class="underline text-blue-700 my-2"
href="/courses/{lessonData.course_id}"
@@ -300,7 +300,9 @@
{/if}
</div>
{:else}
<p class="flex items-center justify-center w-full no-data">
<p
class="dark:text-white flex items-center justify-center w-full no-data"
>
No lesson on this day
</p>
{/each}
@@ -309,22 +311,22 @@
<!-- Your Activities -->
<div>
<p class="font-bold mb-7">Your Activities</p>
<p class="dark:text-white font-bold mb-7">Your Activities</p>
<div class="rounded border border-gray-200 w-5 activities-box py-4 px-5">
{#each activities as activity}
<div class="flex mb-3 pb-3 border-b border-gray-200">
<Avatar src={activity.avatar} name="avatar" />
<div class="ml-2 flex">
<div class="mr-2">
<p>{activity.name}</p>
<p class="mb-2 mt-1">
<p class="dark:text-white">{activity.name}</p>
<p class="dark:text-white mb-2 mt-1">
{activity.description}
</p>
<a href={activity.link}>View</a>
</div>
<div>
<p>{activity.time}</p>
<p class="dark:text-white">{activity.time}</p>
</div>
</div>
</div>
src/routes/org/[slug]/settings/domains.svelte
+2 -2
View File
@@ -10,11 +10,11 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<a
class="text-gray-500 text-md"
class="text-gray-500 dark:text-gray-200 text-md"
href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
>
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Custom domain</h1>
<h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
</div>
<Domains />
src/routes/org/[slug]/settings/index.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Settings</h1>
<h1 class="dark:text-white text-3xl font-bold">Settings</h1>
</div>
<OrgSettings />
src/routes/org/[slug]/settings/teams.svelte
+2 -2
View File
@@ -10,11 +10,11 @@
<section class="w-full max-w-6xl mx-auto">
<div class="py-10 px-5">
<a
class="text-gray-500 text-md"
class="text-gray-500 dark:text-gray-200 text-md"
href={`/org/${$currentOrg.siteName}/settings`}>Back to Settings</a
>
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-bold">Team members</h1>
<h1 class="dark:text-white text-3xl font-bold">Team members</h1>
</div>
<TeamMembers />
src/routes/people.svelte
+4 -4
View File
@@ -38,7 +38,7 @@
<div
class="flex items-center justify-between {borderBottom} border-blue-700"
>
<h3 class="text-3xl text-blue-700">Teachers</h3>
<h3 class="dark:text-white text-3xl text-blue-700">Teachers</h3>
<IconButton
toolTipProps={{ title: 'Add', direction: 'right' }}
onClick={addTeacher}
@@ -54,7 +54,7 @@
borderBottom} border-gray-300"
>
<Avatar src={teacher.avatar} name={teacher.name} />
<p class="ml-2">{teacher.name}</p>
<p class="dark:text-white ml-2">{teacher.name}</p>
</div>
{/each}
</div>
@@ -63,7 +63,7 @@
<div
class="flex items-center justify-between {borderBottom} border-blue-700"
>
<h3 class="text-3xl text-blue-700">Students</h3>
<h3 class="dark:text-white text-3xl text-blue-700">Students</h3>
<IconButton
toolTipProps={{ title: 'Add', direction: 'right' }}
onClick={addStudent}
@@ -79,7 +79,7 @@
borderBottom} border-gray-300"
>
<Avatar src={student.avatar} name={student.name} />
<p class="ml-2">{student.name}</p>
<p class="dark:text-white ml-2">{student.name}</p>
</div>
{/each}
</div>
src/routes/profile/[id].svelte
+8 -8
View File
@@ -171,23 +171,23 @@
/>
{/if}
{:else}
<h3 class="text-xl">{currentProfile.username}</h3>
<h3 class="dark:text-white text-xl">{currentProfile.username}</h3>
{/if}
</div>
<div class="flex-grow" />
<div class="flex-grow flex flex-wrap mx-3 w-3/5">
<div class="mb-3 w-full">
<h3 class="font-bold text-md m-0">Organizations</h3>
<p class="text-gray-500 text-sm">
<h3 class="dark:text-white font-bold text-md m-0">Organizations</h3>
<p class="dark:text-white text-gray-500 dark:text-gray-200 text-sm">
This are the organizations you work at
</p>
<div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
<h4 class="m-0 font-normal">
<h4 class="dark:text-white m-0 font-normal">
<a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
</h4>
<p class="text-gray-500">
<p class="dark:text-white text-gray-500 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam
tenetur magnam. Alias cumque quaerat expedita dolores placeat
laboriosam culpa, suscipit veritatis adipisci eius magni obcaecati.
@@ -205,12 +205,12 @@
</div>
<div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
<h4 class="m-0 font-normal">
<h4 class="dark:text-white m-0 font-normal">
<a class="text-blue-700 font-bold" href="/courses">
Climate Change Group
</a>
</h4>
<p class="text-gray-500">
<p class="dark:text-white text-gray-500 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi
autem quo possimus illum consequuntur repudiandae nobis error, porro
</p>
@@ -241,7 +241,7 @@
<div>
<Search32 />
</div>
<h3 class="text-xxl">Profile not found</h3>
<h3 class="dark:text-white text-xxl">Profile not found</h3>
</Box> -->
{/if}
</section>
src/routes/reset.svelte
+3 -3
View File
@@ -71,8 +71,8 @@
bind:formRef
>
<div class="mt-4 w-full">
<h3 class="text-xl font-semibold my-3">New Password</h3>
<p class="text-sm mb-6">Enter your new password details</p>
<h3 class="dark:text-white text-xl font-semibold my-3">New Password</h3>
<p class="dark:text-white text-sm mb-6">Enter your new password details</p>
<TextField
label="Your Password"
bind:value={fields.password}
@@ -97,7 +97,7 @@
isRequired
/>
{#if submitError}
<p class="text-sm text-red-500">{submitError}</p>
<p class="dark:text-white text-sm text-red-500">{submitError}</p>
{/if}
</div>
src/routes/signup.svelte
+4 -2
View File
@@ -74,7 +74,9 @@
bind:formRef
>
<div class="mt-4 w-full">
<p class="text-lg font-semibold mb-6">Create a free account</p>
<p class="dark:text-white text-lg font-semibold mb-6">
Create a free account
</p>
<!-- <TextField
label="Full Name"
bind:value={fields.name}
@@ -122,7 +124,7 @@
isRequired
/>
{#if submitError}
<p class="text-sm text-red-500">{submitError}</p>
<p class="dark:text-white text-sm text-red-500">{submitError}</p>
{/if}
</div>