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 <[email protected]>

Merge-request: CLASSROOMIO-MR-8
Merged-by: Digdippa Team <[email protected]>
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/Apps/components/LiveChat/index.svelte
+20 -20
View File
@@ -1,35 +1,35 @@
<script>
import marked from "marked";
import PageNav from "../../../PageNav/index.svelte";
import CloseButton from "../../../Buttons/Close/index.svelte";
import TextField from "../../../Form/TextField.svelte";
import marked from 'marked';
import PageNav from '../../../PageNav/index.svelte';
import CloseButton from '../../../Buttons/Close/index.svelte';
import TextField from '../../../Form/TextField.svelte';
// import SendButton from "../../../Buttons/Send/index.svelte";
export let handleClose;
let message = "";
let message = '';
let bodyRef;
let chats = [
{
avatar: "https://picsum.photos/32/32/?random",
name: "Evgeniy",
avatar: 'https://picsum.photos/32/32/?random',
name: 'Evgeniy',
message: "I'am looking at this and it looks great",
},
{
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
message:
"Thanks for the feedback, what do you think about my website. https://rotimibest.com",
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
},
{
avatar: "https://picsum.photos/32/32/?random",
name: "Vitalii Marushko",
message: "Всем привет",
avatar: 'https://picsum.photos/32/32/?random',
name: 'Vitalii Marushko',
message: 'Всем привет',
},
{
avatar: "https://picsum.photos/32/32/?random",
name: "Natasha",
message: "Привет Виталий",
avatar: 'https://picsum.photos/32/32/?random',
name: 'Natasha',
message: 'Привет Виталий',
},
];
@@ -41,8 +41,8 @@
chats = [
...chats,
{
avatar: "https://picsum.photos/32/32/?random",
name: "You",
avatar: 'https://picsum.photos/32/32/?random',
name: 'You',
message,
},
];
@@ -57,7 +57,7 @@
}
function handleKeyDown(e) {
if (e.key === "Enter") {
if (e.key === 'Enter') {
handleSend();
}
}
@@ -80,7 +80,7 @@
height="20"
src={chat.avatar}
/>
<p class="ml-2 text-sm font-bold">{chat.name}</p>
<p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
</div>
<article class="prose prose-sm sm:prose pt-2 pl-8">
{@html marked(chat.message)}
src/components/Apps/components/Poll/components/FormSection.svelte
+9 -7
View File
@@ -1,18 +1,20 @@
<script>
export let value;
export let label;
export let type = "text";
export let name = "text";
export let type = 'text';
export let name = 'text';
export let handleLabelButton;
export let handleInputButton;
</script>
<div class="mb-3">
{#if label}
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
<p
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
>
{label}
{#if typeof handleLabelButton === "function"}
{#if typeof handleLabelButton === 'function'}
<button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
+
</button>
@@ -21,15 +23,15 @@
{/if}
<div class="w-full">
{#if type === "text"}
{#if type === 'text'}
<input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
{/if}
{#if type === "date"}
{#if type === 'date'}
<input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
{/if}
{#if typeof handleInputButton === "function"}
{#if typeof handleInputButton === 'function'}
<button class="text-xl px-3 ml-5" on:click={handleInputButton}>
-
</button>
src/components/Apps/components/Poll/components/Label.svelte
+3 -1
View File
@@ -1,3 +1,5 @@
<p class="p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600">
<p
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
>
<slot />
</p>
src/components/Apps/components/Poll/components/Poll.svelte
+12 -12
View File
@@ -48,7 +48,7 @@
}
</script>
<div class="p-4 bg-white-100 border-2 rounded-md mb-3">
<div class="p-4 bg-white dark:bg-gray-800-100 border-2 rounded-md mb-3">
{#if selectedOptionToView}
<div>
<div class="flex items-center mb-5">
@@ -59,13 +59,13 @@
{`<`}
</button>
<div class="flex-grow text-center">
<h3 class="font-bold">Voted</h3>
<h3 class="dark:text-white font-bold">Voted</h3>
</div>
</div>
{#each selectedOptionToView.selectedBy as user}
<div class="flex items-center mb-2">
<Avatar src={user.avatar} name={user.label} className="mr-2" />
<p>
<p class="dark:text-white">
{user.label}
</p>
</div>
@@ -74,10 +74,10 @@
{:else}
<div class="flex mb-3 justify-between">
<div>
<h3 class="font-bold">
<h3 class="dark:text-white font-bold">
{poll.question}
</h3>
<p class="text-sm italic">
<p class="dark:text-white text-sm italic">
Created by <a
class="text-blue-500"
href="https://twitter.com/rotimi_best"
@@ -102,13 +102,13 @@
<div class="flex items-center justify-between">
<div class="mr-5">
<Label>Expiration</Label>
<p class="text-sm text-gray-600 mb-4">
<p class="dark:text-white text-sm text-gray-600 mb-4">
{poll.expiration || 'Today'}
</p>
</div>
<div class="flex flex-col items-center">
<Label>Total Votes</Label>
<p class="text-sm text-gray-600 mb-4">
<p class="dark:text-white text-sm text-gray-600 mb-4">
{totalVotes}
</p>
</div>
@@ -117,7 +117,7 @@
<Label>Responses</Label>
{#each poll.options as option, index}
<div class="border-b p-5">
<p>
<p class="dark:text-white">
{option.label}
</p>
@@ -148,7 +148,7 @@
{:else}
{#each poll.options as option, index}
<button
class="bg-white rounded-md border-2 border-gray-500 {didUserSelect(
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
option
) &&
'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
@@ -158,7 +158,7 @@
<span
class="progress absolute top-0 left-0 {didUserSelect(option)
? 'bg-blue-700'
: 'bg-gray-300'} h-full bg-opacity-25 "
: 'bg-gray-300'} h-full bg-opacity-25"
style="width: {calculatePercent(poll.options, option)}%;"
/>
<strong class="mr-3"
@@ -169,11 +169,11 @@
</button>
{/each}
<div class="flex items-center">
<p class="text-sm text-gray-600">
<p class="dark:text-white text-sm text-gray-600">
Expires: {poll.expiration || 'Today'}
</p>
<span class="mx-2">|</span>
<p class="text-sm text-gray-600">
<p class="dark:text-white text-sm text-gray-600">
Voted: {totalVotes}
</p>
</div>
src/components/Apps/components/Poll/index.svelte
+34 -34
View File
@@ -1,43 +1,43 @@
<script>
import PageNav from "../../../PageNav/index.svelte";
import CloseButton from "../../../Buttons/Close/index.svelte";
import PrimaryButton from "../../../PrimaryButton/index.svelte";
import { VARIANTS } from "../../../PrimaryButton/constants";
import CreatePollForm from "./components/CreatePollForm.svelte";
import Poll from "./components/Poll.svelte";
import Tabs from "./components/Tabs.svelte";
import PageNav from '../../../PageNav/index.svelte';
import CloseButton from '../../../Buttons/Close/index.svelte';
import PrimaryButton from '../../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../../PrimaryButton/constants';
import CreatePollForm from './components/CreatePollForm.svelte';
import Poll from './components/Poll.svelte';
import Tabs from './components/Tabs.svelte';
export let handleClose;
const users = [
{
label: "Rich Harris",
value: "rich-harris",
avatar: "https://i.pravatar.cc/150?img=1",
label: 'Rich Harris',
value: 'rich-harris',
avatar: 'https://i.pravatar.cc/150?img=1',
},
{
label: "Linus Torvalds",
value: "linus-torvalds",
avatar: "https://i.pravatar.cc/150?img=2",
label: 'Linus Torvalds',
value: 'linus-torvalds',
avatar: 'https://i.pravatar.cc/150?img=2',
},
{
label: "Elon Musk",
value: "elon-musk",
avatar: "https://i.pravatar.cc/150?img=3",
label: 'Elon Musk',
value: 'elon-musk',
avatar: 'https://i.pravatar.cc/150?img=3',
},
{
label: "Satoshi Nakamoto",
value: "satoshi-nakamoto",
avatar: "https://i.pravatar.cc/150?img=4",
label: 'Satoshi Nakamoto',
value: 'satoshi-nakamoto',
avatar: 'https://i.pravatar.cc/150?img=4',
},
];
const tabs = [
{
label: "My polls",
label: 'My polls',
value: 0,
},
{
label: "Other polls",
label: 'Other polls',
value: 1,
},
];
@@ -47,36 +47,36 @@
let shouldCreatePoll = false;
let polls = [
{
question: "Who is the creator of Svelte?",
question: 'Who is the creator of Svelte?',
author: users[0],
status: "draft", // public
status: 'draft', // public
expiration: new Date().toDateString(),
options: [
{
label: "Dan Abrahmov",
label: 'Dan Abrahmov',
selectedBy: [],
},
{
label: "Evan You",
label: 'Evan You',
selectedBy: [
{
label: "Rich Harris",
value: "rich-harris",
avatar: "https://i.pravatar.cc/150?img=1",
label: 'Rich Harris',
value: 'rich-harris',
avatar: 'https://i.pravatar.cc/150?img=1',
},
{
label: "Linus Torvalds",
value: "linus-torvalds",
avatar: "https://i.pravatar.cc/150?img=2",
label: 'Linus Torvalds',
value: 'linus-torvalds',
avatar: 'https://i.pravatar.cc/150?img=2',
},
],
},
{
label: "Rich Harris",
label: 'Rich Harris',
selectedBy: [],
},
{
label: "Yehuda Katz",
label: 'Yehuda Katz',
selectedBy: [],
},
],
@@ -186,7 +186,7 @@
{/if}
{:else}
<div
class="bg-gray-100 border rounded-md h-60 flex items-center justify-center "
class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
>
<h2 class="text-xl font-bold">No polls to display</h2>
</div>
src/components/Apps/components/QandA/index.svelte
+17 -17
View File
@@ -1,10 +1,10 @@
<script>
import marked from "marked";
import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
import PageNav from "../../../PageNav/index.svelte";
import CloseButton from "../../../Buttons/Close/index.svelte";
import Vote from "../../../Vote/index.svelte";
import TextField from "../../../Form/TextField.svelte";
import marked from 'marked';
import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
import PageNav from '../../../PageNav/index.svelte';
import CloseButton from '../../../Buttons/Close/index.svelte';
import Vote from '../../../Vote/index.svelte';
import TextField from '../../../Form/TextField.svelte';
export let handleClose;
let bodyRef;
@@ -13,30 +13,30 @@
let questions = [
{
id: 1,
name: "Evgeniy",
name: 'Evgeniy',
question: "I'am looking at this and it looks great",
vote: 1,
answered: false,
},
{
id: 2,
name: "Sergey Semko",
name: 'Sergey Semko',
question:
"Thanks for the feedback, what do you think about my website. https://rotimibest.com",
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
vote: 4,
answered: false,
},
{
id: 3,
name: "Vitalii Marushko",
question: "Всем привет",
name: 'Vitalii Marushko',
question: 'Всем привет',
vote: 20,
answered: false,
},
{
id: 4,
name: "Natasha",
question: "Привет Виталий",
name: 'Natasha',
question: 'Привет Виталий',
vote: 0,
answered: false,
},
@@ -51,7 +51,7 @@
...questions,
{
id: questions.length,
name: "You",
name: 'You',
question,
vote: 0,
answered: false,
@@ -82,7 +82,7 @@
}
function handleKeyDown(e) {
if (e.key === "Enter") {
if (e.key === 'Enter') {
handleSend();
}
}
@@ -99,13 +99,13 @@
<div class="flex items-start ml-2 mb-2 mt-2">
<Vote bind:value={question.vote} />
<div class="ml-2 flex-grow">
<p class="text-sm font-bold">{question.name}</p>
<p class="dark:text-white text-sm font-bold">{question.name}</p>
<article class="prose prose-sm sm:prose">
{@html marked(question.question)}
</article>
</div>
<button
class={`${question.answered && "active"}`}
class={`${question.answered && 'active'}`}
on:click={handleMarkAnswered(question.id)}
>
<CheckmarkOutline20 class="carbon-icon" />
src/components/AskPage/AskPage.svelte
+3 -1
View File
@@ -57,7 +57,9 @@
</button>
{#if facultyFilterOpened}
<div class="w-48 bg-white border border-grey rounded-lg mt-2 py-3">
<div
class="w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3"
>
{#each faculties as faculty}
<div class="block px-4 py-3 border-b">
<input
src/components/AuthUI/index.svelte
+3 -3
View File
@@ -27,7 +27,7 @@
</script>
<div class="w-full min-h-screen flex items-center justify-center mt-4">
<div class="container border border-gray bg-white">
<div class="container border border-gray bg-white dark:bg-gray-800">
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
{#if !showOnlyContent || showLogo}
<div class="flex items-center w-full justify-center pt-4">
@@ -38,7 +38,7 @@
width="50"
data-atf="1"
/>
<h4 class="text-xl">ClassroomIO</h4>
<h4 class="dark:text-white text-xl">ClassroomIO</h4>
</div>
{/if}
<form
@@ -50,7 +50,7 @@
</form>
{#if !showOnlyContent}
<div class="w-10/12 mb-3">
<p class="text-sm mb-5">or sign up with:</p>
<p class="dark:text-white text-sm mb-5">or sign up with:</p>
<PrimaryButton
variant={VARIANTS.OUTLINED}
onClick={signInWithGoogle}
src/components/CodeSnippet/index.svelte
+4 -4
View File
@@ -1,9 +1,9 @@
<script>
import marked from "marked";
import marked from 'marked';
export let code = "";
export let code = '';
</script>
<div class="bg-gray-200 p-5 rounded-md mb-3">
{@html marked("```js\n" + code + "\n```")}
<div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
{@html marked('```js\n' + code + '\n```')}
</div>
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
src/components/CourseLandingPage/components/Editor/Container.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
>
{#if show}
<div class="relative h-full bg-white">
<div class="relative h-full bg-white dark:bg-gray-800">
<slot />
</div>
{/if}
src/components/CourseLandingPage/components/Editor/PricingForm.svelte
+1 -1
View File
@@ -82,7 +82,7 @@
</div>
{#if giftToggled}
<p class="font-bold mt-5">About Gift</p>
<p class="dark:text-white font-bold mt-5">About Gift</p>
<div class="h-2/5">
<TextEditor
src/components/CourseLandingPage/components/Editor/index.svelte
+4 -4
View File
@@ -132,24 +132,24 @@
</div>
</div>
<div class="flex justify-between items-center px-2 w-full mb-2">
<h3 class="">Page Builder</h3>
<h3 class="dark:text-white">Page Builder</h3>
</div>
{#each sections as section}
<button
class="w-full flex items-center justify-between px-2 py-3 border border-b-0 border-gray-300"
on:click={handleSectionSelect(section.key)}
>
<p class="mr-2">{section.title} section</p>
<p class="dark:text-white mr-2">{section.title} section</p>
<ChevronRight24 class="carbon-class" />
</button>
{/each}
{:else}
<!-- Title -->
<div class="flex items-center {borderBottomGrey} w-full">
<div class="flex items-center {borderBottomGrey} w-full">
<IconButton onClick={handleClose}>
<ArrowLeft24 class="carbon-icon" title="Go back" />
</IconButton>
<h3 class="">{selectedSection.title}</h3>
<h3 class="dark:text-white">{selectedSection.title}</h3>
</div>
<div class="p-2 h-4/5 overflow-y">
src/components/CourseLandingPage/components/PricingSection.svelte
+9 -3
View File
@@ -42,11 +42,13 @@
<div class="p-10">
<!-- Pricing -->
<div class="mb-6">
<p class="font-medium text-lg">
<p class="dark:text-white font-medium text-lg">
{formatter?.format(calculatedCost) || calculatedCost}
</p>
{#if courseData?.metadata?.showDiscount}
<p class="font-light text-sm text-gray-500">
<p
class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
>
{discount}% Discount.
<span class="line-through"
>{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
@@ -68,7 +70,11 @@
variant={VARIANTS.OUTLINED}
onClick={addToCart}
/>
<p class="font-light text-sm text-gray-500">Early bird offer. Buy ASAP</p>
<p
class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
>
Early bird offer. Buy ASAP
</p>
</div>
</div>
src/components/CourseLandingPage/index.svelte
+19 -13
View File
@@ -73,7 +73,7 @@
<title>{get(courseData, 'title', '')}</title>
</svelte:head>
<div class="w-full bg-white flex flex-col items-center">
<div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
<!-- Header Section -->
<header class="banner w-full flex items-center justify-center p-">
<div
@@ -81,14 +81,14 @@
>
<!-- Course Description -->
<div class="md:w-2/5 w-11/12 py-10">
<h1 class="text-5xl text-white my-4 font-bold">
<h1 class="dark:text-white text-5xl text-white my-4 font-bold">
{get(courseData, 'title', '')}
</h1>
<p class="text-md text-white mb-6">
<p class="dark:text-white text-md text-white mb-6">
{get(courseData, 'description', '')}
</p>
<p class="author my-3 text-sm">
<p class="dark:text-white author my-3 text-sm">
{get(courseData, 'metadata.instructor.name', '')}
</p>
<PrimaryButton
@@ -141,7 +141,7 @@
</header>
<PricingSection className="md:hidden" {courseData} />
<!-- Body -->
<div class="bg-white w-full">
<div class="bg-white dark:bg-gray-800 w-full">
<div class="py-8 lg:w-10/12 w-full m-2 lg:m-auto flex justify-between">
<!-- Course Details -->
<div class="course-content w-full p-3 md:w-9/12 md:mr-14">
@@ -169,7 +169,7 @@
<!-- Sections - Course Description -->
<section id="description" class="border-b border-gray-300 mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0 mb-3">Course Description</h3>
<p class="text-sm font-light">
<p class="dark:text-white text-sm font-light">
{@html get(courseData, 'metadata.description', '')}
</p>
</section>
@@ -185,7 +185,7 @@
<!-- Sections - Certificate -->
<section class="border-b border-gray-300 mt-8 pb-10">
<h3 class="text-2xl font-bold mt-0">Certificate</h3>
<p class="text-sm font-light mb-3">
<p class="dark:text-white text-sm font-light mb-3">
When you complete all of the courses in the program, you'll earn a
Certificate to share with your professional network.
</p>
@@ -199,7 +199,7 @@
<section id="lessons" class="border-b border-gray-300 mt-8 pb-10">
<div class="flex items-center justify-between w-full mb-3">
<h3 class="text-2xl font-bold mt-0 mb-3">Course Content</h3>
<p class="text-sm font-light">
<p class="dark:text-white text-sm font-light">
<!-- {lessons.length} lessons -->
{pluralize('lesson', lessons.length, true)}
</p>
@@ -213,7 +213,9 @@
value={getLectureNo(index + 1, '0')}
className="bg-blue-100 text-blue-700"
/>
<p class="ml-2 text-sm font-light">{lesson.title}</p>
<p class="dark:text-white ml-2 text-sm font-light">
{lesson.title}
</p>
</div>
<div class="w-2/4">
@@ -260,9 +262,13 @@
src={get(instructor, 'imgUrl', '')}
/>
<div>
<p class="text-md font-light">{get(instructor, 'name', '')}</p>
<p class="text-xs font-light">{get(instructor, 'role', '')}</p>
<p class="text-md font-light flex items-center">
<p class="dark:text-white text-md font-light">
{get(instructor, 'name', '')}
</p>
<p class="dark:text-white text-xs font-light">
{get(instructor, 'role', '')}
</p>
<p class="dark:text-white text-md font-light flex items-center">
<PlayFilled class="text-blue-700" />
<span class="ml-1"
>{get(instructor, 'courseNo', '')} courses</span
@@ -271,7 +277,7 @@
</div>
</div>
<p class="text-sm font-light">
<p class="dark:text-white text-sm font-light">
{get(instructor, 'description', '')}
</p>
</section>
src/components/Courses/components/Card/Loader.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script>
<div
class="root w-72 border bg-white mr-4 mb-4 rounded-md transition ease-in-out relative"
class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
>
<SkeletonPlaceholder style="width: 100%; height: 10rem;" />
<div class="p-3 pb-0">
src/components/Courses/components/Card/index.svelte
+7 -7
View File
@@ -42,16 +42,16 @@
}
</script>
<a rel="prefetch" href="/courses/{id}" class=" text-black ">
<a rel="prefetch" href="/courses/{id}" class=" text-black">
<div
class="root w-72 border bg-white mr-4 mb-4 rounded-md transition ease-in-out relative"
class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
>
<Dropdown
options={getOptions()}
classNames="absolute top-4 right-4"
isIcon={true}
>
<div class="p-1 rounded-full bg-white">
<div class="p-1 rounded-full bg-white dark:bg-gray-600">
<OverflowMenuHorizontal24 class="carbon-icon" />
</div>
</Dropdown>
@@ -61,17 +61,17 @@
alt="Course Logo"
/>
<div class="p-3 pb-0">
<h4 class="title text-md font-bold">
<h4 class="dark:text-white title text-md font-bold">
{title}
</h4>
<p
class="description text-left text-sm font-small flex flex-col text-gray-500 my-3"
class="description text-left text-sm font-small flex flex-col text-gray-500 dark:text-gray-200 my-3"
title={description}
>
{description}
</p>
<div class="flex justify-between">
<p>{totalLessons} lessons</p>
<p class="dark:text-white">{totalLessons} lessons</p>
<div class="rounded bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
{#if isPublished}
Published
@@ -80,7 +80,7 @@
{/if}
</div>
</div>
<p class="text-gray-500 text-xs mt-1">
<p class="dark:text-white text-gray-500 text-xs mt-1">
{!cost ? 'free' : formatter.format(cost)}
</p>
</div>
src/components/Courses/index.svelte
+2 -2
View File
@@ -33,8 +33,8 @@
{:else}
<Box>
<CoursesEmptyIcon />
<h3 class="text-2xl my-5">No Courses Created</h3>
<p class="w-1/3 text-center">
<h3 class="dark:text-white text-2xl my-5">No Courses Created</h3>
<p class="dark:text-white w-1/3 text-center">
Share your knowledge with the world by creating engaging courses for
your students.
</p>
src/components/Dropdown/index.svelte
+3 -2
View File
@@ -45,11 +45,12 @@
{#if open}
<div
class="dropdown w-48 bg-white border border-grey rounded-lg mt-2 py-3 absolute"
class="dropdown w-48 bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
>
{#each options as option, index}
<button
class="block px-4 py-3 {!isOptionLast(index) && 'border-b'} w-full"
class="block px-4 py-3 {!isOptionLast(index) &&
'border-b'} w-full dark:text-white"
on:click={onClick(option)}
>
{option.label}
src/components/EditContent/index.svelte
+1 -1
View File
@@ -62,7 +62,7 @@
d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
/>
</svg>
<p>
<p class="dark:text-white">
Styling with Markdown is supported.
<a
target="_blank"
src/components/ErrorMessage/index.svelte
+1 -1
View File
@@ -2,4 +2,4 @@
export let message;
</script>
<p class="text-sm text-red-500">{message}</p>
<p class="dark:text-white text-sm text-red-500">{message}</p>
src/components/Expandable/index.svelte
+2 -2
View File
@@ -22,7 +22,7 @@
}
</script>
<div {id} class="w-full bg-white {rootClass}">
<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
<div
class="w-full relative flex items-center justify-between {!disableContainerPadding &&
'p-5'}"
@@ -30,7 +30,7 @@
tabindex="0"
on:click={handleClick}
>
<p class="font-bold flex items-center {titleClass}">
<p class="dark:text-white font-bold flex items-center {titleClass}">
{title}
{#if supportsLink}
<a
src/components/Form/Checkbox.svelte
+2 -2
View File
@@ -24,14 +24,14 @@
/>
{#if isEditable}
<input
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
type="text"
placeholder="Your option"
bind:value={label}
on:change={onChange}
/>
{:else}
<span class="ml-2">{label}</span>
<span class="dark:text-white ml-2">{label}</span>
{/if}
<slot name="iconbutton" />
src/components/Form/Date.svelte
+1 -1
View File
@@ -7,7 +7,7 @@
</script>
<label class="block {className}">
<span class="text-gray-700">{label}</span>
<span class="text-gray-700 dark:text-white">{label}</span>
<input
bind:value
{placeholder}
src/components/Form/DateTime.svelte
+1 -1
View File
@@ -8,7 +8,7 @@
</script>
<label class="block {className}">
<span class="text-gray-700">{label}</span>
<span class="text-gray-700 dark:text-white">{label}</span>
<input
bind:value
on:input={onInput}
src/components/Form/RadioItem.svelte
+2 -2
View File
@@ -24,14 +24,14 @@
/>
{#if isEditable}
<input
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
type="text"
placeholder="Your option"
bind:value={label}
on:change={onChange}
/>
{:else}
<span class="ml-2">{label}</span>
<span class="dark:text-white ml-2">{label}</span>
{/if}
<slot name="iconbutton" />
src/components/Form/Select.svelte
+4 -2
View File
@@ -16,7 +16,9 @@
</script>
<label class="block {className}">
{#if label} <span class="text-gray-700 mr-2">{label}</span> {/if}
{#if label}
<span class="text-gray-700 dark:text-white mr-2">{label}</span>
{/if}
<select
bind:value
class="form-select block w-auto mt-1 {selectClassName}"
@@ -26,7 +28,7 @@
class:customColor={!!selectClassName}
>
{#each options as option}
<option class="bg-white text-black" value={option}>
<option class="bg-white dark:bg-gray-800 text-black" value={option}>
{option[labelKey]}
</option>
{/each}
src/components/Form/TextArea.svelte
+4 -4
View File
@@ -6,7 +6,7 @@
export let maxRows = 3;
export let className = '';
export let labelClassName = '';
export let bgColor = 'bg-gray-200';
export let bgColor = 'bg-gray-200 dark:bg-gray-500';
export let helperMessage = '';
export let errorMessage = '';
export let isRequired = false;
@@ -18,7 +18,7 @@
<label class="block w-full relative {className}">
{#if label}
<p for="text-field" class={labelClassName}>
<p for="text-field" class="dark:text-white {labelClassName}">
{label}
{#if isRequired}
@@ -38,7 +38,7 @@
{placeholder}
bind:value
required={isRequired}
class="form-textarea mt-1 block w-full
class="form-textarea mt-1 block w-full
{bgColor} border-t-0 border-l-0 border-r-0 border-b-1 {!!errorMessage
? 'border-red-500'
: 'border-gray-300'}"
@@ -49,7 +49,7 @@
{errorMessage}
</p>
{:else if helperMessage}
<p class="text-sm text-gray-500">
<p class="text-sm text-gray-500 dark:text-gray-200">
{helperMessage}
</p>
{/if}
src/components/Form/TextField.svelte
+6 -3
View File
@@ -52,7 +52,10 @@
<label class="block relative {className}">
{#if label}
<label for="text-field" class="m-0 font-light {labelClassName}">
<label
for="text-field"
class="dark:text-white m-0 font-light {labelClassName}"
>
{label}
{#if isRequired}
@@ -83,9 +86,9 @@
</span>
{/if}
{#if errorMessage}
<p class="text-sm text-red-500">{errorMessage}</p>
<p class="dark:text-white text-sm text-red-500">{errorMessage}</p>
{:else if helperMessage}
<p class="text-sm">
<p class="dark:text-white text-sm">
{helperMessage}
</p>
{/if}
src/components/Icons/AudienceIcon.svelte
+1
View File
@@ -4,6 +4,7 @@
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
fill-rule="evenodd"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

src/components/Icons/CourseIcon.svelte
+1
View File
@@ -4,6 +4,7 @@
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
d="M18 22.5H6C5.60232 22.4995 5.22105 22.3414 4.93984 22.0602C4.65864 21.7789 4.50046 21.3977 4.5 21V3C4.5004 2.6023 4.65856 2.221 4.93978 1.93978C5.221 1.65856 5.6023 1.5004 6 1.5H18C18.3977 1.50046 18.779 1.65864 19.0602 1.93984C19.3414 2.22105 19.4995 2.60232 19.5 3V15.4636L15.75 13.5886L12 15.4636V3H6V21H18V18H19.5V21C19.4995 21.3977 19.3413 21.7789 19.0601 22.0601C18.7789 22.3413 18.3977 22.4995 18 22.5ZM15.75 11.9114L18 13.0364V3H13.5V13.0364L15.75 11.9114Z"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 634 B

src/components/Icons/HomeIcon.svelte
+1
View File
@@ -4,6 +4,7 @@
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
fill-rule="evenodd"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

src/components/Icons/PasswordEye.svelte
+2
View File
@@ -9,6 +9,7 @@
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
fill-rule="evenodd"
@@ -24,6 +25,7 @@
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
d="M0.666748 8.00008C0.666748 8.00008 3.33341 2.66675 8.00008 2.66675C12.6667 2.66675 15.3334 8.00008 15.3334 8.00008C15.3334 8.00008 12.6667 13.3334 8.00008 13.3334C3.33341 13.3334 0.666748 8.00008 0.666748 8.00008Z"
src/components/Icons/SiteSettingsIcon.svelte
+1
View File
@@ -4,6 +4,7 @@
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="dark"
>
<path
fill-rule="evenodd"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

src/components/Modal/index.svelte
+3 -3
View File
@@ -20,17 +20,17 @@
{#if open}
<div
class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 bg-opacity-50"
class="dialog fixed overflow-x-hidden overflow-y-auto inset-0 flex justify-center items-center z-50 bg-gray-100 dark:bg-gray-700 bg-opacity-50"
on:click={onClose}
>
<div aria-hidden="true" class="backdrop" />
<div
class="{maxWidth ||
'container'} bg-white mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
'container'} bg-white dark:bg-gray-800 mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
on:click={(e) => e.stopPropagation()}
>
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl m-0">
<h3 class="dark:text-white text-xl m-0">
{modalHeading}
</h3>
<CloseButton onClick={onClose} contained={true} />
src/components/Navigation/app.svelte
+28 -1
View File
@@ -1,13 +1,31 @@
<script>
import NotificationIcon from 'carbon-icons-svelte/lib/Notification20';
import Moon from 'carbon-icons-svelte/lib/Moon16';
import Sun from 'carbon-icons-svelte/lib/Sun16';
import IconButton from '../IconButton/index.svelte';
import { appStore } from '../../utils/store/app';
import { toggleBodyByTheme } from '../../utils/functions/app';
export let navClass = '';
function toggleTheme() {
$appStore.isDark = !$appStore.isDark;
toggleBodyByTheme($appStore.isDark);
localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
}
</script>
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
<ul class="flex w-full items-center">
<div class="">
<a href="/" title="Go to ClassroomIO Home" id="logo" class="text-lg">
<a
href={window.location.pathname}
title="Go to ClassroomIO Home"
id="logo"
class="text-lg"
>
ClassroomIO
</a>
</div>
@@ -17,6 +35,15 @@
<li>
<NotificationIcon class="text-white mr-2" />
</li>
<li>
<IconButton size="small" onClick={toggleTheme}>
{#if $appStore.isDark}
<Sun class="text-white" />
{:else}
<Moon class="text-white" />
{/if}
</IconButton>
</li>
<li />
</ul>
</nav>
src/components/Org/Audience/index.svelte
+2 -2
View File
@@ -22,8 +22,8 @@
{:else}
<Box>
<AudienceEmptyIcon />
<h3 class="text-2xl my-5">No audience to manage!</h3>
<p class="w-1/3 text-center">
<h3 class="dark:text-white text-2xl my-5">No audience to manage!</h3>
<p class="dark:text-white w-1/3 text-center">
Manage all your students here and stay connected with them.
</p>
</Box>
src/components/Org/SectionTitle.svelte
+3
View File
@@ -0,0 +1,3 @@
<p class="dark:text-white font-bold">
<slot />
</p>
src/components/Org/Settings/Domains.svelte
+4 -3
View File
@@ -9,6 +9,7 @@
import { supabase } from '../../../utils/functions/supabase';
import { snackbarStore } from '../../Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
import SectionTitle from '../SectionTitle.svelte';
let siteName;
let errors = '';
@@ -56,7 +57,7 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
<Column sm={2} md={6} lg={8}>
<p class="text-md text-gray-500 mb-5">
<p class="text-md text-gray-500 dark:text-gray-200 mb-5">
Add your team mates or collaborators to your organization. Start working
together
</p>
@@ -86,11 +87,11 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"
><strong>Custom domain</strong></Column
><SectionTitle>Custom domain</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<div class="flex items-center">
<p class="mr-3">Add your own domain name</p>
<p class="dark:text-white mr-3">Add your own domain name</p>
<ComingSoon />
</div>
</Column>
src/components/Org/Settings/OrgSettings.svelte
+14 -9
View File
@@ -9,6 +9,7 @@
import { snackbarStore } from '../../Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
import { currentOrg } from '../../../utils/store/org';
import SectionTitle from '../SectionTitle.svelte';
let avatar;
let loading = false;
@@ -79,7 +80,9 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Organization Profile</strong></Column>
<Column sm={2} md={2} lg={4}
><SectionTitle>Organization Profile</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<TextField
label="Organization Name"
@@ -102,16 +105,18 @@
</Column>
</Row>
<!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Theme</strong></Column>
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4>Set your brand</h4>
<h4 class="dark:text-white">Set your brand</h4>
</Column>
</Row> -->
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Custom Domain</strong></Column>
<Column sm={2} md={2} lg={4}
><SectionTitle>Custom Domain</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<h4>Customise your Domain</h4>
<p class="text-sm text-gray-500">
<h4 class="dark:text-white">Customise your Domain</h4>
<p class="text-sm text-gray-500 dark:text-gray-200">
Create a custom URL so your audience can get to your organization easily
</p>
<PrimaryButton
@@ -123,10 +128,10 @@
</Column>
</Row>
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Team</strong></Column>
<Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4>Set up your website</h4>
<p class="text-sm text-gray-500">
<h4 class="dark:text-white">Set up your website</h4>
<p class="text-sm text-gray-500 dark:text-gray-200">
Add team mates to your organization so you can both collaborate on
projects.
</p>
src/components/Org/Settings/Profile.svelte
+7 -2
View File
@@ -2,6 +2,7 @@
import { goto } from '@sapper/app';
import { Grid, Row, Column } from 'carbon-components-svelte';
import TextField from '../../Form/TextField.svelte';
import SectionTitle from '../SectionTitle.svelte';
import PrimaryButton from '../../PrimaryButton/index.svelte';
import { VARIANTS } from '../../PrimaryButton/constants';
import UploadImage from '../../UploadImage/index.svelte';
@@ -82,7 +83,9 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Profile Picture</strong></Column>
<Column sm={2} md={2} lg={4}>
<SectionTitle>Profile Picture</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<UploadImage
bind:avatar
@@ -92,7 +95,9 @@
</Column>
</Row>
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4}><strong>Personal Information</strong></Column>
<Column sm={2} md={2} lg={4}>
<SectionTitle>Personal Information</SectionTitle>
</Column>
<Column sm={2} md={6} lg={8}>
<TextField
label="Full Name"
src/components/Org/Settings/TeamMembers.svelte
+7 -4
View File
@@ -20,6 +20,7 @@
import { getOrgTeam } from '../../../utils/services/org';
import { profile } from '../../../utils/store/user';
import { supabase } from '../../../utils/functions/supabase';
import SectionTitle from '../SectionTitle.svelte';
let emailsStr = '';
let errorMessage = '';
@@ -128,9 +129,11 @@
<Grid class="border rounded border-gray-200 w-full mt-5">
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
<Column sm={2} md={2} lg={4} class="text-lg"
><SectionTitle>Add</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
<p class="text-md text-gray-500 mb-5">
<p class="text-md text-gray-500 dark:text-gray-200 mb-5">
Add your team mates or collaborators to your organization. Start working
together
</p>
@@ -161,7 +164,7 @@
<Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
<Column sm={2} md={2} lg={4} class="text-lg"
><strong>Members</strong></Column
><SectionTitle>Members</SectionTitle></Column
>
<Column sm={2} md={6} lg={8}>
{#if isFetching}
@@ -170,7 +173,7 @@
{#each $orgTeam as teamMember}
<div class="flex justify-between items-center mb-5">
<div class="flex">
<p class="text-sm text-gray-500 mr-3">
<p class="text-sm text-gray-500 dark:text-gray-200 mr-3">
{teamMember.email}
</p>
<TextChip
src/components/Org/SideBar.svelte
+17 -15
View File
@@ -13,7 +13,7 @@
import { profile } from '../../utils/store/user';
let orgSiteName = '';
let activeClass = 'bg-gray-200';
let activeClass = 'bg-gray-200 dark:bg-gray-500';
let { page } = stores();
function isActive(pagePath, itemPath) {
@@ -30,7 +30,7 @@
$: orgSiteName = $currentOrg.siteName;
</script>
<aside class="root bg-gray-100 h-full">
<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
{#if $currentOrg.avatar_url}
@@ -53,46 +53,46 @@
<ul class="my-5">
<a href="/org/{orgSiteName}" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}`
) && activeClass}"
>
<HomeIcon />
<p class="ml-2">Home</p>
<p class="dark:text-white ml-2">Home</p>
</li>
</a>
<a href="/org/{orgSiteName}/courses" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/courses`
) && activeClass}"
>
<CourseIcon />
<p class="ml-2">Courses</p>
<p class="dark:text-white ml-2">Courses</p>
</li>
</a>
<a href="/org/{orgSiteName}/site" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/site`
) && activeClass}"
>
<SiteSettingsIcon />
<p class="ml-2">Site settings</p>
<p class="dark:text-white ml-2">Site settings</p>
</li>
</a>
<a href="/org/{orgSiteName}/audience" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/audience`
) && activeClass}"
>
<AudienceIcon />
<p class="ml-2">Audience</p>
<p class="dark:text-white ml-2">Audience</p>
</li>
</a>
</ul>
@@ -100,14 +100,16 @@
<span class="flex-grow" />
<ul class="my-5 pb-5 px-4">
<a href="/help" class="text-black">
<li class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200">
<Help />
<p class="ml-2">Help</p>
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
>
<Help class="carbon-icon" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
<a href="/org/{orgSiteName}/settings" class="text-black">
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 {isActive(
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
$page.path,
`/org/${orgSiteName}/settings`
) && activeClass}"
@@ -118,7 +120,7 @@
width="w-7"
height="h-7"
/>
<p class="ml-2">Settings</p>
<p class="dark:text-white ml-2">Settings</p>
</li>
</a>
</ul>
src/components/OrgSelector/OrgSelector.svelte
+1 -1
View File
@@ -39,7 +39,7 @@
open = !open;
}}
>
<p class="text-lg font-bold">{$currentOrg.name}</p>
<p class="dark:text-white text-lg font-bold">{$currentOrg.name}</p>
<CaretSortIcon class="ml-2" />
</div>
<Popover bind:open closeOnOutsideClick align="bottom-left">
src/components/PageBody/index.svelte
+1 -2
View File
@@ -9,7 +9,7 @@
<div class="root mt-4 mx-auto {width} {className} relative {padding}">
{#if $$slots.header}
<div
class="head flex items-center justify-between sticky right-0 w-full px-3"
class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3"
>
<slot name="header" />
</div>
@@ -26,6 +26,5 @@
.head {
top: 0px;
z-index: 1;
background-color: #fafbfc;
}
</style>
src/components/PageNav/index.svelte
+3 -4
View File
@@ -20,7 +20,7 @@
</script>
<div
class="header flex items-center justify-between {!disableSticky &&
class="header dark:bg-gray-700 flex items-center justify-between {!disableSticky &&
'sticky'} {paddingClass} {dynamicRootClass}"
style={overidableStyle}
>
@@ -28,7 +28,7 @@
{#if isTitleEditable}
{#if !enterEditTitleMode}
<h4
class="title editable-title hover:bg-gray-100 px-3 rounded-md overflow-ellipsis"
class="title editable-title hover:bg-gray-100 dark:bg-gray-700 px-3 rounded-md overflow-ellipsis"
on:click={() => (enterEditTitleMode = true)}
>
{title}
@@ -49,7 +49,7 @@
{:else}
<div class="flex items-center" {title}>
<slot name="image" />
<h4 class="title">{title}</h4>
<h4 class="dark:text-white title">{title}</h4>
</div>
{/if}
{/if}
@@ -79,7 +79,6 @@
.header {
border-bottom: 1px solid var(--border-color);
min-height: 61px;
background-color: #fff;
z-index: 1;
}
src/components/PrimaryButton/constants.js
+1 -1
View File
@@ -15,7 +15,7 @@ export const VARIANTS_CLASS = {
[VARIANTS.OUTLINED]:
'border border-blue-700 hover:border-black-300 hover:bg-blue-200 text-black',
[VARIANTS.NONE]:
'border-none hover:border-black-300 hover:bg-gray-200 text-black',
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
[VARIANTS.TEXT]:
'text-black hover:border border-t-0 border-l-0 border-r-0 border-black-300',
[VARIANTS.TEXT_DANGER]:
src/components/Question/CheckboxQuestion/index.svelte
+2 -2
View File
@@ -70,7 +70,7 @@
className="w-20"
isDisabled={disableGrading}
/>
<p class="ml-2 text-lg">/ {gradeMax}</p>
<p class="dark:text-white ml-2 text-lg">/ {gradeMax}</p>
</div>
{/if}
</div>
@@ -82,7 +82,7 @@
<div class="ml-4">
{#each options as option}
<button
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
option
)}"
type="button"
src/components/Question/RadioQuestion/index.svelte
+5 -3
View File
@@ -62,7 +62,9 @@
<form on:submit|preventDefault={handleFormSubmit}>
<div class="flex items-center justify-between">
<h3 class="{labelClassName} {!isNaN(grade) && 'w-3/4'}">{title}</h3>
<h3 class="dark:text-white {labelClassName} {!isNaN(grade) && 'w-3/4'}">
{title}
</h3>
{#if !isNaN(grade)}
<div class="flex items-center">
<TextField
@@ -72,7 +74,7 @@
className="w-20"
isDisabled={disableGrading}
/>
<p class="ml-2 text-lg">/ {gradeMax}</p>
<p class="dark:text-white ml-2 text-lg">/ {gradeMax}</p>
</div>
{/if}
</div>
@@ -84,7 +86,7 @@
<div class={!disableOptContainerMargin && 'ml-4'}>
{#each options as option}
<button
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-500 w-full {getValidationClassName(
option
)}"
type="button"
src/components/Question/TextareaQuestion/index.svelte
+2 -2
View File
@@ -45,7 +45,7 @@
className="w-20"
isDisabled={disableGrading}
/>
<p class="ml-2 text-lg">/ {gradeMax}</p>
<p class="dark:text-white ml-2 text-lg">/ {gradeMax}</p>
</div>
{/if}
</div>
@@ -56,7 +56,7 @@
<div class="ml-4">
{#if disabled}
<div class="bg-gray-200 p-5 rounded-md mb-3">
<div class="bg-gray-200 dark:bg-gray-500 p-5 rounded-md mb-3">
{@html marked(defaultValue)}
</div>
{:else}
src/components/QuestionContainer/index.svelte
+2 -2
View File
@@ -29,7 +29,7 @@
<div
bind:this={ref}
class="bg-white border {hasError
class="bg-white dark:bg-gray-800 border {hasError
? 'border-red-700'
: 'border-gray hover:border-blue-700'} rounded-md mb-6 relative root"
>
@@ -49,7 +49,7 @@
{#if typeof points !== 'undefined'}
<div class="border-gray border-t-2 border-r-0 border-b-0 border-l-0 p-2">
<div class="flex items-center w-40">
<p class="text-sm mr-2">Points:</p>
<p class="dark:text-white text-sm mr-2">Points:</p>
<TextField
placeholder="Points"
bind:value={points}
src/components/SideBar/index.svelte
+8 -6
View File
@@ -2,19 +2,19 @@
// your script goes here
const contributors = [
{
name: "Koskting",
name: 'Koskting',
},
{
name: "Koskting",
name: 'Koskting',
},
{
name: "Koskting",
name: 'Koskting',
},
{
name: "Koskting",
name: 'Koskting',
},
{
name: "Koskting",
name: 'Koskting',
},
];
</script>
@@ -23,7 +23,9 @@
<div
class="sidebar-root p-5 w-100 border border-1 border-gray rounded-md md:mt-12"
>
<h4 class="border-b border-gray text-base font-bold pb-1">Самые полезные</h4>
<h4 class="dark:text-white border-b border-gray text-base font-bold pb-1">
Самые полезные
</h4>
{#each contributors as contributor}
<a class="flex pt-3" href="/{contributor.name}">
<img
src/components/Snackbar/index.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
{:else}
<Information24 class="carbon-icon" />
{/if}
<p class="ml-2 text-lg">{$snackbarStore.message}</p>
<p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
</div>
<CloseButton onClick={handleClose} contained={true} color="text-white" />
src/components/Tabs/index.svelte
+2 -2
View File
@@ -11,8 +11,8 @@
<button
class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
tab.value
? 'text-black font-bold bg-gray-100'
: 'bg-gray-200 text-gray'} focus:outline-none w-40 text-left p-3"
? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
: 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
on:click={onChange(tab.value)}
>
{tab.label}
src/components/Tailwindcss.svelte
+15
View File
@@ -57,6 +57,17 @@
line-height: 1.25 !important;
}
}
.dark .prose {
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: #fff;
}
}
code {
white-space: pre-wrap;
@@ -74,4 +85,8 @@
.success :global(svg.carbon-icon) {
fill: green;
}
.dark :global(svg.carbon-icon) {
fill: #fff;
}
</style>
src/components/TimeTable/index.svelte
+44 -42
View File
@@ -1,13 +1,52 @@
<script>
import Star24 from "carbon-icons-svelte/lib/Star24";
import StarFilled24 from "carbon-icons-svelte/lib/StarFilled24";
import Link24 from "carbon-icons-svelte/lib/Link24";
import Row from "./Row.svelte";
import data from "./data";
import Star24 from 'carbon-icons-svelte/lib/Star24';
import StarFilled24 from 'carbon-icons-svelte/lib/StarFilled24';
import Link24 from 'carbon-icons-svelte/lib/Link24';
import Row from './Row.svelte';
import data from './data';
let starred = false;
</script>
<div class="sub-header flex justify-between mb-2">
<h4 class="dark:text-white title">АИ-153</h4>
<div class="flex justify-evenly items-center">
{#if starred}
<StarFilled24
class="clickables mr-5 text-sm"
on:click={() => (starred = !starred)}
focusable="true"
tabindex={0}
/>
{:else}
<Star24
class="clickables mr-5 text-sm"
on:click={() => (starred = !starred)}
focusable="true"
tabindex="{1}/"
/>
{/if}
<Link24 class="clickables mr-5 text-sm" />
</div>
</div>
<div class="container">
<div class="col">
<div class="colItem">Пн</div>
<div class="colItem">Вт</div>
<div class="colItem">Ср</div>
<div class="colItem">Чт</div>
<div class="colItem">Пя</div>
</div>
<div class="table">
<Row items={data.slice(0, 4)} />
<Row items={data.slice(4, 8)} />
<Row current items={data.slice(8, 12)} />
<Row items={data.slice(12, 16)} />
<Row items={data.slice(16, 20)} />
</div>
</div>
<style>
.sub-header {
padding: 10px 20px;
@@ -52,40 +91,3 @@
cursor: pointer;
}
</style>
<div class="sub-header flex justify-between mb-2">
<h4 class="title">АИ-153</h4>
<div class="flex justify-evenly items-center">
{#if starred}
<StarFilled24
class="clickables mr-5 text-sm"
on:click={() => (starred = !starred)}
focusable="true"
tabindex={0} />
{:else}
<Star24
class="clickables mr-5 text-sm"
on:click={() => (starred = !starred)}
focusable="true"
tabindex="{1}/" />
{/if}
<Link24 class="clickables mr-5 text-sm" />
</div>
</div>
<div class="container">
<div class="col">
<div class="colItem">Пн</div>
<div class="colItem">Вт</div>
<div class="colItem">Ср</div>
<div class="colItem">Чт</div>
<div class="colItem">Пя</div>
</div>
<div class="table">
<Row items={data.slice(0, 4)} />
<Row items={data.slice(4, 8)} />
<Row current items={data.slice(8, 12)} />
<Row items={data.slice(12, 16)} />
<Row items={data.slice(16, 20)} />
</div>
</div>
src/components/UserCard/index.svelte
+8 -8
View File
@@ -1,17 +1,17 @@
<script>
import Icon from "svelte-awesome/components/Icon.svelte";
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
import Icon from 'svelte-awesome/components/Icon.svelte';
import { faTelegram } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
export let avatarUrl =
"https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg";
export let name = "Sarah Dayan";
export let title = "Staff Engineer, Algolia";
'https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg';
export let name = 'Sarah Dayan';
export let title = 'Staff Engineer, Algolia';
export let mailLink;
export let telegramLink;
</script>
<figure class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4">
<figure class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4">
<img
class="w-32 h-32 rounded-full mx-auto"
src={avatarUrl}
@@ -22,7 +22,7 @@
<div class="pt-6 text-center space-y-4">
<div class="description font-medium flex flex-col justify-around">
<div class="text-cyan-600">{name}</div>
<div class="text-gray-500">{title}</div>
<div class="text-gray-500 dark:text-gray-200">{title}</div>
</div>
</div>
{#if telegramLink && mailLink}
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>
src/utils/functions/app.js
+7
View File
@@ -0,0 +1,7 @@
export function toggleBodyByTheme(isDark) {
if (isDark) {
document.body.className = document.body.className.concat(' ', 'dark');
} else {
document.body.className = document.body.className.replace('dark', '');
}
}
src/utils/store/app.js
+5
View File
@@ -0,0 +1,5 @@
import { writable } from 'svelte/store';
export const appStore = writable({
isDark: false,
});
tailwind.config.js
+7 -9
View File
@@ -1,19 +1,17 @@
module.exports = {
darkMode: 'class',
purge: {
mode: "all",
content: ["./**/**/*.html", "./**/**/*.svelte"],
mode: 'all',
content: ['./**/**/*.html', './**/**/*.svelte'],
options: {
whitelistPatterns: [/svelte-/]
}
whitelistPatterns: [/svelte-/],
},
},
theme: {
extend: {}
extend: {},
},
variants: {},
plugins: [
require("@tailwindcss/typography"),
require('@tailwindcss/forms')
]
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};