CLASSROOMIO-T-127: Theming configuration
CLASSROOMIO-T-127: Add 4 themes configurations into the app Clean up Co-authored-by: Rotimi Best <[email protected]> Merge-request: CLASSROOMIO-MR-51 Merged-by: Best Admin <[email protected]>
This commit is contained in:
committed by
Space Cloud
co-authored by
Rotimi Best
parent
910d9c50a9
commit
f39a0cee4b
+1
-1
@@ -24,7 +24,7 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<body data-sveltekit-preload-data="hover" class="">
|
||||
<div style="display: contents">
|
||||
%sveltekit.body%
|
||||
</div>
|
||||
|
||||
+365
-4
@@ -91,10 +91,371 @@ code {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
.dark :global(svg.carbon-icon) {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
/**
|
||||
Rose Theme
|
||||
*/
|
||||
.theme-rose .bg-primary-50 {
|
||||
background-color: #fff1f2;
|
||||
}
|
||||
.theme-rose .text-primary-50 {
|
||||
color: #fff1f2;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-100 {
|
||||
background-color: #ffe4e7;
|
||||
}
|
||||
.theme-rose .text-primary-100 {
|
||||
color: #ffe4e7;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-200 {
|
||||
background-color: #fecdd4;
|
||||
}
|
||||
.theme-rose .text-primary-200 {
|
||||
color: #fecdd4;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-300 {
|
||||
background-color: #fda4b2;
|
||||
}
|
||||
.theme-rose .text-primary-300 {
|
||||
color: #fda4b2;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-400 {
|
||||
background-color: #fb7189;
|
||||
}
|
||||
.theme-rose .text-primary-400 {
|
||||
color: #fb7189;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-500 {
|
||||
background-color: #f43f63;
|
||||
}
|
||||
.theme-rose .text-primary-500 {
|
||||
color: #f43f63;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-600 {
|
||||
background-color: #e21d4e;
|
||||
}
|
||||
.theme-rose .text-primary-600 {
|
||||
color: #e21d4e;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-700 {
|
||||
background-color: #be1241;
|
||||
}
|
||||
.theme-rose .text-primary-700 {
|
||||
color: #be1241;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-800 {
|
||||
background-color: #9f123d;
|
||||
}
|
||||
.theme-rose .text-primary-800 {
|
||||
color: #9f123d;
|
||||
}
|
||||
|
||||
.theme-rose .bg-primary-900 {
|
||||
background-color: #88133a;
|
||||
}
|
||||
.theme-rose .text-primary-900 {
|
||||
color: #88133a;
|
||||
}
|
||||
|
||||
/**
|
||||
Blue Theme
|
||||
*/
|
||||
.bg-primary-50 {
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
.text-primary-50 {
|
||||
color: #eff6ff;
|
||||
}
|
||||
|
||||
.bg-primary-100 {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
.text-primary-100 {
|
||||
color: #dbeafe;
|
||||
}
|
||||
|
||||
.bg-primary-200 {
|
||||
background-color: #bfdafe;
|
||||
}
|
||||
.text-primary-200 {
|
||||
color: #bfdafe;
|
||||
}
|
||||
|
||||
.bg-primary-300 {
|
||||
background-color: #92c4fe;
|
||||
}
|
||||
.text-primary-300 {
|
||||
color: #92c4fe;
|
||||
}
|
||||
|
||||
.bg-primary-400 {
|
||||
background-color: #5fa3fb;
|
||||
}
|
||||
.text-primary-400 {
|
||||
color: #5fa3fb;
|
||||
}
|
||||
|
||||
.bg-primary-500 {
|
||||
background-color: #3a7ff7;
|
||||
}
|
||||
.text-primary-500 {
|
||||
color: #3a7ff7;
|
||||
}
|
||||
|
||||
.bg-primary-600 {
|
||||
background-color: #2460ec;
|
||||
}
|
||||
.text-primary-600 {
|
||||
color: #2460ec;
|
||||
}
|
||||
|
||||
.bg-primary-700 {
|
||||
background-color: #1d4ee2;
|
||||
}
|
||||
.text-primary-700 {
|
||||
color: #1d4ee2;
|
||||
}
|
||||
|
||||
.bg-primary-800 {
|
||||
background-color: #1d3eb0;
|
||||
}
|
||||
.text-primary-800 {
|
||||
color: #1d3eb0;
|
||||
}
|
||||
|
||||
.bg-primary-900 {
|
||||
background-color: #1d398b;
|
||||
}
|
||||
.text-primary-900 {
|
||||
color: #1d398b;
|
||||
}
|
||||
|
||||
/**
|
||||
Green Theme
|
||||
*/
|
||||
.theme-green .bg-primary-50 {
|
||||
background-color: #effef0;
|
||||
}
|
||||
.theme-green .text-primary-50 {
|
||||
color: #effef0;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-100 {
|
||||
background-color: #d9ffdc;
|
||||
}
|
||||
.theme-green .text-primary-100 {
|
||||
color: #d9ffdc;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-200 {
|
||||
background-color: #b6fcbc;
|
||||
}
|
||||
.theme-green .text-primary-200 {
|
||||
color: #b6fcbc;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-300 {
|
||||
background-color: #7df88a;
|
||||
}
|
||||
.theme-green .text-primary-300 {
|
||||
color: #7df88a;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-400 {
|
||||
background-color: #3deb51;
|
||||
}
|
||||
.theme-green .text-primary-400 {
|
||||
color: #3deb51;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-500 {
|
||||
background-color: #12bf26;
|
||||
}
|
||||
.theme-green .text-primary-500 {
|
||||
color: #12bf26;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-600 {
|
||||
background-color: #0aaf1d;
|
||||
}
|
||||
.theme-green .text-primary-600 {
|
||||
color: #0aaf1d;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-700 {
|
||||
background-color: #0c891b;
|
||||
}
|
||||
.theme-green .text-primary-700 {
|
||||
color: #0c891b;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-800 {
|
||||
background-color: #0f6c1b;
|
||||
}
|
||||
.theme-green .text-primary-800 {
|
||||
color: #0f6c1b;
|
||||
}
|
||||
|
||||
.theme-green .bg-primary-900 {
|
||||
background-color: #0f581a;
|
||||
}
|
||||
.theme-green .text-primary-900 {
|
||||
color: #0f581a;
|
||||
}
|
||||
|
||||
/**
|
||||
Orange Theme
|
||||
*/
|
||||
.theme-orange .bg-primary-50 {
|
||||
background-color: #fff8ec;
|
||||
}
|
||||
.theme-orange .text-primary-50 {
|
||||
color: #fff8ec;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-100 {
|
||||
background-color: #fff0d3;
|
||||
}
|
||||
.theme-orange .text-primary-100 {
|
||||
color: #fff0d3;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-200 {
|
||||
background-color: #ffdca5;
|
||||
}
|
||||
.theme-orange .text-primary-200 {
|
||||
color: #ffdca5;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-300 {
|
||||
background-color: #ffc26d;
|
||||
}
|
||||
.theme-orange .text-primary-300 {
|
||||
color: #ffc26d;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-400 {
|
||||
background-color: #ff9d32;
|
||||
}
|
||||
.theme-orange .text-primary-400 {
|
||||
color: #ff9d32;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-500 {
|
||||
background-color: #ff7f0a;
|
||||
}
|
||||
.theme-orange .text-primary-500 {
|
||||
color: #ff7f0a;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-600 {
|
||||
background-color: #ff6600;
|
||||
}
|
||||
.theme-orange .text-primary-600 {
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-700 {
|
||||
background-color: #cc4902;
|
||||
}
|
||||
.theme-orange .text-primary-700 {
|
||||
color: #cc4902;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-800 {
|
||||
background-color: #a1390b;
|
||||
}
|
||||
.theme-orange .text-primary-800 {
|
||||
color: #a1390b;
|
||||
}
|
||||
|
||||
.theme-orange .bg-primary-900 {
|
||||
background-color: #82310c;
|
||||
}
|
||||
.theme-orange .text-primary-900 {
|
||||
color: #82310c;
|
||||
}
|
||||
|
||||
/**
|
||||
Violet Theme
|
||||
*/
|
||||
.theme-violet .bg-primary-50 {
|
||||
background-color: #fff2fe;
|
||||
}
|
||||
.theme-violet .text-primary-50 {
|
||||
color: #fff2fe;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-100 {
|
||||
background-color: #ffe3fe;
|
||||
}
|
||||
.theme-violet .text-primary-100 {
|
||||
color: #ffe3fe;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-200 {
|
||||
background-color: #ffc6fe;
|
||||
}
|
||||
.theme-violet .text-primary-200 {
|
||||
color: #ffc6fe;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-300 {
|
||||
background-color: #ff99f7;
|
||||
}
|
||||
.theme-violet .text-primary-300 {
|
||||
color: #ff99f7;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-400 {
|
||||
background-color: #ff5df2;
|
||||
}
|
||||
.theme-violet .text-primary-400 {
|
||||
color: #ff5df2;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-500 {
|
||||
background-color: #ff21f5;
|
||||
}
|
||||
.theme-violet .text-primary-500 {
|
||||
color: #ff21f5;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-600 {
|
||||
background-color: #fb00ff;
|
||||
}
|
||||
.theme-violet .text-primary-600 {
|
||||
color: #fb00ff;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-700 {
|
||||
background-color: #cf00ce;
|
||||
}
|
||||
.theme-violet .text-primary-700 {
|
||||
color: #cf00ce;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-800 {
|
||||
background-color: #a900a6;
|
||||
}
|
||||
.theme-violet .text-primary-800 {
|
||||
color: #a900a6;
|
||||
}
|
||||
|
||||
.theme-violet .bg-primary-900 {
|
||||
background-color: #890684;
|
||||
}
|
||||
.theme-violet .text-primary-900 {
|
||||
color: #890684;
|
||||
}
|
||||
|
||||
+1
-1
@@ -13,7 +13,7 @@
|
||||
have gotten the error notification and will push a fix ASAP. In the
|
||||
meantime, take a short break and come back a bit later.
|
||||
</p>
|
||||
<a class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||
<a class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||
href="mailto:[email protected]">Contact Us</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,8 +4,4 @@
|
||||
export let className;
|
||||
</script>
|
||||
|
||||
<img
|
||||
alt={name}
|
||||
{src}
|
||||
class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
|
||||
/>
|
||||
<img alt={name} {src} class="w-10 h-10 rounded-full bg-primary-100 {className}" />
|
||||
|
||||
@@ -30,9 +30,7 @@
|
||||
const totalVoteOfAllOptions = getTotalVotes(options);
|
||||
const totalVotesOfCurrentOption = currentOption.selectedBy.length;
|
||||
|
||||
return (
|
||||
Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
|
||||
);
|
||||
return Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0;
|
||||
}
|
||||
|
||||
function didUserSelect(option) {
|
||||
@@ -52,10 +50,7 @@
|
||||
{#if selectedOptionToView}
|
||||
<div>
|
||||
<div class="flex items-center mb-5">
|
||||
<button
|
||||
class="text-xl w-10 px-3"
|
||||
on:click={() => (selectedOptionToView = null)}
|
||||
>
|
||||
<button class="text-xl w-10 px-3" on:click={() => (selectedOptionToView = null)}>
|
||||
{`<`}
|
||||
</button>
|
||||
<div class="flex-grow text-center">
|
||||
@@ -79,7 +74,7 @@
|
||||
</h3>
|
||||
<p class="dark:text-white text-sm italic">
|
||||
Created by <a
|
||||
class="text-blue-500"
|
||||
class="text-primary-500"
|
||||
href="https://twitter.com/rotimi_best"
|
||||
target="_blank">@{poll.author.label}</a
|
||||
>
|
||||
@@ -124,15 +119,12 @@
|
||||
<div class="flex items-center">
|
||||
<div class="w-4/5 h-2 bg-gray-200 relative">
|
||||
<span
|
||||
class="absolute top-0 left-0 bg-blue-700 h-full"
|
||||
class="absolute top-0 left-0 bg-primary-700 h-full"
|
||||
style="width: {calculatePercent(poll.options, option)}%;"
|
||||
/>
|
||||
</div>
|
||||
{#if option.selectedBy.length}
|
||||
<button
|
||||
class="text-xl px-3 ml-5"
|
||||
on:click={() => (selectedOptionToView = option)}
|
||||
>
|
||||
<button class="text-xl px-3 ml-5" on:click={() => (selectedOptionToView = option)}>
|
||||
>
|
||||
</button>
|
||||
{/if}
|
||||
@@ -151,19 +143,17 @@
|
||||
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"
|
||||
'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"
|
||||
on:click={handleSelect(index)}
|
||||
>
|
||||
{#if hasUserVoted}
|
||||
<span
|
||||
class="progress absolute top-0 left-0 {didUserSelect(option)
|
||||
? 'bg-blue-700'
|
||||
? 'bg-primary-700'
|
||||
: 'bg-gray-300'} h-full bg-opacity-25"
|
||||
style="width: {calculatePercent(poll.options, option)}%;"
|
||||
/>
|
||||
<strong class="mr-3"
|
||||
>{calculatePercent(poll.options, option)}%</strong
|
||||
>
|
||||
<strong class="mr-3">{calculatePercent(poll.options, option)}%</strong>
|
||||
{/if}
|
||||
{option.label}
|
||||
</button>
|
||||
@@ -182,7 +172,7 @@
|
||||
{#if isAuthor}
|
||||
<div class="w-full text-center mt-3">
|
||||
<button
|
||||
class="px-5 py-3 bg-blue-700 text-white"
|
||||
class="px-5 py-3 bg-primary-700 text-white"
|
||||
on:click={() => (viewResult = !viewResult)}
|
||||
>
|
||||
{#if viewResult}
|
||||
@@ -191,10 +181,7 @@
|
||||
View results
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="px-5 py-3 bg-red-500 text-white"
|
||||
on:click={handlePollDelete}
|
||||
>
|
||||
<button class="px-5 py-3 bg-red-500 text-white" on:click={handlePollDelete}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -75,9 +75,11 @@
|
||||
{#if !showOnlyContent}
|
||||
<div class="w-full p-6 border-t border-grey text-center">
|
||||
{#if isLogin}
|
||||
Not registered yet? <a class="hover:underline text-blue-700" href="/signup">Sign up</a>
|
||||
Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
|
||||
{:else}
|
||||
Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
|
||||
Already have an account? <a class="hover:underline text-primary-700" href="/login"
|
||||
>Log In</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -7,8 +7,4 @@
|
||||
export let height = 'h-10';
|
||||
</script>
|
||||
|
||||
<img
|
||||
alt={name}
|
||||
{src}
|
||||
class="{className} {width} {height} {shape} bg-light-blue-100"
|
||||
/>
|
||||
<img alt={name} {src} class="{className} {width} {height} {shape} bg-primary-100" />
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
export let onClick;
|
||||
export let contained;
|
||||
export let color = 'text-blue-700 bg-blue-200 dark:bg-gray-500';
|
||||
export let color = 'text-primary-700 bg-primary-200 dark:bg-gray-500';
|
||||
export let size = 'large';
|
||||
</script>
|
||||
|
||||
@@ -15,4 +15,4 @@
|
||||
<CloseIcon size={20} class="carbon-icon dark:text-white" title="Delete" />
|
||||
{/if}
|
||||
</IconButton>
|
||||
<!-- color="text-blue-700 bg-blue-200 dark:bg-gray-200 dark:text-black" -->
|
||||
<!-- color="text-primary-700 bg-primary-200 dark:bg-gray-200 dark:text-black" -->
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<p
|
||||
class="org-avatar text-xs bg-blue-200 text-blue-700 font-bold py-1 px-1 rounded-md text-center"
|
||||
class="org-avatar text-xs bg-primary-200 text-primary-700 font-bold py-1 px-1 rounded-md text-center"
|
||||
>
|
||||
{label}
|
||||
</p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
StructuredListRow,
|
||||
StructuredListCell,
|
||||
StructuredListBody,
|
||||
Pagination,
|
||||
Pagination
|
||||
} from 'carbon-components-svelte';
|
||||
|
||||
let searchValue = '';
|
||||
@@ -17,9 +17,7 @@
|
||||
|
||||
<section class="flex flex-wrap items-start gap-2 mb-10 -ml-4 -mr-4">
|
||||
{#each CertificateReportData as data (data.id)}
|
||||
<div
|
||||
class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5"
|
||||
>
|
||||
<div class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5">
|
||||
<p class="text-xs font-normal">{data.title}</p>
|
||||
<bold class="text-2xl font-medium">{data.value}</bold>
|
||||
</div>
|
||||
@@ -39,22 +37,18 @@
|
||||
|
||||
<section class="mt-14 border-t border-gray-300">
|
||||
<StructuredList>
|
||||
<StructuredListHead class="bg-blue-50 py-0">
|
||||
<StructuredListHead class="bg-primary-50 py-0">
|
||||
<StructuredListRow head class="py-0">
|
||||
<StructuredListCell head class="py-0">
|
||||
<div
|
||||
class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
|
||||
class="flex-3 flex flex-row items-center justify-start w-full text-primary-600 text-sm font-medium"
|
||||
>
|
||||
<Checkbox bind:checked />
|
||||
<p class="text-blue-900 text-start w-full text-sm font-medium">
|
||||
Name of student
|
||||
</p>
|
||||
<p class="text-primary-900 text-start w-full text-sm font-medium">Name of student</p>
|
||||
</div>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell head class="py-0">
|
||||
<div
|
||||
class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
|
||||
>
|
||||
<div class="flex-2 items-center w-full text-primary-900 text-sm font-medium">
|
||||
<p class="align-middle text-sm font-medium pt-1">Date issued</p>
|
||||
<p class="opacity-0">personalized</p>
|
||||
</div>
|
||||
@@ -76,8 +70,8 @@
|
||||
<div class="flex-2 flex flex-row items-center gap-10 w-full">
|
||||
<p class="text-sm font-normal align-middle">{item.issued}</p>
|
||||
{#if item.peronalized == true}
|
||||
<span class="text-center bg-blue-100 px-3 py-2 rounded-lg">
|
||||
<p class="opacity-100 text-xs text-blue-600">personalized</p>
|
||||
<span class="text-center bg-primary-100 px-3 py-2 rounded-lg">
|
||||
<p class="opacity-100 text-xs text-primary-600">personalized</p>
|
||||
</span>
|
||||
{:else}
|
||||
<p class="opacity-0">personalized</p>
|
||||
|
||||
@@ -4,11 +4,13 @@
|
||||
|
||||
export let studentName;
|
||||
let borderwidth = 'border-l-8';
|
||||
let bordercolor = 'border-blue-800';
|
||||
let bordercolor = 'border-primary-800';
|
||||
let logo = './logo-512.png';
|
||||
</script>
|
||||
|
||||
<div class="certificate-bg flex items-center justify-center border border-dashed border-blue-400">
|
||||
<div
|
||||
class="certificate-bg flex items-center justify-center border border-dashed border-primary-400"
|
||||
>
|
||||
<div class="{borderwidth} {bordercolor}">
|
||||
<div class="w-full px-5 py-3">
|
||||
<p class="text-sm font-normal my-2 uppercase text-gray-500">
|
||||
@@ -24,7 +26,7 @@
|
||||
</p>
|
||||
<div>
|
||||
<p
|
||||
class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
|
||||
class="clamp bg-transparent text-base font-semibold text-primary-800 text-center uppercase my-2"
|
||||
>
|
||||
{$course.title}
|
||||
</p>
|
||||
|
||||
@@ -21,9 +21,7 @@
|
||||
modalHeading="Delete question"
|
||||
>
|
||||
<div>
|
||||
<h1 class="dark:text-white 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
|
||||
@@ -37,7 +35,7 @@
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Yes, delete"
|
||||
onClick={() => {
|
||||
onDelete();
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label={isDeleting ? 'Deleting...' : 'Yes, delete'}
|
||||
isDisabled={isDeleting}
|
||||
onClick={handleDelete}
|
||||
@@ -168,7 +168,7 @@
|
||||
<div class="float-right">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Delete this exercise"
|
||||
onClick={() => (shouldDelete = true)}
|
||||
/>
|
||||
|
||||
@@ -22,18 +22,12 @@
|
||||
let maxPoints = 0;
|
||||
|
||||
function getMaxPoints(questions) {
|
||||
return (questions || []).reduce(
|
||||
(acc, question) => acc + question.points,
|
||||
0
|
||||
);
|
||||
return (questions || []).reduce((acc, question) => acc + question.points, 0);
|
||||
}
|
||||
|
||||
function calculateTotal(grades) {
|
||||
if (!grades) return 0;
|
||||
return Object.values(grades).reduce(
|
||||
(acc, grade) => acc + parseInt(grade),
|
||||
0
|
||||
);
|
||||
return Object.values(grades).reduce((acc, grade) => acc + parseInt(grade), 0);
|
||||
}
|
||||
|
||||
function handleStatusChange() {
|
||||
@@ -41,7 +35,7 @@
|
||||
submissionId: data.id,
|
||||
prevStatusId: data.status_id,
|
||||
nextStatusId: status.value,
|
||||
total,
|
||||
total
|
||||
});
|
||||
|
||||
$snackbarStore.open = true;
|
||||
@@ -49,9 +43,7 @@
|
||||
}
|
||||
|
||||
function setStatus(data) {
|
||||
status = SELECTABLE_STATUS.find(
|
||||
(status) => status.value === data.status_id
|
||||
);
|
||||
status = SELECTABLE_STATUS.find((status) => status.value === data.status_id);
|
||||
}
|
||||
|
||||
function getStatusColor(status) {
|
||||
@@ -62,7 +54,7 @@
|
||||
// case STATUS.SUBMITTED:
|
||||
// return '';
|
||||
// case STATUS.IN_PROGRESS:
|
||||
// return 'text-white bg-blue-700';
|
||||
// return 'text-white bg-primary-700';
|
||||
// case STATUS.GRADED:
|
||||
// return 'text-white bg-green-700';
|
||||
// }
|
||||
@@ -91,7 +83,7 @@
|
||||
: []}
|
||||
questionnaireMetaData={{
|
||||
answers: data.answers || {},
|
||||
isFinished: true,
|
||||
isFinished: true
|
||||
}}
|
||||
bind:grades={data.questionAnswerByPoint}
|
||||
/>
|
||||
@@ -121,17 +113,9 @@
|
||||
<p class="dark:text-white font-bold text-lg">
|
||||
Details
|
||||
{#if data.isEarly}
|
||||
<span
|
||||
class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
|
||||
>
|
||||
early
|
||||
</span>
|
||||
<span class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"> early </span>
|
||||
{:else}
|
||||
<span
|
||||
class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
|
||||
>
|
||||
late
|
||||
</span>
|
||||
<span class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"> late </span>
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -39,16 +39,14 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
$questionnaire.questions = $questionnaire.questions.sort(
|
||||
(a, b) => a.order - b.order
|
||||
);
|
||||
$questionnaire.questions = $questionnaire.questions.sort((a, b) => a.order - b.order);
|
||||
$questionnaireOrder.open = false;
|
||||
}
|
||||
|
||||
$: items = filterOutDeleted($questionnaire.questions).map((q) => ({
|
||||
id: q.id,
|
||||
name: q.title,
|
||||
type: q.question_type.id,
|
||||
type: q.question_type.id
|
||||
}));
|
||||
</script>
|
||||
|
||||
@@ -64,8 +62,8 @@
|
||||
flipDurationMs,
|
||||
dropTargetStyle: {
|
||||
border: '2px #1d4ed8 solid',
|
||||
'border-style': 'dashed',
|
||||
},
|
||||
'border-style': 'dashed'
|
||||
}
|
||||
}}
|
||||
on:consider={handleDndConsider}
|
||||
on:finalize={handleDndFinalize}
|
||||
@@ -74,7 +72,7 @@
|
||||
{#each items as item (item.id)}
|
||||
<div
|
||||
animate:flip={{ duration: flipDurationMs }}
|
||||
class="flex items-center rounded-md p-4 border border-blue-600"
|
||||
class="flex items-center rounded-md p-4 border border-primary-600"
|
||||
>
|
||||
{#if item.type === 1}
|
||||
<RadioButtonCheckedIcon size={16} class="carbon-icon active" />
|
||||
|
||||
@@ -173,7 +173,7 @@
|
||||
<h2 class="text-xl my-1.5">No question added for this exercise</h2>
|
||||
<p class="text-sm text-center px-44">
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
Click the <span class="text-blue-700">Edit</span> button to add.
|
||||
Click the <span class="text-primary-700">Edit</span> button to add.
|
||||
</RoleBasedSecurity>
|
||||
</p>
|
||||
</Box>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
disabled={isLoading}
|
||||
>
|
||||
<form
|
||||
class="h-full w-full flex flex-col items-center justify-center border border-blue-300 border-dashed rounded-xl"
|
||||
class="h-full w-full flex flex-col items-center justify-center border border-primary-300 border-dashed rounded-xl"
|
||||
on:submit|preventDefault={onUpload}
|
||||
>
|
||||
{#if isLoading}
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
>
|
||||
<TextChip
|
||||
value={getLectureNo(index + 1)}
|
||||
className="bg-blue-200 text-blue-600 text-xs mr-2"
|
||||
className="bg-primary-200 text-primary-600 text-xs mr-2"
|
||||
size="sm"
|
||||
shape="rounded-full"
|
||||
/>
|
||||
@@ -253,7 +253,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
height: calc(100vh - 44px);
|
||||
height: calc(100vh - 45px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 360px;
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
$settingsDialog.open = false;
|
||||
const logo = await updateCourse($course.id, avatar, {
|
||||
title: $course.title,
|
||||
description: $course.description,
|
||||
description: $course.description
|
||||
});
|
||||
|
||||
if (logo) {
|
||||
@@ -100,7 +100,7 @@
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Delete"
|
||||
onClick={() => (shouldDelete = true)}
|
||||
/>
|
||||
|
||||
@@ -176,7 +176,7 @@
|
||||
<a
|
||||
href="{$page.url.pathname}{navItem.key}"
|
||||
class="{navItem.key === activeNav &&
|
||||
'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
|
||||
'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
|
||||
>
|
||||
{navItem.label}
|
||||
</a>
|
||||
@@ -229,7 +229,10 @@
|
||||
{#each lessons as lesson, index}
|
||||
<div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
|
||||
<div class="flex items-center mb-3">
|
||||
<Chip value={getLectureNo(index + 1, '0')} className="bg-blue-100 text-blue-700" />
|
||||
<Chip
|
||||
value={getLectureNo(index + 1, '0')}
|
||||
className="bg-primary-100 text-primary-700"
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-sm font-light">
|
||||
{lesson.title}
|
||||
</p>
|
||||
@@ -305,13 +308,13 @@
|
||||
</div>
|
||||
{#if !expandDescription[id] && review.description.split(' ').length > 9}
|
||||
<button
|
||||
class="underline text-blue-700 mt-2 font-normal"
|
||||
class="underline text-primary-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}>See More</button
|
||||
>
|
||||
{/if}
|
||||
{#if expandDescription[id]}
|
||||
<button
|
||||
class="underline text-blue-700 mt-2 font-normal"
|
||||
class="underline text-primary-700 mt-2 font-normal"
|
||||
on:click={() => toggleDescription(id)}>See Less</button
|
||||
>
|
||||
{/if}
|
||||
@@ -400,7 +403,7 @@
|
||||
{get(instructor, 'role', '')}
|
||||
</p>
|
||||
<p class="dark:text-white text-md font-light flex items-center">
|
||||
<PlayFilled size={16} class="text-blue-700" />
|
||||
<PlayFilled size={16} class="text-primary-700" />
|
||||
<span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -46,9 +46,8 @@
|
||||
>
|
||||
{#each options as option, index}
|
||||
<button
|
||||
class="block px-4 py-3 text-left hover:bg-blue-100 {!isOptionLast(
|
||||
index
|
||||
) && 'border-b'} w-full dark:text-white dark:hover:text-black"
|
||||
class="block px-4 py-3 text-left hover:bg-primary-100 {!isOptionLast(index) &&
|
||||
'border-b'} w-full dark:text-white dark:hover:text-black"
|
||||
on:click={onClick(option)}
|
||||
>
|
||||
{option.label}
|
||||
@@ -60,8 +59,8 @@
|
||||
|
||||
<style>
|
||||
.dropdown {
|
||||
box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
|
||||
0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
|
||||
box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%),
|
||||
0px 3px 14px 2px rgb(0 0 0 / 12%);
|
||||
right: 0px;
|
||||
top: 20px;
|
||||
left: unset;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
export let textAreaHeight = '';
|
||||
export let textareaRef;
|
||||
export let buttonRef;
|
||||
const activeClassName = 'border-b-2 border-blue-700';
|
||||
const activeClassName = 'border-b-2 border-primary-700';
|
||||
|
||||
const handleTabClick = (tab) => () => {
|
||||
isWriteMode = tab === 1;
|
||||
@@ -76,7 +76,7 @@
|
||||
Styling with Markdown is supported.
|
||||
<a
|
||||
target="_blank"
|
||||
class="text-blue-500 underline"
|
||||
class="text-primary-500 underline"
|
||||
href="https://guides.github.com/features/mastering-markdown"
|
||||
>
|
||||
Learn more
|
||||
|
||||
@@ -24,7 +24,8 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="w-full p-6 border-t border-grey text-center">
|
||||
Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
|
||||
Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,10 +7,8 @@
|
||||
<div class="flex justify-center w-full">
|
||||
<span class="text-gray-700 text-sm py-3"
|
||||
>Created with love by
|
||||
<a
|
||||
class="underline text-blue-700"
|
||||
href="https://twitter.com/rotimi_best"
|
||||
target="_blank">Rotimi Best</a
|
||||
<a class="underline text-primary-700" href="https://twitter.com/rotimi_best" target="_blank"
|
||||
>Rotimi Best</a
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
export let maxRows = 3;
|
||||
export let className = '';
|
||||
export let labelClassName = '';
|
||||
export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
|
||||
export let bgColor = 'bg-gray-50 focus:bg-primary-50 dark:bg-white';
|
||||
export let helperMessage = '';
|
||||
export let errorMessage = '';
|
||||
export let isRequired = false;
|
||||
@@ -38,7 +38,7 @@
|
||||
{placeholder}
|
||||
bind:value
|
||||
required={isRequired}
|
||||
class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
|
||||
class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
|
||||
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
|
||||
on:change={onChange}
|
||||
/>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
export let className = '';
|
||||
export let inputClassName = '';
|
||||
export let labelClassName = '';
|
||||
export let bgColor = 'bg-gray-100 focus:bg-blue-50 dark:bg-white';
|
||||
export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-white';
|
||||
export let type = 'text';
|
||||
export let isPassword = false;
|
||||
export let autoFocus = false;
|
||||
@@ -67,7 +67,7 @@
|
||||
{/if}
|
||||
<input
|
||||
use:typeAction
|
||||
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
||||
class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
|
||||
? 'border-red-600'
|
||||
: ''}"
|
||||
on:keydown={onKeyDown}
|
||||
|
||||
@@ -4,9 +4,8 @@
|
||||
|
||||
<div class="break-all">
|
||||
{#each tags as tag}
|
||||
<a
|
||||
class="text-blue-700 dark:text-blue-500 mr-5 text-sm"
|
||||
href="?filter={tag}">#{tag.toLowerCase()}</a
|
||||
<a class="text-primary-700 dark:text-primary-500 mr-5 text-sm" href="?filter={tag}"
|
||||
>#{tag.toLowerCase()}</a
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="dark"
|
||||
class=""
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -59,7 +59,7 @@
|
||||
height="h-7"
|
||||
/>
|
||||
{:else}
|
||||
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
|
||||
<TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
|
||||
{/if}
|
||||
|
||||
<OrgSelector />
|
||||
@@ -77,7 +77,7 @@
|
||||
this={item.icon}
|
||||
color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
|
||||
size={24}
|
||||
class="carbon-icon dark:text-white"
|
||||
class="carbon-icon text-white"
|
||||
/>
|
||||
<p class="dark:text-white ml-2">{item.name}</p>
|
||||
</li>
|
||||
@@ -88,16 +88,14 @@
|
||||
<span class="flex-grow" />
|
||||
<ul class="my-5 pb-5 px-4">
|
||||
<a href="/lms" class="text-black">
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<li class="flex items-center py-3 px-4 mb-2 rounded">
|
||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||
<p class="dark:text-white ml-2">Help</p>
|
||||
</li>
|
||||
</a>
|
||||
<a href="/lms/settings" class="text-black">
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
||||
class="flex items-center py-3 px-4 mb-2 rounded {isActive(
|
||||
$page.url.pathname,
|
||||
`/lms/settings`
|
||||
) && NavClasses.active}"
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let placeholder = ``;
|
||||
const activeClassName = 'border-b-2 border-blue-700';
|
||||
const activeClassName = 'border-b-2 border-primary-700';
|
||||
let isWriteMode = true;
|
||||
|
||||
const handleTabClick = (tab) => (event) => {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
export let navClass = '';
|
||||
export let isCoursePage = false;
|
||||
|
||||
function toggleTheme() {
|
||||
function toggleDarkMode() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByTheme($appStore.isDark);
|
||||
@@ -36,7 +36,9 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-700">
|
||||
<nav
|
||||
class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
|
||||
>
|
||||
<ul class="flex w-full items-center">
|
||||
<div class="flex items-center text-white">
|
||||
{#if isCoursePage}
|
||||
@@ -66,7 +68,7 @@
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleTheme}>
|
||||
<IconButton size="small" onClick={toggleDarkMode}>
|
||||
{#if $appStore.isDark}
|
||||
<Sun size={16} class="text-white" />
|
||||
{:else}
|
||||
@@ -100,21 +102,6 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* [aria-current] {
|
||||
color: var(--main-primary-color);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
[aria-current]::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: calc(100% - 3em);
|
||||
height: 2px;
|
||||
background-color: var(--main-primary-color);
|
||||
display: block;
|
||||
bottom: -17px;
|
||||
} */
|
||||
|
||||
@media only screen and (max-width: 1002px) {
|
||||
nav.hide {
|
||||
display: none;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
export let navClass = '';
|
||||
|
||||
function toggleTheme() {
|
||||
function toggleDarkMode() {
|
||||
$appStore.isDark = !$appStore.isDark;
|
||||
|
||||
toggleBodyByTheme($appStore.isDark);
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
|
||||
<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
|
||||
<ul class="flex w-full items-center">
|
||||
<div class="">
|
||||
<a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
|
||||
@@ -35,7 +35,7 @@
|
||||
<NotificationIcon size={20} class="text-white mr-2" />
|
||||
</li>
|
||||
<li>
|
||||
<IconButton size="small" onClick={toggleTheme}>
|
||||
<IconButton size="small" onClick={toggleDarkMode}>
|
||||
{#if $appStore.isDark}
|
||||
<SunIcon size={16} class="text-white" />
|
||||
{:else}
|
||||
|
||||
@@ -8,16 +8,9 @@
|
||||
export let open = false;
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
onClose={() => (open = false)}
|
||||
bind:open
|
||||
width="w-96"
|
||||
modalHeading="Delete comment"
|
||||
>
|
||||
<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Delete comment">
|
||||
<div>
|
||||
<h1 class="dark:text-white text-lg">
|
||||
Are you sure you want to delete this comment?
|
||||
</h1>
|
||||
<h1 class="dark:text-white text-lg">Are you sure you want to delete this comment?</h1>
|
||||
|
||||
<div class="mt-5 flex items-center justify-between">
|
||||
<PrimaryButton
|
||||
@@ -28,7 +21,7 @@
|
||||
/>
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Yes, delete"
|
||||
onClick={onDelete}
|
||||
/>
|
||||
|
||||
@@ -145,15 +145,15 @@
|
||||
<div class="absolute h-[80vh] top-0 w-full opacity-80 z-10 bg-white" />
|
||||
|
||||
{#if video}
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div
|
||||
class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row z-20 relative"
|
||||
>
|
||||
<!-- Course Description -->
|
||||
<div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
|
||||
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
|
||||
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
|
||||
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
|
||||
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
|
||||
</h1>
|
||||
<p class="text-md mb-6 text-xl">
|
||||
Practical project-based courses that are easy to understand and straight to the point
|
||||
@@ -179,9 +179,9 @@
|
||||
{:else}
|
||||
<div class="w-full h-full flex items-center justify-center md:flex-row z-20 relative">
|
||||
<div class="max-w-[600px] mx-auto w-11/12 py-10 flex flex-col items-center">
|
||||
<p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
|
||||
<p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
|
||||
<h1 class="text-4xl md:text-6xl text-center my-4 font-bold">
|
||||
Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
|
||||
Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
|
||||
</h1>
|
||||
<p class="text-md mb-6 text-center text-xl">
|
||||
Practical project-based courses that are easy to understand and straight to the point
|
||||
@@ -227,7 +227,7 @@
|
||||
<div class="w-full">
|
||||
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
||||
<h1 class="text-5xl text-center my-4 font-bold">
|
||||
Explore our <span class="text-blue-600">Courses</span>
|
||||
Explore our <span class="text-primary-600">Courses</span>
|
||||
</h1>
|
||||
<p class="text-md text-center">
|
||||
Find courses you will love from best teachers all over the world🌎.
|
||||
@@ -297,11 +297,11 @@
|
||||
</section>
|
||||
|
||||
<!-- Contact Section-->
|
||||
<section id="contact" transition:fade class="my-10 w-full bg-blue-50">
|
||||
<section id="contact" transition:fade class="my-10 w-full bg-primary-50">
|
||||
<div class="mx-auto max-w-6xl w-full">
|
||||
<div class="max-w-[500px] mx-auto w-11/12 py-10">
|
||||
<h1 class="text-5xl text-center my-4 font-bold">
|
||||
Have you got any <span class="text-blue-600">Question?</span>
|
||||
Have you got any <span class="text-primary-600">Question?</span>
|
||||
</h1>
|
||||
<p class="text-md text-center">Reach out to us with any question you might have.</p>
|
||||
</div>
|
||||
@@ -393,7 +393,7 @@
|
||||
<!-- Waitlist Section -->
|
||||
<section id="waitlist" transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
|
||||
<div
|
||||
class="bg-blue-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
|
||||
class="bg-primary-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
|
||||
>
|
||||
<div class="w-full md:w-[65%] md:mr-4">
|
||||
<h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
|
||||
@@ -474,7 +474,7 @@
|
||||
</ul>
|
||||
<p class="text-center mt-5">
|
||||
Powered by
|
||||
<a class="text-blue-600 underline" href="https://classroomio.com" target="_blank"
|
||||
<a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
|
||||
>ClassroomIO</a
|
||||
>
|
||||
</p>
|
||||
|
||||
@@ -12,15 +12,12 @@
|
||||
...m,
|
||||
open: false,
|
||||
id: null,
|
||||
isQuestion: false,
|
||||
isQuestion: false
|
||||
}));
|
||||
}
|
||||
|
||||
async function deleteQuiz() {
|
||||
const { data, error } = await supabase
|
||||
.from('quiz')
|
||||
.delete()
|
||||
.match({ id: $deleteModal.id });
|
||||
const { data, error } = await supabase.from('quiz').delete().match({ id: $deleteModal.id });
|
||||
console.log('data', data);
|
||||
console.log('error', error);
|
||||
|
||||
@@ -53,7 +50,7 @@
|
||||
<div class="mt-5">
|
||||
<PrimaryButton
|
||||
className="px-6 py-3"
|
||||
variant={VARIANTS.CONTAINED_DANGER}
|
||||
variant={VARIANTS.CONTAINED}
|
||||
label="Delete"
|
||||
onClick={() => {
|
||||
if ($deleteModal.isQuestion) {
|
||||
|
||||
@@ -12,18 +12,18 @@
|
||||
css: (t) => `
|
||||
${slideTrans.css(t)}
|
||||
opacity: ${t};
|
||||
`,
|
||||
`
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="circle flex items-center flex-col justify-center {className}">
|
||||
{#key value}
|
||||
<h3 class="text-blue-600" transition:fadeSlide={{ duration: 500 }}>
|
||||
<h3 class="text-primary-600" transition:fadeSlide={{ duration: 500 }}>
|
||||
{value}
|
||||
</h3>
|
||||
{/key}
|
||||
<p class="text-blue-600 text-md">{label}</p>
|
||||
<p class="text-primary-600 text-md">{label}</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -13,29 +13,50 @@
|
||||
|
||||
let avatar;
|
||||
let loading = false;
|
||||
const themes = {
|
||||
rose: 'theme-rose',
|
||||
green: 'theme-green',
|
||||
orange: 'theme-orange',
|
||||
violet: 'theme-violet',
|
||||
default: ''
|
||||
};
|
||||
|
||||
function handleChangeTheme(t = '') {
|
||||
return async () => {
|
||||
document.body.className = document.body.className
|
||||
.split(' ')
|
||||
.filter((c) => !c.includes('theme'))
|
||||
.join(' ')
|
||||
.concat(!!t ? ' ' : '', t);
|
||||
$currentOrg.theme = t;
|
||||
|
||||
const res = await supabase
|
||||
.from('organization')
|
||||
.update({ theme: t })
|
||||
.match({ id: $currentOrg.id });
|
||||
|
||||
console.log('Update theme', res);
|
||||
};
|
||||
}
|
||||
|
||||
async function handleUpdate() {
|
||||
try {
|
||||
loading = true;
|
||||
|
||||
const updates = {
|
||||
name: $currentOrg.name,
|
||||
name: $currentOrg.name
|
||||
};
|
||||
|
||||
if (avatar) {
|
||||
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
|
||||
|
||||
const { data } = await supabase.storage
|
||||
.from('avatars')
|
||||
.upload(filename, avatar, {
|
||||
cacheControl: '3600',
|
||||
upsert: false,
|
||||
});
|
||||
const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
|
||||
cacheControl: '3600',
|
||||
upsert: false
|
||||
});
|
||||
|
||||
if (data && data.Key) {
|
||||
const { publicURL } = supabase.storage
|
||||
.from('avatars')
|
||||
.getPublicUrl(filename);
|
||||
const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
|
||||
|
||||
updates.avatar_url = publicURL;
|
||||
$currentOrg.avatar_url = publicURL;
|
||||
@@ -50,7 +71,7 @@
|
||||
|
||||
currentOrg.update((_currentOrg) => ({
|
||||
..._currentOrg,
|
||||
...updates,
|
||||
...updates
|
||||
}));
|
||||
$snackbarStore.open = true;
|
||||
$snackbarStore.message = 'Update successful';
|
||||
@@ -78,15 +99,9 @@
|
||||
|
||||
<Grid class="border-c rounded border-gray-200 w-full mt-5">
|
||||
<Row class="py-7 border-bottom-c">
|
||||
<Column sm={2} md={2} lg={4}
|
||||
><SectionTitle>Organization Profile</SectionTitle></Column
|
||||
>
|
||||
<Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<TextField
|
||||
label="Organization Name"
|
||||
bind:value={$currentOrg.name}
|
||||
className="w-60 mb-5"
|
||||
/>
|
||||
<TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
|
||||
<UploadImage
|
||||
bind:avatar
|
||||
src={$currentOrg.avatar_url}
|
||||
@@ -102,24 +117,64 @@
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
<!-- <Row class="py-7 border-bottom-c">
|
||||
<Row class="py-7 border-bottom-c">
|
||||
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4 class="dark:text-white">Set your brand</h4>
|
||||
<h4 class="dark:text-white mt-0">Set your brand color</h4>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="rounded-full border-2 {$currentOrg.theme === themes.default &&
|
||||
'border-[#1d4ee2]'} mr-3"
|
||||
on:click={handleChangeTheme(themes.default)}
|
||||
>
|
||||
<div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
|
||||
'border-[#be1241]'} mr-3"
|
||||
on:click={handleChangeTheme(themes.rose)}
|
||||
>
|
||||
<div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full border-2 {$currentOrg.theme === themes.green &&
|
||||
'border-[#0c891b]'} mr-3"
|
||||
on:click={handleChangeTheme(themes.green)}
|
||||
>
|
||||
<div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
|
||||
'border-[#cc4902]'} mr-3"
|
||||
on:click={handleChangeTheme(themes.orange)}
|
||||
>
|
||||
<div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
|
||||
'border-[#cf00ce]'} mr-3"
|
||||
on:click={handleChangeTheme(themes.violet)}
|
||||
>
|
||||
<div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
|
||||
</button>
|
||||
</div>
|
||||
</Column>
|
||||
</Row> -->
|
||||
</Row>
|
||||
<Row class="py-7 border-bottom-c">
|
||||
<Column sm={2} md={2} lg={4}
|
||||
><SectionTitle>Custom Domain</SectionTitle></Column
|
||||
>
|
||||
<Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4 class="dark:text-white">Customise your Domain</h4>
|
||||
<h4 class="dark:text-white mt-0">Customise your Domain</h4>
|
||||
<p class="text-sm text-gray-500 dark:text-white">
|
||||
Create a custom URL so your audience can get to your organization easily
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label="Edit domain"
|
||||
className="my-7 py-5 px-10 text-blue-700"
|
||||
className="my-7 py-5 px-10 text-primary-700"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => gotoSetting('/domains')}
|
||||
/>
|
||||
@@ -130,12 +185,11 @@
|
||||
<Column sm={2} md={6} lg={8}>
|
||||
<h4 class="dark:text-white">Set up your website</h4>
|
||||
<p class="text-sm text-gray-500 dark:text-white">
|
||||
Add team mates to your organization so you can both collaborate on
|
||||
projects.
|
||||
Add team mates to your organization so you can both collaborate on projects.
|
||||
</p>
|
||||
<PrimaryButton
|
||||
label="Manage Team"
|
||||
className="my-7 py-5 px-10 text-blue-700"
|
||||
className="my-7 py-5 px-10 text-primary-700"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={() => gotoSetting('/teams')}
|
||||
/>
|
||||
|
||||
@@ -99,6 +99,6 @@
|
||||
isDisabled={loading}
|
||||
onClick={handleUpdate}
|
||||
/>
|
||||
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
|
||||
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
height="h-7"
|
||||
/>
|
||||
{:else if $currentOrg.shortName}
|
||||
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
|
||||
<TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
|
||||
{/if}
|
||||
|
||||
<OrgSelector />
|
||||
@@ -77,7 +77,7 @@
|
||||
{#each menuItems as menuItem}
|
||||
<a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-primary-200 dark:hover:bg-gray-700 {isActive(
|
||||
$page.url.pathname,
|
||||
`${$currentOrgPath}${menuItem.path}`
|
||||
) && NavClasses.active}"
|
||||
@@ -107,16 +107,14 @@
|
||||
<span class="flex-grow" />
|
||||
<ul class="my-5 pb-5 px-4">
|
||||
<a href={$currentOrgPath} class="text-black no-underline">
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
|
||||
>
|
||||
<li class="flex items-center py-3 px-4 mb-2 rounded">
|
||||
<HelpIcon size={20} class="carbon-icon dark:text-white" />
|
||||
<p class="dark:text-white ml-2">Help</p>
|
||||
</li>
|
||||
</a>
|
||||
<a href="{$currentOrgPath}/settings" class="text-black no-underline">
|
||||
<li
|
||||
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
|
||||
class="flex items-center py-3 px-4 mb-2 rounded {isActive(
|
||||
$page.url.pathname,
|
||||
`${$currentOrgPath}/settings`
|
||||
) && NavClasses.active}"
|
||||
|
||||
@@ -13,15 +13,14 @@
|
||||
|
||||
<div class="relative">
|
||||
<button
|
||||
class="{disabled &&
|
||||
'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
|
||||
'border-b border-gray-100'} {active && 'bg-blue-100 dark:bg-gray-500'}"
|
||||
class="{disabled && 'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
|
||||
'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
|
||||
on:click={onClick}
|
||||
>
|
||||
{#if avatarText}
|
||||
<TextChip
|
||||
value={avatarText}
|
||||
className="mr-2 bg-blue-200 font-bold dark:bg-gray-600"
|
||||
className="mr-2 bg-primary-200 font-bold dark:bg-gray-600"
|
||||
{size}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
// import
|
||||
// border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
|
||||
// border border-gray-300 rounded-md p-3 bg-primary-200 bg-opacity-25
|
||||
export let width = 'max-w-4xl w-full lg:w-11/12';
|
||||
export let padding = 'pb-5 px-4';
|
||||
export let className = '';
|
||||
|
||||
@@ -12,15 +12,16 @@ export const VARIANTS = {
|
||||
};
|
||||
|
||||
export const VARIANTS_CLASS = {
|
||||
[VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED_LIGHT]: 'border-none bg-blue-600 hover:bg-blue-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED]: 'border-none bg-primary-700 hover:bg-primary-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED_LIGHT]:
|
||||
'border-none bg-primary-600 hover:bg-primary-900 text-white font-bold',
|
||||
[VARIANTS.CONTAINED_WHITE]:
|
||||
'border-none hover:border-black-300 hover:bg-blue-700 dark:hover:bg-blue-900 text-black hover:text-white bg-white',
|
||||
'border-none hover:border-black-300 hover:bg-primary-700 dark:hover:bg-primary-900 text-black hover:text-white bg-white',
|
||||
[VARIANTS.CONTAINED_INFO]: 'border-none bg-gray-400 hover:bg-gray-600 text-white',
|
||||
[VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
|
||||
[VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
|
||||
[VARIANTS.OUTLINED]:
|
||||
'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white dark:text-white',
|
||||
'border border-primary-700 hover:border-black-300 hover:bg-primary-700 text-black dark:text-white',
|
||||
[VARIANTS.NONE]:
|
||||
'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
|
||||
[VARIANTS.TEXT]: 'text-black hover:underline',
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
isLoading ? VARIANTS.OUTLINED : variant
|
||||
]} {!disablePadding &&
|
||||
'py-[0.60rem] px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
|
||||
'py-[0.60rem] border-blue-700'} {variant !== VARIANTS.TEXT &&
|
||||
'py-[0.60rem] border-primary-700'} {variant !== VARIANTS.TEXT &&
|
||||
'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
|
||||
VARIANTS.CONTAINED_WHITE
|
||||
? 'dark:text-white'
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="root bg-blue-700 hover:bg-blue-900 text-white font-bold rounded inline-flex items-center float-right"
|
||||
class="root bg-primary-700 hover:bg-primary-900 text-white font-bold rounded inline-flex items-center float-right"
|
||||
{href}
|
||||
on:click={handleClick}
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
<div class="w-full h-3 rounded-md bg-gray-300 relative">
|
||||
<span
|
||||
class="progress absolute top-0 left-0 rounded-md bg-blue-700 h-full"
|
||||
class="progress absolute top-0 left-0 rounded-md bg-primary-700 h-full"
|
||||
style="width: {value}%;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
ref.scrollIntoView({
|
||||
block: 'start',
|
||||
behavior: 'smooth',
|
||||
inline: 'nearest',
|
||||
inline: 'nearest'
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -31,10 +31,10 @@
|
||||
bind:this={ref}
|
||||
class="bg-white dark:bg-gray-800 border {hasError
|
||||
? 'border-red-700'
|
||||
: 'border-gray hover:border-blue-700'} rounded-md mb-6 relative root"
|
||||
: 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
|
||||
>
|
||||
{#if isTitle}
|
||||
<div class="title absolute bg-blue-700" />
|
||||
<div class="title absolute bg-primary-700" />
|
||||
{/if}
|
||||
|
||||
{#if onClose && !isTitle}
|
||||
|
||||
@@ -3,13 +3,13 @@ export const SNACKBAR_SEVERITY = {
|
||||
WARNING: 'WARNING',
|
||||
DEFAULT: 'DEFAULT',
|
||||
INFO: 'INFO',
|
||||
SUCCESS: 'SUCCESS',
|
||||
SUCCESS: 'SUCCESS'
|
||||
};
|
||||
|
||||
export const SNACKBAR_SEVERITY_COLOR = {
|
||||
ERROR: 'bg-red-600',
|
||||
WARNING: 'bg-yellow-600',
|
||||
INFO: 'bg-blue-600',
|
||||
INFO: 'bg-primary-600',
|
||||
DEFAULT: 'bg-gray-600',
|
||||
SUCCESS: 'bg-green-600',
|
||||
SUCCESS: 'bg-green-600'
|
||||
};
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
{#if !tab.icon && !tab.badgeValue}
|
||||
<button
|
||||
class="relative {currentTab === tab.value
|
||||
? 'text-blue-700'
|
||||
? 'text-primary-700'
|
||||
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
|
||||
on:click={onChange(tab.value)}
|
||||
>
|
||||
@@ -19,7 +19,7 @@
|
||||
{tab.label}
|
||||
</div>
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||
tab.value
|
||||
? 'w-full'
|
||||
: 'w-0'}"
|
||||
@@ -28,7 +28,7 @@
|
||||
{:else}
|
||||
<button
|
||||
class="relative {currentTab === tab.value
|
||||
? 'text-blue-700'
|
||||
? 'text-primary-700'
|
||||
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
|
||||
on:click={onChange(tab.value)}
|
||||
>
|
||||
@@ -47,7 +47,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
<span
|
||||
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||
class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
|
||||
tab.value
|
||||
? 'w-full'
|
||||
: 'w-0'}"
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="width-fit text-blue-700 flex items-center cursor-pointer text-sm mt-3"
|
||||
class="width-fit text-primary-700 flex items-center cursor-pointer text-sm mt-3"
|
||||
on:click={() => {
|
||||
fileinput.click();
|
||||
}}
|
||||
|
||||
@@ -18,18 +18,13 @@
|
||||
<p class="text-black text-sm md:text-base lg:text-lg">
|
||||
We at <a
|
||||
href="https://app.classroomio.com/"
|
||||
class="text-blue-700 no-underline hover:no-underline">ClassroomIO</a
|
||||
class="text-primary-700 no-underline hover:no-underline">ClassroomIO</a
|
||||
>
|
||||
are a small team with a large mission to empower educators with great
|
||||
technology to help them train the future generation. Education is the most
|
||||
powerful gift you can give anyone, and it makes so much sense to give you
|
||||
all the tools you need to give more people this GIFT.
|
||||
<span class="text-blue-700">Thank you for choosing us;</span> we deeply appreciate
|
||||
it and are at your service.
|
||||
are a small team with a large mission to empower educators with great technology to help them train
|
||||
the future generation. Education is the most powerful gift you can give anyone, and it makes so much
|
||||
sense to give you all the tools you need to give more people this GIFT.
|
||||
<span class="text-primary-700">Thank you for choosing us;</span> we deeply appreciate it and are
|
||||
at your service.
|
||||
</p>
|
||||
<img
|
||||
src="/images/welcome-modal-banner.svg"
|
||||
alt="A welcome banner"
|
||||
class="w-full my-6"
|
||||
/>
|
||||
<img src="/images/welcome-modal-banner.svg" alt="A welcome banner" class="w-full my-6" />
|
||||
</Modal>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export const NavClasses = {
|
||||
active: 'bg-gray-200 dark:bg-gray-700',
|
||||
active: 'active-sidenav bg-primary-700 text-white transition delay-150 duration-300 ease-in-out',
|
||||
background: ''
|
||||
};
|
||||
|
||||
@@ -58,6 +58,7 @@ export async function getOrganizations(userId) {
|
||||
id,
|
||||
name,
|
||||
siteName,
|
||||
theme,
|
||||
avatar_url
|
||||
)
|
||||
`
|
||||
@@ -72,6 +73,7 @@ export async function getOrganizations(userId) {
|
||||
name: orgMember?.organization?.name,
|
||||
shortName: orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
|
||||
siteName: orgMember?.organization?.siteName,
|
||||
theme: orgMember?.organization?.theme,
|
||||
avatar_url: orgMember?.organization?.avatar_url,
|
||||
memberId: orgMember?.id
|
||||
});
|
||||
@@ -155,7 +157,7 @@ export async function getCourseBySiteName(siteName) {
|
||||
return data;
|
||||
}
|
||||
|
||||
export async function getCurrentOrg(siteName) {
|
||||
export async function getCurrentOrg(siteName, justGet = false) {
|
||||
const { data, error } = await supabase
|
||||
.from('organization')
|
||||
.select(
|
||||
@@ -163,15 +165,20 @@ export async function getCurrentOrg(siteName) {
|
||||
id,
|
||||
name,
|
||||
siteName,
|
||||
theme,
|
||||
avatar_url
|
||||
`
|
||||
)
|
||||
.eq('siteName', siteName);
|
||||
|
||||
if (error || isEmpty(data)) {
|
||||
if (!justGet && (error || isEmpty(data))) {
|
||||
console.error('Error getOrganization', error);
|
||||
return goto('/404');
|
||||
}
|
||||
|
||||
currentOrg.set(data[0]);
|
||||
if (!justGet) {
|
||||
currentOrg.set(data[0]);
|
||||
} else {
|
||||
return data[0];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ export const currentOrg = writable({
|
||||
shortName: '',
|
||||
siteName: '',
|
||||
avatar_url: '',
|
||||
theme: '',
|
||||
memberId: ''
|
||||
});
|
||||
export const orgAudience = writable([]);
|
||||
|
||||
@@ -24,12 +24,12 @@
|
||||
Something unexpected occured.
|
||||
</h2>
|
||||
<p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
|
||||
Don't worry, your learning is safe. It isn't your fault, it is ours. We
|
||||
have gotten the error notification and will push a fix ASAP. In the
|
||||
meantime, take a short break and come back a bit later.
|
||||
Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error
|
||||
notification and will push a fix ASAP. In the meantime, take a short break and come back a bit
|
||||
later.
|
||||
</p>
|
||||
<a
|
||||
class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||
class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
|
||||
href="mailto:[email protected]">Contact Us</a
|
||||
>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
// import { redirect } from '@sveltejs/kit';
|
||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
||||
import { getCurrentOrg } from '$lib/utils/services/org';
|
||||
|
||||
/** @type {import('./$types').LayoutServerLoad} */
|
||||
export const load = ({ url, cookies }) => {
|
||||
export const load = async ({ url, cookies }) => {
|
||||
// if (url.hostname === 'classroomio.com') {
|
||||
// throw redirect(301, 'https://about.classroomio.com');
|
||||
// }
|
||||
@@ -10,7 +11,8 @@ export const load = ({ url, cookies }) => {
|
||||
let response = {
|
||||
orgSiteName: '',
|
||||
isOrgSite: false,
|
||||
skipAuth: false
|
||||
skipAuth: false,
|
||||
org: {}
|
||||
};
|
||||
|
||||
const debugOrgLandingPage = cookies.get('debugOrgLandingPage');
|
||||
@@ -26,6 +28,7 @@ export const load = ({ url, cookies }) => {
|
||||
|
||||
response.isOrgSite = debugMode || answer;
|
||||
response.orgSiteName = debugMode ? 'codingdojo' : subdomain;
|
||||
response.org = await getCurrentOrg(response.orgSiteName, true);
|
||||
} else if (subdomain === 'play' || debugPlay === 'true') {
|
||||
response.skipAuth = true;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,6 @@
|
||||
import { toggleBodyByTheme } from '$lib/utils/functions/app';
|
||||
import { appStore } from '$lib/utils/store/app';
|
||||
import { currentOrg } from '$lib/utils/store/org';
|
||||
import { blockedSubdomain } from '$lib/utils/constants/app';
|
||||
|
||||
import '../app.postcss';
|
||||
|
||||
@@ -48,6 +47,10 @@
|
||||
setTimeout(() => set(currentPreloading), 250);
|
||||
});
|
||||
|
||||
function setTheme(theme) {
|
||||
document.body.className = document.body.className.concat(' ', theme);
|
||||
}
|
||||
|
||||
function setupSentry() {
|
||||
if (!dev) {
|
||||
Sentry.init({
|
||||
@@ -173,6 +176,8 @@
|
||||
// By default redirect to first organization
|
||||
goto(`/org/${orgRes.currentOrg.siteName}`);
|
||||
}
|
||||
|
||||
setTheme(orgRes.currentOrg.theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -237,9 +242,11 @@
|
||||
}
|
||||
|
||||
if (data.isOrgSite) {
|
||||
console.log('data', data);
|
||||
$appStore.orgSiteName = data.orgSiteName;
|
||||
$appStore.isOrgSite = data.isOrgSite;
|
||||
getCurrentOrg(data.orgSiteName);
|
||||
|
||||
currentOrg.set(data.org);
|
||||
}
|
||||
|
||||
return () => {
|
||||
@@ -357,7 +364,9 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:global(.dark svg.dark path) {
|
||||
:global(.dark svg.dark path),
|
||||
:global(.active-sidenav svg.dark path),
|
||||
:global(.active-sidenav svg.carbon-icon path) {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
-->
|
||||
<div>
|
||||
<h3 class="dark:text-white text-4xl text-center">
|
||||
Classroom<span class="text-blue-700">IO</span>
|
||||
Classroom<span class="text-primary-700">IO</span>
|
||||
</h3>
|
||||
<p class="dark:text-white text-lg text-center">
|
||||
The operating system for classroooms of the future 🚀🚀🚀.
|
||||
@@ -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-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-primary-700 {animate}"
|
||||
>
|
||||
<h3 class="dark:text-white text-3xl">
|
||||
{#if index === 0}
|
||||
|
||||
@@ -162,11 +162,11 @@
|
||||
<section class="my-5 mx-9">
|
||||
<StructuredList class="m-0">
|
||||
<!-- Moved the lesson headers outside the students loop -->
|
||||
<StructuredListHead class="bg-blue-100">
|
||||
<StructuredListHead class="bg-primary-100">
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
|
||||
<StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
|
||||
{#each $lessons as lesson, index}
|
||||
<StructuredListCell head class="text-blue-600 py-3"
|
||||
<StructuredListCell head class="text-primary-600 py-3"
|
||||
>Lesson 0{getLectureNo(index + 1)}</StructuredListCell
|
||||
>
|
||||
{/each}
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
import { course, setCourse, group } from '$lib/components/Course/store';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import TextChip from '$lib/components/Chip/Text.svelte';
|
||||
import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
|
||||
|
||||
export let data;
|
||||
const { courseId } = data;
|
||||
@@ -143,7 +144,7 @@
|
||||
value={getLessonOrder(lesson.id)}
|
||||
size="sm"
|
||||
shape="rounded-full"
|
||||
className="bg-blue-200 text-blue-600 text-xs"
|
||||
className="bg-primary-200 text-primary-600 text-xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -186,12 +187,10 @@
|
||||
<p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
|
||||
{:else}
|
||||
<a href="." class="flex items-center hover:underline mb-2">
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
<Avatar
|
||||
className="w-6 h-6"
|
||||
src={lesson.profile.avatar_url}
|
||||
name="Avatar placeholder"
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-sm">
|
||||
{lesson.profile.fullname}
|
||||
@@ -231,7 +230,7 @@
|
||||
<div class="flex">
|
||||
<Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
|
||||
<a
|
||||
class="text-sm ml-2 text-blue-600"
|
||||
class="text-sm ml-2 text-primary-600"
|
||||
href={lesson.call_url || '#'}
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
@@ -158,13 +158,13 @@
|
||||
class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
|
||||
>
|
||||
<StructuredListRow head class="mx-7">
|
||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Name</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Role</StructuredListCell
|
||||
>
|
||||
<StructuredListCell head class="text-blue-700 py-3 dark:text-white"
|
||||
<StructuredListCell head class="text-primary-700 py-3 dark:text-white"
|
||||
>Action</StructuredListCell
|
||||
>
|
||||
<RoleBasedSecurity allowedRoles={[1, 2]}>
|
||||
@@ -192,7 +192,7 @@
|
||||
<p class="dark:text-white text-base font-normal">
|
||||
{person.profile.fullname}
|
||||
</p>
|
||||
<p class="text-xs text-blue-600">
|
||||
<p class="text-xs text-primary-600">
|
||||
{getEmail(person)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -210,12 +210,12 @@
|
||||
<div class="flex items-center w-2/4 absolute bottom-3">
|
||||
<TextChip
|
||||
value={person.email.substring(0, 2).toUpperCase()}
|
||||
className="bg-blue-200 text-black font-semibold text-xs mr-3"
|
||||
className="bg-primary-200 text-black font-semibold text-xs mr-3"
|
||||
shape="rounded-full"
|
||||
/>
|
||||
<a
|
||||
href="mailto:{person.email}"
|
||||
class="text-md text-blue-600 mr-2 dark:text-white"
|
||||
class="text-md text-primary-600 mr-2 dark:text-white"
|
||||
>
|
||||
{person.email}
|
||||
</a>
|
||||
|
||||
@@ -286,7 +286,7 @@
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
class="text-blue-700 text-md font-bold"
|
||||
class="text-primary-700 text-md font-bold"
|
||||
href="{$page.url.pathname}?submissionId={item.id}"
|
||||
>
|
||||
{item.exercise.title}
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
on:click={() => {
|
||||
@@ -150,7 +150,7 @@
|
||||
</Datepicker>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="header text-lg font-bold text-blue-700 flex px-5 items-center">
|
||||
<div class="header text-lg font-bold text-primary-700 flex px-5 items-center">
|
||||
{formatDate($store?.selected)}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -174,14 +174,14 @@
|
||||
{/if}
|
||||
</a>
|
||||
<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}">
|
||||
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
|
||||
{` ${lessonData.course_title}`}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{#if lessonData.is_unlocked}
|
||||
<a
|
||||
class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
||||
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
||||
target="_blank"
|
||||
|
||||
@@ -27,12 +27,9 @@
|
||||
|
||||
try {
|
||||
loading = true;
|
||||
const { data, error } = await supabase.auth.resetPasswordForEmail(
|
||||
fields.email,
|
||||
{
|
||||
redirectTo: window.location.origin + ROUTE.RESET,
|
||||
}
|
||||
);
|
||||
const { data, error } = await supabase.auth.resetPasswordForEmail(fields.email, {
|
||||
redirectTo: window.location.origin + ROUTE.RESET
|
||||
});
|
||||
console.log('data', data);
|
||||
if (error) throw error;
|
||||
|
||||
@@ -55,10 +52,8 @@
|
||||
<EmailSentIcon />
|
||||
<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
|
||||
password.
|
||||
We have sent a confirmation email to <span class="text-primary-700">{fields.email}</span>.
|
||||
Kindly check your inbox to reset password or spam to reset your password.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -72,12 +67,8 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-4 w-full">
|
||||
<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>
|
||||
<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}
|
||||
@@ -105,7 +96,7 @@
|
||||
<PrimaryButton
|
||||
label="Cancel"
|
||||
type="button"
|
||||
className="sm:w-full w-full text-blue-700"
|
||||
className="sm:w-full w-full text-primary-700"
|
||||
variant={VARIANTS.NONE}
|
||||
onClick={() => goto(ROUTE.LOGIN)}
|
||||
/>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<PrimaryButton
|
||||
label="Start learning"
|
||||
variant={VARIANTS.CONTAINED_WHITE}
|
||||
className="bg-white text-blue-800"
|
||||
className="bg-white text-primary-800"
|
||||
onClick={() => goto('/lms/mylearning')}
|
||||
/>
|
||||
</span>
|
||||
|
||||
@@ -214,7 +214,7 @@
|
||||
</p>
|
||||
</a>
|
||||
<a
|
||||
class="text-blue-700 text-md font-bold"
|
||||
class="text-primary-700 text-md font-bold"
|
||||
href="{$page.url.pathname}?submissionId={item.id}"
|
||||
>
|
||||
{item.exercise.title}
|
||||
|
||||
@@ -71,12 +71,12 @@
|
||||
<p class="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>
|
||||
<a class="text-md text-primary-700" href="/forgot"> Forgot password? </a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4 w-full flex justify-end items-center">
|
||||
<!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
|
||||
<!-- <a href="/login" class="text-primary-700 text-sm">Create an account</a> -->
|
||||
<PrimaryButton
|
||||
label="Log In"
|
||||
type="submit"
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
let fields: OnboardingField = {
|
||||
fullname: '',
|
||||
orgName: '',
|
||||
siteName: '',
|
||||
siteName: ''
|
||||
};
|
||||
let errors: OnboardingField = {};
|
||||
let progress = 50;
|
||||
@@ -40,39 +40,39 @@
|
||||
const educatorGoals: Goal[] = [
|
||||
{
|
||||
label: 'Sell courses online',
|
||||
value: 'sell-online',
|
||||
value: 'sell-online'
|
||||
},
|
||||
{
|
||||
label: 'Teach my current students online',
|
||||
value: 'teach-online',
|
||||
value: 'teach-online'
|
||||
},
|
||||
{
|
||||
label: 'On another platform, expanding here',
|
||||
value: 'expanding-platform',
|
||||
value: 'expanding-platform'
|
||||
},
|
||||
{
|
||||
label: 'Just here to explore',
|
||||
value: 'explore',
|
||||
},
|
||||
value: 'explore'
|
||||
}
|
||||
];
|
||||
|
||||
const sources = [
|
||||
{
|
||||
label: 'Articles',
|
||||
value: 'articles',
|
||||
value: 'articles'
|
||||
},
|
||||
{
|
||||
label: 'Search engine',
|
||||
value: 'search-engine',
|
||||
value: 'search-engine'
|
||||
},
|
||||
{
|
||||
label: 'Social media',
|
||||
value: 'social-media',
|
||||
value: 'social-media'
|
||||
},
|
||||
{
|
||||
label: 'Friends and family',
|
||||
value: 'friends-family',
|
||||
},
|
||||
value: 'friends-family'
|
||||
}
|
||||
];
|
||||
|
||||
async function setMetaData() {
|
||||
@@ -121,7 +121,7 @@
|
||||
.from('organization')
|
||||
.insert({
|
||||
name: fields.orgName,
|
||||
siteName: fields.siteName,
|
||||
siteName: fields.siteName
|
||||
})
|
||||
.select();
|
||||
console.log('Create organisation', org);
|
||||
@@ -139,7 +139,7 @@
|
||||
.insert({
|
||||
organization_id: orgData.id,
|
||||
profile_id: $profile.id,
|
||||
role_id: 1,
|
||||
role_id: 1
|
||||
})
|
||||
.select();
|
||||
console.log('Create organisation member', data);
|
||||
@@ -150,10 +150,7 @@
|
||||
'Something went wrong while creating this organization. Please reload and try again';
|
||||
|
||||
// Delete organization so it can be recreated.
|
||||
await supabase
|
||||
.from('organization')
|
||||
.delete()
|
||||
.match({ siteName: fields.siteName });
|
||||
await supabase.from('organization').delete().match({ siteName: fields.siteName });
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
@@ -175,7 +172,7 @@
|
||||
.update({
|
||||
...fields,
|
||||
orgName: undefined,
|
||||
siteName: undefined,
|
||||
siteName: undefined
|
||||
})
|
||||
.match({ id: $profile.id });
|
||||
loading = false;
|
||||
@@ -205,13 +202,7 @@
|
||||
<!-- Header With Logo -->
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex items-center w-full justify-center mb-4">
|
||||
<img
|
||||
src="/logo-192.png"
|
||||
alt="ClassroomIO logo"
|
||||
height="50"
|
||||
width="50"
|
||||
data-atf="1"
|
||||
/>
|
||||
<img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
|
||||
<h4 class="dark:text-white text-xl">ClassroomIO</h4>
|
||||
</div>
|
||||
|
||||
@@ -273,21 +264,14 @@
|
||||
<div id="goal-question" class="flex items-center flex-col mb-6">
|
||||
<div class="w-10/12">
|
||||
<!-- Goal Question -->
|
||||
<div
|
||||
class="w-full flex items-start flex-col justify-between mb-10"
|
||||
>
|
||||
<label
|
||||
for="text-field"
|
||||
class="dark:text-white m-0 text-lg font-normal mb-3"
|
||||
>
|
||||
<div class="w-full flex items-start flex-col justify-between mb-10">
|
||||
<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="dark:text-white w-full inline-flex items-center mb-1 font-light"
|
||||
>
|
||||
<label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={fields.goal}
|
||||
@@ -308,18 +292,13 @@
|
||||
|
||||
<!-- Source Question -->
|
||||
<div class="w-full flex items-start flex-col justify-between">
|
||||
<label
|
||||
for="text-field"
|
||||
class="dark:text-white 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="dark:text-white w-full inline-flex items-center mb-1 font-light"
|
||||
>
|
||||
<label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
|
||||
<input
|
||||
type="radio"
|
||||
bind:group={fields.source}
|
||||
@@ -346,7 +325,7 @@
|
||||
<div class="flex justify-between items-center mt-8 w-full">
|
||||
<div class="w-24 h-2 bg-gray-300 relative">
|
||||
<span
|
||||
class="progress absolute top-0 left-0 bg-blue-700 h-full"
|
||||
class="progress absolute top-0 left-0 bg-primary-700 h-full"
|
||||
style="width: {progress}%;"
|
||||
/>
|
||||
</div>
|
||||
@@ -356,7 +335,7 @@
|
||||
<PrimaryButton
|
||||
label="Back"
|
||||
variant={VARIANTS.NONE}
|
||||
className="py-3 px-6 mr-2 text-blue-700"
|
||||
className="py-3 px-6 mr-2 text-primary-700"
|
||||
onClick={() => (step = step - 1)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -222,7 +222,7 @@
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
on:click={() => {
|
||||
@@ -258,14 +258,14 @@
|
||||
{/if}
|
||||
</a>
|
||||
<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}">
|
||||
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
|
||||
{` ${lessonData.course_title}`}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{#if lessonData.is_unlocked}
|
||||
<a
|
||||
class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
|
||||
'opacity-50 pointer-events-none cursor-not-allowed'}"
|
||||
href={!!lessonData.call_url ? lessonData.call_url : undefined}
|
||||
target="_blank"
|
||||
|
||||
@@ -351,7 +351,7 @@
|
||||
{#each allThemes as _theme}
|
||||
<div
|
||||
class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
|
||||
_theme.id && 'border-blue-700'}"
|
||||
_theme.id && 'border-primary-700'}"
|
||||
>
|
||||
{#if $quizStore.theme === _theme.id}
|
||||
<CheckmarkFilledIcon
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
|
||||
<section class="w-full max-w-6xl mx-auto">
|
||||
<div class="py-10 px-5">
|
||||
<a
|
||||
class="text-gray-500 dark:text-white text-md"
|
||||
href={`${$currentOrgPath}/settings`}>Back to Settings</a
|
||||
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
|
||||
>Back to Settings</a
|
||||
>
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
|
||||
<section class="w-full max-w-6xl mx-auto">
|
||||
<div class="py-10 px-5">
|
||||
<a
|
||||
class="text-gray-500 dark:text-white text-md"
|
||||
href={`${$currentOrgPath}/settings`}>Back to Settings</a
|
||||
<a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
|
||||
>Back to Settings</a
|
||||
>
|
||||
<div class="flex items-center justify-between mb-10">
|
||||
<h1 class="dark:text-white text-3xl font-bold">Team members</h1>
|
||||
|
||||
@@ -118,7 +118,7 @@
|
||||
src={currentProfile.avatar_url}
|
||||
height="260"
|
||||
width="260"
|
||||
class="rounded-full bg-light-blue-100 mb-4"
|
||||
class="rounded-full bg-primary-100 mb-4"
|
||||
/> -->
|
||||
<UploadImage bind:avatar src={currentProfile.avatar_url} widthHeight="w-60 h-60" />
|
||||
|
||||
@@ -163,7 +163,7 @@
|
||||
|
||||
<div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
|
||||
<h4 class="dark:text-white m-0 font-normal">
|
||||
<a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
|
||||
<a class="text-primary-700 font-bold" href="/courses"> CitiBim </a>
|
||||
</h4>
|
||||
<p class="dark:text-white text-gray-500">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam tenetur magnam.
|
||||
@@ -183,7 +183,7 @@
|
||||
|
||||
<div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
|
||||
<h4 class="dark:text-white m-0 font-normal">
|
||||
<a class="text-blue-700 font-bold" href="/courses"> Climate Change Group </a>
|
||||
<a class="text-primary-700 font-bold" href="/courses"> Climate Change Group </a>
|
||||
</h4>
|
||||
<p class="dark:text-white text-gray-500">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi autem quo possimus
|
||||
@@ -200,7 +200,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
|
||||
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
|
||||
</div>
|
||||
<!-- {:else if loading}
|
||||
<Box>
|
||||
|
||||
+6
-3
@@ -1,12 +1,15 @@
|
||||
/** @type {import('tailwindcss').Config}*/
|
||||
const config = {
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {}
|
||||
},
|
||||
|
||||
plugins: [],
|
||||
plugins: []
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
// generic name for component
|
||||
// add theme-name dynamically on body
|
||||
// have globaly style for theme-name .bg-primary-100
|
||||
|
||||
+2
-2
@@ -3,7 +3,7 @@ export default {
|
||||
darkMode: 'class',
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {}
|
||||
},
|
||||
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
|
||||
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')]
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user