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/lib/components/Apps/components/Poll/components/Poll.svelte
+2 -2
View File
@@ -46,7 +46,7 @@
}
</script>
<div class="p-4 bg-white dark:bg-gray-800 border-2 rounded-md mb-3">
<div class="p-4 bg-white dark:bg-black border-2 rounded-md mb-3">
{#if selectedOptionToView}
<div>
<div class="flex items-center mb-5">
@@ -140,7 +140,7 @@
{:else}
{#each poll.options as option, index}
<button
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
class="bg-white dark:bg-black rounded-md border-2 border-gray-500 {didUserSelect(
option
) &&
'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"
src/lib/components/Apps/components/Poll/index.svelte
+25 -29
View File
@@ -13,33 +13,33 @@
{
label: 'Rich Harris',
value: 'rich-harris',
avatar: 'https://i.pravatar.cc/150?img=1',
avatar: 'https://i.pravatar.cc/150?img=1'
},
{
label: 'Linus Torvalds',
value: 'linus-torvalds',
avatar: 'https://i.pravatar.cc/150?img=2',
avatar: 'https://i.pravatar.cc/150?img=2'
},
{
label: 'Elon Musk',
value: 'elon-musk',
avatar: 'https://i.pravatar.cc/150?img=3',
avatar: 'https://i.pravatar.cc/150?img=3'
},
{
label: 'Satoshi Nakamoto',
value: 'satoshi-nakamoto',
avatar: 'https://i.pravatar.cc/150?img=4',
},
avatar: 'https://i.pravatar.cc/150?img=4'
}
];
const tabs = [
{
label: 'My polls',
value: 0,
value: 0
},
{
label: 'Other polls',
value: 1,
},
value: 1
}
];
let selectedTab = 0;
@@ -54,7 +54,7 @@
options: [
{
label: 'Dan Abrahmov',
selectedBy: [],
selectedBy: []
},
{
label: 'Evan You',
@@ -62,25 +62,25 @@
{
label: 'Rich Harris',
value: 'rich-harris',
avatar: 'https://i.pravatar.cc/150?img=1',
avatar: 'https://i.pravatar.cc/150?img=1'
},
{
label: 'Linus Torvalds',
value: 'linus-torvalds',
avatar: 'https://i.pravatar.cc/150?img=2',
},
],
avatar: 'https://i.pravatar.cc/150?img=2'
}
]
},
{
label: 'Rich Harris',
selectedBy: [],
selectedBy: []
},
{
label: 'Yehuda Katz',
selectedBy: [],
},
],
},
selectedBy: []
}
]
}
];
function handleCreatePoll() {
@@ -92,9 +92,9 @@
polls = [
{
...poll,
author: users.find((u) => u.value === userId),
author: users.find((u) => u.value === userId)
},
...polls,
...polls
];
}
@@ -122,16 +122,12 @@
// Select if already selected
option.selectedBy = [
...option.selectedBy,
users.find((user) => user.value === userId),
users.find((user) => user.value === userId)
];
}
} else if (
option.selectedBy.find((user) => user.value === userId)
) {
} else if (option.selectedBy.find((user) => user.value === userId)) {
// This makes the user to select only one option
option.selectedBy = option.selectedBy.filter(
(user) => user.value !== userId
);
option.selectedBy = option.selectedBy.filter((user) => user.value !== userId);
}
return option;
@@ -139,7 +135,7 @@
}
return poll;
}),
})
];
};
}
@@ -186,7 +182,7 @@
{/if}
{:else}
<div
class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
class="bg-gray-100 dark:bg-neutral-800 border rounded-md h-60 flex items-center justify-center"
>
<h2 class="text-xl font-bold">No polls to display</h2>
</div>
src/lib/components/AuthUI/index.svelte
+1 -1
View File
@@ -35,7 +35,7 @@
</script>
<div class="root w-full min-h-screen flex items-center justify-center">
<div class="container border border-gray bg-white dark:bg-gray-800">
<div class="container border border-gray bg-white dark:bg-black">
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
{#if !showOnlyContent || showLogo}
<div class="flex flex-col items-center justify-center w-full pt-2">
src/lib/components/Course/components/Ceritficate/Design.svelte
+1 -1
View File
@@ -99,7 +99,7 @@
</div>
</section>
<section
class="bg-gray-100 dark:bg-gray-700 flex justify-center items-center rounded-md w-full lg:w-3/5"
class="bg-gray-100 dark:bg-neutral-800 flex justify-center items-center rounded-md w-full lg:w-3/5"
>
<div class="certificate-container flex justify-center items-center h-5/6">
{#if $course.certificate_theme === 'professional'}
src/lib/components/Course/components/Lesson/AddLessonModal.svelte
+1 -1
View File
@@ -60,7 +60,7 @@
modalHeading="Add New Lesson"
>
<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-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap 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-2 md:py-3 px-2 md:px-5 mb-2 md:mb-4 flex flex-wrap items-center dark:bg-neutral-800"
>
<div class="mr-5">
<TextChip
src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+1 -1
View File
@@ -108,7 +108,7 @@
</div>
<div class="border border-gray-300 rounded-md mt-2">
<div
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"
class="hover:bg-gray-100 dark:bg-neutral-800 border-b border-t-0 border-l-0 border-r-0 border-gray-300 p-3"
>
<p class="dark:text-white font-bold text-lg">
Details
src/lib/components/Course/components/Lesson/Exercises/index.svelte
+1 -1
View File
@@ -157,7 +157,7 @@
<div class="flex flex-wrap">
{#each $lesson.exercises as exercise}
<a
class="w-52 bg-gray-100 dark:bg-gray-700 px-4 py-7 mr-4 mb-4 rounded-lg"
class="w-52 bg-gray-100 dark:bg-neutral-800 px-4 py-7 mr-4 mb-4 rounded-lg"
href="{path}/{exercise.id}"
on:click={gotoEdit}
>
src/lib/components/Course/components/Navigation/index.svelte
+1 -1
View File
@@ -154,7 +154,7 @@
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-[40]'
: 'translate-x-0 absolute md:relative z-[40]'
} transition w-[350px] min-w-[350px] md:max-w-[350px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
} transition w-[350px] min-w-[350px] md:max-w-[350px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] overflow-y-auto border border-l-0 border-t-0 border-b-0 border-r-1`}
>
<div class="h-full flex flex-col">
<ul class="my-5">
src/lib/components/CourseLandingPage/components/Editor/Container.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
<section class="root z-10">
{#if show}
<div class="relative h-full bg-white dark:bg-gray-800">
<div class="relative h-full bg-white dark:bg-black">
<slot />
</div>
{/if}
src/lib/components/CourseLandingPage/components/Editor/index.svelte
+1 -1
View File
@@ -121,7 +121,7 @@
<aside
class={`${
show ? '-translate-x-[100%] fixed z-[9999]' : 'translate-x-0 fixed z-[9999]'
} left-0 transition w-[280px] min-w-[280px] bg-gray-100 dark:bg-gray-800 h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
} left-0 transition w-[280px] min-w-[280px] bg-gray-100 dark:bg-black h-full border border-l-0 border-t-0 border-b-0 border-r-1`}
>
<div class="toggler rounded-full shadow-lg absolute">
<IconButton
src/lib/components/CourseLandingPage/index.svelte
+2 -2
View File
@@ -91,7 +91,7 @@
<title>{get(courseData, 'title', '')}</title>
</svelte:head>
<div class="w-full bg-white dark:bg-gray-800 flex flex-col items-center">
<div class="w-full bg-white dark:bg-black flex flex-col items-center">
<!-- Header Section -->
<header id="header" class="banner w-full flex items-center justify-center p-">
<div class="md:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row">
@@ -160,7 +160,7 @@
</header>
<PricingSection className="md:hidden" {courseData} {editMode} bind:startCoursePayment />
<!-- Body -->
<div class="bg-white dark:bg-gray-800 w-full">
<div class="bg-white dark:bg-black w-full">
<div
class="py-8 lg:w-11/12 w-full m-2 lg:m-auto flex flex-col-reverse lg:flex-row items-center lg:items-start justify-between max-w-[1200px]"
>
src/lib/components/Courses/components/Card/Loader.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script>
<div
class="root w-72 border bg-gray-100 dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
class="root w-72 border bg-gray-100 dark:bg-black mr-4 mb-4 rounded-md transition ease-in-out relative"
>
<SkeletonPlaceholder style="width: 100%; height: 10rem;" />
<div class="p-3 pb-0">
src/lib/components/Dropdown/index.svelte
+1 -1
View File
@@ -42,7 +42,7 @@
{#if open}
<div
class="dropdown whitespace-nowrap bg-white dark:bg-gray-800 border border-grey rounded-lg mt-2 py-3 absolute"
class="dropdown whitespace-nowrap bg-white dark:bg-black border border-grey rounded-lg mt-2 py-3 absolute"
>
{#each options as option, index}
<button
src/lib/components/Expandable/index.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
}
</script>
<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
<div {id} class="w-full bg-white dark:bg-black {rootClass}">
<button
class="w-full relative flex items-center justify-between {!disableContainerPadding && 'p-5'}"
tabindex="0"
src/lib/components/Form/Select.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
class:customColor={!!selectClassName}
>
{#each options as option}
<option class="bg-white dark:bg-gray-800 text-black" value={option}>
<option class="bg-white dark:bg-black text-black" value={option}>
{option[labelKey]}
</option>
{/each}
src/lib/components/LMS/SideBar.svelte
+1 -1
View File
@@ -55,7 +55,7 @@
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative z-40'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-700 h-[calc(100vh-48px)]`}
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)]`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
src/lib/components/LMS/components/Learning.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
<section class="h-full mt-10 mb-20 xl:mt-2">
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
>
{#if courseInProgress.length > 0}
<div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
src/lib/components/LMS/components/Student.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 rounded w-full h-fit xl:h-[516px] p-3"
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 rounded w-full h-fit xl:h-[516px] p-3"
>
<div class="w-full h-fit hidden xl:flex items-center justify-center">
<InlineCalendar bind:store {theme} />
src/lib/components/Modal/index.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
<div
class="{maxWidth || 'container'} {size === 'sm'
? 'small'
: ''} bg-white dark:bg-gray-800 mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
: ''} bg-white dark:bg-black mx-auto {width} shadow-lg p-5 pt-2 rounded-md"
on:click={(e) => e.stopPropagation()}
role="presentation"
>
src/lib/components/Org/Community/Loader.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script>
<div
class="h-[70px] w-full border border-gray-100 dark:bg-gray-700 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
class="h-[70px] w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 mt-2 rounded-md transition ease-in-out relative flex pt-3 px-3"
>
<div class="w-10 flex justify-evenly flex-col px-1 mr-2 rounded-md">
<SkeletonPlaceholder style="width: 100%; height: 40%; border-radius: 4px;" />
src/lib/components/Org/Community/index.svelte
+1 -1
View File
@@ -62,7 +62,7 @@
</script>
<div
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-gray-700"
class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
>
{#if isLoading}
<CommunityLoader />
src/lib/components/Org/Quiz/Loader.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
</script>
<div
class="root w-full border border-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative flex p-3"
class="root w-full border border-gray-100 dark:bg-neutral-800 mr-4 mb-4 rounded-md transition ease-in-out relative flex p-3"
>
<SkeletonPlaceholder style="width: 20%; height: 100%;" />
<div class="w-full mx-5 flex justify-evenly flex-col">
src/lib/components/Org/Quiz/Play/ConnectToPlay.svelte
+2 -9
View File
@@ -32,10 +32,7 @@
<PlayHeader startCount={true} showCountDown={true} />
</div>
<div
slot="body"
class="w-full rounded-md bg-white dark:bg-gray-700 py-7 px-5"
>
<div slot="body" class="w-full rounded-md bg-white dark:bg-neutral-800 py-7 px-5">
<div class="mb-3">
<p>1. Visit</p>
<h3>play.classroomio.com</h3>
@@ -52,10 +49,6 @@
<div slot="footer" class="flex justify-center items-center">
<p class="font-bold mr-3">Let's go</p>
<PrimaryButton
label="View Players"
variant={VARIANTS.OUTLINED}
onClick={goToPlayersStep}
/>
<PrimaryButton label="View Players" variant={VARIANTS.OUTLINED} onClick={goToPlayersStep} />
</div>
</PlayContainer>
src/lib/components/Org/Quiz/Play/Container.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
{#if $$slots.footer}
<!-- FOOTER -->
<div class="footer bg-white dark:bg-gray-700 py-6 px-2 m-auto">
<div class="footer bg-white dark:bg-neutral-800 py-6 px-2 m-auto">
<slot name="footer" />
</div>
{/if}
src/lib/components/Org/Quiz/QuizCard.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
{#if quiz}
<div
class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-gray-800 mb-5 relative flex flex-col lg:flex-row p-3"
class="root w-full border hover:shadow-2xl transition ease-in-out rounded-lg bg-gray-100 dark:bg-black mb-5 relative flex flex-col lg:flex-row p-3"
>
<ImageLoader
src={themeImages[quiz.theme]?.card || themeImages.standard.card}
src/lib/components/Org/Quiz/QuizQuestion.svelte
+1 -1
View File
@@ -29,7 +29,7 @@
<!-- Options -->
<div class="flex justify-between w-full flex-wrap">
{#each currentQuestion.options || [] as option}
<div class="w-2/5 bg-white dark:bg-gray-700 rounded p-5 mb-5 relative">
<div class="w-2/5 bg-white dark:bg-neutral-800 rounded p-5 mb-5 relative">
<img src={optionImage[option.id]} alt={option.id} />
{#if isPreview}
src/lib/components/Org/SideBar.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
$menu.hidden
? '-translate-x-[100%] absolute md:translate-x-0 md:relative z-40'
: 'translate-x-0 absolute md:relative z-40'
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-gray-800 h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
} overflow-y-auto transition w-[250px] min-w-[250px] bg-gray-100 dark:bg-black h-[calc(100vh-48px)] border border-l-0 border-t-0 border-b-0 border-r-1`}
>
<div class="h-full flex flex-col">
<div class="border-b border-gray-200 pt-5 px-4">
src/lib/components/PageBody/index.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="root mt-4 mx-auto {width} {className} relative {padding}">
{#if $$slots.header}
<div
class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
class="head dark:bg-black flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
>
<slot name="header" />
</div>
src/lib/components/PageNav/index.svelte
+2 -2
View File
@@ -20,7 +20,7 @@
</script>
<div
class="header dark:bg-gray-800 bg-white flex items-center justify-between {!disableSticky &&
class="header dark:bg-black bg-white flex items-center justify-between {!disableSticky &&
'sticky'} {paddingClass} {dynamicRootClass}"
style={overidableStyle}
>
@@ -29,7 +29,7 @@
{#if !enterEditTitleMode}
<button class="w-full" on:click={() => (enterEditTitleMode = true)}>
<h4
class="editable-title hover:bg-gray-100 dark:bg-gray-800 px-3 rounded-md overflow-ellipsis"
class="editable-title hover:bg-gray-100 dark:bg-black px-3 rounded-md overflow-ellipsis"
>
{title}
</h4>
src/lib/components/QuestionContainer/index.svelte
+1 -1
View File
@@ -25,7 +25,7 @@
<div
bind:this={ref}
class="bg-white dark:bg-gray-800 border-2 {hasError
class="bg-white dark:bg-black border-2 {hasError
? 'border-red-700'
: 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
>