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

CLASSROOMIO-T-127: Theming configuration

Browse Source 
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:
Rotimi Best
2023-08-20 19:08:48 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 910d9c50a9
commit f39a0cee4b
75 changed files with 709 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Apps/components/Poll/components/Avatar.svelte
+1 -5
View File
@@ -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}" />
src/lib/components/Apps/components/Poll/components/Poll.svelte
+10 -23
View File
@@ -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>
src/lib/components/AuthUI/index.svelte
+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}
src/lib/components/Avatar/index.svelte
+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" />
src/lib/components/Buttons/Close/index.svelte
+2 -2
View File
@@ -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" -->
src/lib/components/ComingSoon/index.svelte
+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>
src/lib/components/Course/components/Ceritficate/Reports.svelte
+8 -14
View File
@@ -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>
src/lib/components/Course/components/Ceritficate/certificates/Professional.svelte
+5 -3
View File
@@ -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>
src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
+2 -4
View File
@@ -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();
src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
+2 -2
View File
@@ -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)}
/>
src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+8 -24
View File
@@ -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>
src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
+5 -7
View File
@@ -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" />
src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
+1 -1
View File
@@ -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>
src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
+1 -1
View File
@@ -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}
src/lib/components/Course/components/Navigation/index.svelte
+2 -2
View File
@@ -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;
src/lib/components/Course/components/Settings/index.svelte
+2 -2
View File
@@ -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)}
/>
src/lib/components/CourseLandingPage/index.svelte
+8 -5
View File
@@ -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>
src/lib/components/Dropdown/index.svelte
+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;
src/lib/components/EditContent/index.svelte
+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
src/lib/components/Email/EmailTemplate.svelte
+2 -1
View File
@@ -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>
src/lib/components/Footer/index.svelte
+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>
src/lib/components/Form/TextArea.svelte
+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}
/>
src/lib/components/Form/TextField.svelte
+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}
src/lib/components/HashTags/index.svelte
+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>
src/lib/components/Icons/SiteSettingsIcon.svelte
+1 -1
View File
@@ -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"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

src/lib/components/LMS/SideBar.svelte
+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}"
src/lib/components/LMS/components/Student.svelte
+1 -1
View File
@@ -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 }}
>
src/lib/components/MarkdownEditor/index.svelte
+1 -1
View File
@@ -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) => {
src/lib/components/Navigation/app.svelte
+5 -18
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}
@@ -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;
src/lib/components/Navigation/lms.svelte
+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}
src/lib/components/Org/Community/DeleteCommentModal.svelte
+3 -10
View File
@@ -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}
/>
src/lib/components/Org/LandingPage/index.svelte
+10 -10
View File
@@ -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>
src/lib/components/Org/Quiz/DeleteModal.svelte
+3 -6
View File
@@ -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) {
src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte
+3 -3
View File
@@ -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>
src/lib/components/Org/Settings/OrgSettings.svelte
+84 -30
View File
@@ -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')}
/>
src/lib/components/Org/Settings/Profile.svelte
+1 -1
View File
@@ -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>
src/lib/components/Org/SideBar.svelte
+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}"
src/lib/components/OrgSelector/OrgSelectorItem.svelte
+3 -4
View File
@@ -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}
src/lib/components/PageBody/index.svelte
+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 = '';
src/lib/components/PrimaryButton/constants.js
+5 -4
View File
@@ -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',
src/lib/components/PrimaryButton/index.svelte
+1 -1
View File
@@ -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'
src/lib/components/PrimaryContainedButton/index.svelte
+1 -1
View File
@@ -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}
>
src/lib/components/Progress/index.svelte
+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>
src/lib/components/QuestionContainer/index.svelte
+3 -3
View File
@@ -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}
src/lib/components/Snackbar/constants.js
+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'
};
src/lib/components/Tabs/index.svelte
+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'}"
src/lib/components/UploadImage/index.svelte
+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();
}}
src/lib/components/WelcomeModal/WelcomeModal.svelte
+7 -12
View File
@@ -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>