This commit is contained in:
Rotimi Best
2023-08-20 20:43:56 +01:00
73 changed files with 699 additions and 357 deletions
+1 -1
View File
@@ -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
View File
@@ -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
View File
@@ -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:support@classroomio.com">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>
+4 -2
View File
@@ -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}
+1 -5
View File
@@ -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" -->
+1 -1
View File
@@ -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"
/>
@@ -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>
+4 -5
View File
@@ -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;
+2 -2
View File
@@ -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>
+2 -4
View File
@@ -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>
+2 -2
View File
@@ -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}
/>
+2 -2
View File
@@ -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}
+2 -3
View File
@@ -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

+4 -6
View File
@@ -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) => {
+5 -3
View File
@@ -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}
+3 -3
View File
@@ -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}
/>
@@ -151,9 +151,9 @@
>
<!-- 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>
+4 -6
View File
@@ -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 -1
View File
@@ -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}
>
+1 -1
View File
@@ -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 -3
View File
@@ -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'
};
+4 -4
View File
@@ -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'}"
+1 -1
View File
@@ -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 -1
View File
@@ -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: ''
};
+10 -3
View File
@@ -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];
}
}
+1
View File
@@ -9,6 +9,7 @@ export const currentOrg = writable({
shortName: '',
siteName: '',
avatar_url: '',
theme: '',
memberId: ''
});
export const orgAudience = writable([]);
+4 -4
View File
@@ -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:support@classroomio.com">Contact Us</a
>
</div>
+5 -2
View File
@@ -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;
}
+12 -3
View File
@@ -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;
}
+2 -2
View File
@@ -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}
+6 -7
View File
@@ -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"
>
+6 -6
View File
@@ -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}
+4 -4
View File
@@ -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"
+8 -17
View File
@@ -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)}
/>
+1 -1
View File
@@ -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>
+1 -1
View File
@@ -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}
+2 -2
View File
@@ -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"
+23 -44
View File
@@ -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}
+3 -3
View File
@@ -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>
+4 -4
View File
@@ -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>