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

Dark mode improvements

Browse Source
This commit is contained in:
Rotimi Best
2023-09-16 22:44:20 +01:00
parent e1114b6f2f
commit 70326f2281
43 changed files with 77 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+error.svelte
+1 -1
View File
@@ -17,7 +17,7 @@
</svelte:head>
<div
class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-full py-10 dark:bg-gray-800"
class="error-container m-auto flex flex-col-reverse lg:flex-row md:flex-col-reverse items-center justify-center h-full py-10 dark:bg-black"
>
<div class="md:w-full p-2 lg:w-2/4">
<h2 class="w-full text-lg lg:text-3xl font-medium lg:font-normal">
src/routes/+layout.svelte
+3 -3
View File
@@ -287,7 +287,7 @@
{:else if data.isOrgSite && !path}
<OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
{:else}
<main class="dark:bg-gray-800">
<main class="dark:bg-black">
{#if $navigating && $delayedPreloading}
<Backdrop>
<Moon size="60" color="#1d4ed8" unit="px" duration="1s" />
@@ -315,14 +315,14 @@
{#if !isQuizPage($page.url.pathname)}
<OrgSideBar />
{/if}
<div class="org-slot bg-white dark:bg-gray-800 w-full">
<div class="org-slot bg-white dark:bg-black w-full">
<slot />
</div>
</div>
{:else if isLMSPage($page.url.pathname)}
<div class="org-root w-full flex items-center justify-between">
<LMSSideBar />
<div class="org-slot bg-white dark:bg-gray-800 w-full">
<div class="org-slot bg-white dark:bg-black w-full">
<slot />
</div>
</div>
src/routes/+page.svelte
+1 -1
View File
@@ -90,7 +90,7 @@
<div class="flex flex-col md:flex-row">
{#each areas as area, index}
<div
class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
class="box m-3 bg-white dark:bg-black rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
>
<h3 class="dark:text-white text-3xl">
{#if index === 0}
src/routes/courses/[id]/lessons/+page.svelte
+1 -1
View File
@@ -133,7 +133,7 @@
>
{#each $lessons as lesson (lesson.id)}
<div
class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-neutral-800"
>
<div class="mr-5">
<TextChip
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+1 -1
View File
@@ -190,7 +190,7 @@
<div
class={`flex-row ${
$apps.dropdown && $apps.open
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-gray-800 p-3 lg:p-0'
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-black p-3 lg:p-0'
: 'hidden'
} lg:flex items-center`}
>
src/routes/courses/[id]/submissions/+page.svelte
+2 -2
View File
@@ -248,7 +248,7 @@
<div class="flex items-center w-full overflow-x-scroll">
{#each sections as { id, title, items }, idx (id)}
<div
class="section rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2">
@@ -269,7 +269,7 @@
<div
class="border {item.isEarly
? 'border-grey-700'
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-gray-800 py-3 px-3"
: 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-black py-3 px-3"
animate:flip={{ duration: flipDurationMs }}
>
<a
src/routes/dashboard/+page.svelte
+1 -1
View File
@@ -123,7 +123,7 @@
<title>Dashboard - ClassroomIO</title>
</svelte:head>
<section class="root w-full py-10 bg-gray-100 dark:bg-gray-700">
<section class="root w-full py-10 bg-gray-100 dark:bg-neutral-800">
<div class="calendar-root flex mx-2">
{#if !$isMobile}
<div id="calendar">
src/routes/lms/+page.svelte
+1 -1
View File
@@ -49,7 +49,7 @@
<Learning />
</div>
<div
class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
>
<div
class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
src/routes/lms/exercises/+page.svelte
+1 -1
View File
@@ -161,7 +161,7 @@
<div class="flex items-center w-full">
{#each sections as { id, title, items, className }, idx (id)}
<div
class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-gray-800 border border-gray-50 p-3 mr-3 overflow-hidden"
class="min-w-[355px] max-w-[355px] h-[516px] rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 mr-3 overflow-hidden"
animate:flip={{ duration: flipDurationMs }}
>
<div class="flex items-center mb-2 gap-2">
src/routes/onboarding/+page.svelte
+1 -1
View File
@@ -213,7 +213,7 @@
<!-- Loggedin Email -->
<div
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"
class="w-64 flex items-center justify-center mb-6 py-6 bg-gray-100 dark:bg-neutral-800 rounded-2xl border border-gray-300"
>
<UserProfileIcon />
<p class="dark:text-white text-sm ml-2">{$profile.email}</p>
src/routes/org/[slug]/quiz/[slug]/+page.svelte
+3 -3
View File
@@ -38,7 +38,7 @@
function activeClass(q, cq) {
if (q.id === cq.id) {
return 'bg-gray-200 dark:bg-gray-800';
return 'bg-gray-200 dark:bg-black';
}
return '';
}
@@ -196,7 +196,7 @@
<section class="w-screen h-full flex justify-between">
<!-- Questions list -->
<aside class="root w-1/5 p-4 bg-gray-100 dark:bg-gray-700 h-full">
<aside class="root w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
<div class="h-full flex flex-col">
<a
class="text-gray-500 dark:text-white text-md flex items-center"
@@ -275,7 +275,7 @@
</div>
<!-- Quiz Settings -->
<aside class="settings w-1/5 p-4 bg-gray-100 dark:bg-gray-700 h-full">
<aside class="settings w-1/5 p-4 bg-gray-100 dark:bg-neutral-800 h-full">
<div class="py-5">
<h5>Quiz settings</h5>
<PrimaryButton