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

Improve dark mode of icons + inputs improvements

Browse Source
This commit is contained in:
Rotimi Best
2023-08-04 12:41:12 +01:00
parent 06112a73df
commit 198c88f4ac
31 changed files with 211 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Apps/components/QandA/index.svelte
+11 -18
View File
@@ -16,7 +16,7 @@
name: 'Evgeniy',
question: "I'am looking at this and it looks great",
vote: 1,
answered: false,
answered: false
},
{
id: 2,
@@ -24,22 +24,22 @@
question:
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
vote: 4,
answered: false,
answered: false
},
{
id: 3,
name: 'Vitalii Marushko',
question: 'Всем привет',
vote: 20,
answered: false,
answered: false
},
{
id: 4,
name: 'Natasha',
question: 'Привет Виталий',
vote: 0,
answered: false,
},
answered: false
}
];
function handleSend() {
@@ -54,15 +54,15 @@
name: 'You',
question,
vote: 0,
answered: false,
},
answered: false
}
];
question = null;
setTimeout(() => {
bodyRef.scrollTo({
top: bodyRef.scrollHeight,
top: bodyRef.scrollHeight
});
}, 100);
}
@@ -104,22 +104,15 @@
{@html marked(question.question)}
</article>
</div>
<button
class={`${question.answered && 'active'}`}
on:click={handleMarkAnswered(question.id)}
>
<CheckmarkOutline size={20} class="carbon-icon" />
<button class={`${question.answered && 'active'}`} on:click={handleMarkAnswered(question.id)}>
<CheckmarkOutline size={20} class="carbon-icon dark:text-white" />
</button>
</div>
{/each}
</div>
<div class="footer">
<TextField
placeholder="Say something"
bind:value={question}
onKeyDown={handleKeyDown}
/>
<TextField placeholder="Say something" bind:value={question} onKeyDown={handleKeyDown} />
</div>
<style lang="scss">
src/lib/components/Apps/index.svelte
+4 -4
View File
@@ -56,7 +56,7 @@
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
>
<SendAlt size={24} class="carbon-icon" />
<SendAlt size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
@@ -65,7 +65,7 @@
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
>
<Forum size={24} class="carbon-icon" />
<Forum size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
@@ -74,7 +74,7 @@
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
>
<AlignBoxTopLeft size={24} class="carbon-icon" />
<AlignBoxTopLeft size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
@@ -83,7 +83,7 @@
onClick={handleAppClick}
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
>
<ChartPie size={24} class="carbon-icon" />
<ChartPie size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
src/lib/components/Buttons/Close/index.svelte
+2 -2
View File
@@ -10,8 +10,8 @@
<IconButton {onClick} {color} {contained} {size}>
{#if size === 'large'}
<CloseIcon size={24} class="carbon-icon" title="Delete" />
<CloseIcon size={24} class="carbon-icon dark:text-white" title="Delete" />
{:else}
<CloseIcon size={24} class="carbon-icon" title="Delete" />
<CloseIcon size={24} class="carbon-icon dark:text-white" title="Delete" />
{/if}
</IconButton>
src/lib/components/Buttons/Delete/index.svelte
+1 -1
View File
@@ -6,5 +6,5 @@
</script>
<IconButton {onClick}>
<Close size={24} class="carbon-icon" title="Close" />
<Close size={24} class="carbon-icon dark:text-white" title="Close" />
</IconButton>
src/lib/components/Buttons/Send/index.svelte
+1 -1
View File
@@ -6,5 +6,5 @@
</script>
<IconButton {onClick}>
<SendFilled size={24} class="carbon-icon" />
<SendFilled size={24} class="carbon-icon dark:text-white" />
</IconButton>
src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
+16 -33
View File
@@ -8,7 +8,7 @@
handleRemoveQuestion,
handleCode,
handleAnswerSelect,
addDynamicValue,
addDynamicValue
} from '../store/exercise';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import AddFilledIcon from 'carbon-icons-svelte/lib/AddFilled.svelte';
@@ -30,10 +30,7 @@
import QuestionContainer from '$lib/components/QuestionContainer/index.svelte';
import DeleteConfirmationModal from './DeleteConfirmation.svelte';
import OrderModal from './OrderModal.svelte';
import {
QUESTION_TYPE,
QUESTION_TYPES,
} from '$lib/components/Question/constants';
import { QUESTION_TYPE, QUESTION_TYPES } from '$lib/components/Question/constants';
import { filterOutDeleted } from './functions';
import { deleteExercise } from '$lib/utils/services/courses';
import { lesson } from '../store/lessons';
@@ -98,9 +95,7 @@
lesson.update((_lesson) => ({
..._lesson,
exercises: _lesson.exercises.filter(
(exercise) => exercise.id !== exerciseId
),
exercises: _lesson.exercises.filter((exercise) => exercise.id !== exerciseId)
}));
shouldDelete = false;
@@ -193,10 +188,7 @@
<!-- {#key question.id} -->
<QuestionContainer
onClose={onInitDeleteClicked(question.id)}
scrollToQuestion={shouldScrollToLast(
question.id,
$questionnaire.questions
)}
scrollToQuestion={shouldScrollToLast(question.id, $questionnaire.questions)}
bind:points={question.points}
hasError={!!errors[question.id]}
onPointsChange={() => {
@@ -219,7 +211,7 @@
options={extraActions}
handleOptionClick={handleOptionClick(question.id)}
>
<AddFilledIcon class="carbon-icon" />
<AddFilledIcon class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2 text-gray-600">Add</p>
</Dropdown> -->
@@ -234,16 +226,9 @@
{#if typeof question.code === 'string'}
<div class="flex justify-between items-center my-3 w-3/5">
<TextArea
bind:value={question.code}
rows="2"
placeholder="Write your code"
/>
<IconButton
value="write-code"
onClick={() => handleCode(question.id, false)}
>
<TrashCanIcon size={24} class="carbon-icon" />
<TextArea bind:value={question.code} rows="2" placeholder="Write your code" />
<IconButton value="write-code" onClick={() => handleCode(question.id, false)}>
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{/if}
@@ -262,7 +247,7 @@
value={option.id}
onClick={handleRemoveOption(question.id, option.id)}
>
<TrashCanIcon size={24} class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
value={option.id}
@@ -270,9 +255,9 @@
buttonClassName={option.is_correct && 'success'}
>
{#if option.is_correct}
<CheckmarkFilledIcon size={24} class="carbon-icon" />
<CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<CheckmarkOutlineIcon size={24} class="carbon-icon" />
<CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</IconButton>
</div>
@@ -293,7 +278,7 @@
value={option.id}
onClick={handleRemoveOption(question.id, option.id)}
>
<TrashCanIcon size={24} class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
value={option.id}
@@ -301,9 +286,9 @@
buttonClassName={option.is_correct && 'success'}
>
{#if option.is_correct}
<CheckmarkFilledIcon size={24} class="carbon-icon" />
<CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<CheckmarkOutlineIcon size={24} class="carbon-icon" />
<CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</IconButton>
</div>
@@ -316,9 +301,7 @@
{/if}
{#if getQuestionErrorMsg(errors, question, 'option')}
<ErrorMessage
message={getQuestionErrorMsg(errors, question, 'option')}
/>
<ErrorMessage message={getQuestionErrorMsg(errors, question, 'option')} />
{/if}
</div>
@@ -330,7 +313,7 @@
variant={VARIANTS.OUTLINED}
onClick={handleAddOption(question.id)}
>
<AddFilledIcon size={24} class="carbon-icon" />
<AddFilledIcon size={24} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Add option</p>
</PrimaryButton>
</div>
src/lib/components/Course/components/Lesson/Exercise/index.svelte
+8 -8
View File
@@ -10,7 +10,7 @@
questionnaire,
validateQuestionnaire,
reset,
questionnaireOrder,
questionnaireOrder
} from '../store/exercise';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
@@ -47,7 +47,7 @@
...q,
is_title_dirty: false,
is_description_dirty: false,
questions: updatedQuestions,
questions: updatedQuestions
}));
} else {
mode = MODES.edit;
@@ -95,9 +95,9 @@
contained={true}
>
{#if preview}
<ViewFilledIcon size={32} class="carbon-icon" />
<ViewFilledIcon size={32} class="carbon-icon dark:text-white" />
{:else}
<ViewIcon size={32} class="carbon-icon" />
<ViewIcon size={32} class="carbon-icon dark:text-white" />
{/if}
</IconButton>
{/if}
@@ -109,26 +109,26 @@
onClick={handleAddQuestion}
toolTipProps={{ title: 'Add question', direction: 'bottom' }}
>
<AddAltIcon size={32} class="carbon-icon" />
<AddAltIcon size={32} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
onClick={() => ($questionnaireOrder.open = true)}
toolTipProps={{ title: 'Order questionnaire', direction: 'bottom' }}
>
<TableIcon size={32} class="carbon-icon" />
<TableIcon size={32} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
onClick={() => (editDescription = true)}
toolTipProps={{ title: 'Edit description', direction: 'bottom' }}
>
<SettingsIcon size={32} class="carbon-icon" />
<SettingsIcon size={32} class="carbon-icon dark:text-white" />
</IconButton>
<!-- <IconButton
onClick={handleDeleteExercise}
toolTipProps={{ title: 'Delete questionnaire', direction: 'bottom' }}
>
<Delete32 class="carbon-icon" />
<Delete32 class="carbon-icon dark:text-white" />
</IconButton> -->
</div>
{/if}
src/lib/components/Course/components/Navigation/index.svelte
+4 -4
View File
@@ -155,7 +155,7 @@
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<IconButton onClick={() => ($settingsDialog.open = !$settingsDialog.open)}>
<SettingsIcon size={20} class="carbon-icon" />
<SettingsIcon size={20} class="carbon-icon dark:text-white" />
</IconButton>
</RoleBasedSecurity>
</slot:fragment>
@@ -198,11 +198,11 @@
<span>{item.title}</span>
{#if !item.is_unlocked}
<span class="text-md ml-2">
<LockedIcon class="carbon-icon" />
<LockedIcon class="carbon-icon dark:text-white" />
</span>
{:else if item.is_complete}
<span class="ml-2">
<CheckmarkFilled class="carbon-icon" />
<CheckmarkFilled class="carbon-icon dark:text-white" />
</span>
{/if}
</div>
@@ -220,7 +220,7 @@
onClick={() => goto(`${$currentOrgPath}/courses`)}
buttonClassName="mx-3"
>
<HomeIcon size={32} class="carbon-icon" />
<HomeIcon size={32} class="carbon-icon dark:text-white" />
</IconButton>
<a class="block mx-3" href={`/profile/${$profile.id}`}>
<Avatar src={$profile.avatar_url} name={$profile.username} />
src/lib/components/CourseLandingPage/components/Editor/ReviewFormEditor.svelte
+4 -14
View File
@@ -80,21 +80,11 @@
</div>
<div class="mt-8 flex justify-between items-center w-full">
<IconButton
contained={true}
value="delete"
onClick={deleteReviewData}
size="large"
>
<TrashCanIcon size={24} class="carbon-icon" />
<IconButton contained={true} value="delete" onClick={deleteReviewData} size="large">
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
<IconButton
contained={true}
value="save"
onClick={() => onExpand(review.id)}
size="large"
>
<SaveIcon size={24} class="carbon-icon" />
<IconButton contained={true} value="save" onClick={() => onExpand(review.id)} size="large">
<SaveIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
</div>
src/lib/components/CourseLandingPage/components/Editor/ReviewsForm.svelte
+10 -20
View File
@@ -34,7 +34,7 @@
avatar_url: '',
rating: 1,
created_at: new Date().getTime(),
description: '',
description: ''
};
reviews = [...reviews, _review];
reviewToExpand = _review.id;
@@ -45,26 +45,26 @@
const reviewSchema = z.object({
name: z.string().min(5, {
message: 'Name is too short, min of 5 character',
invalid_type_error: 'Must not be empty',
invalid_type_error: 'Must not be empty'
}),
avatar_url: z.string().min(6, {
message: 'Upload an image',
invalid_type_error: 'Must not be empty',
invalid_type_error: 'Must not be empty'
}),
rating: z
.number()
.min(1, {
message: 'Rating must be from 1-5',
invalid_type_error: 'Must not be empty',
invalid_type_error: 'Must not be empty'
})
.max(5, {
message: 'Rating must be from 1-5',
invalid_type_error: 'Must not be empty',
invalid_type_error: 'Must not be empty'
}),
description: z.string().min(10, {
message: 'Description is too short, min of 5 character',
invalid_type_error: 'Must not be empty',
}),
invalid_type_error: 'Must not be empty'
})
});
const { error } = reviewSchema.safeParse(review);
@@ -104,11 +104,7 @@
{#if review.id !== reviewToExpand}
<!-- the headers -->
<div class="flex w-full justify-between items-center">
<Avatar
src={review.avatar_url}
name={review.name}
className="mt-1"
/>
<Avatar src={review.avatar_url} name={review.name} className="mt-1" />
<p class="text-sm">{review.name}</p>
<IconButton
@@ -116,19 +112,13 @@
onClick={() => onExpand(review.id)}
size={$isMobile ? 'large' : 'small'}
>
<ChevronDownIcon size={16} class="carbon-icon" />
<ChevronDownIcon size={16} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{/if}
<!-- the body -->
{#if review.id === reviewToExpand}
<ReviewFormEditor
bind:reviews
bind:review
{errors}
courseId={course.id}
{onExpand}
/>
<ReviewFormEditor bind:reviews bind:review {errors} courseId={course.id} {onExpand} />
{/if}
</div>
{/each}
src/lib/components/CourseLandingPage/components/Editor/index.svelte
+14 -19
View File
@@ -28,32 +28,32 @@
const sections = [
{
key: 1,
title: 'Header',
title: 'Header'
},
{
key: 2,
title: 'Requirement',
title: 'Requirement'
},
{
key: 3,
title: 'Description',
title: 'Description'
},
{
key: 4,
title: 'Goals',
title: 'Goals'
},
{
key: 5,
title: 'Reviews',
title: 'Reviews'
},
{
key: 6,
title: 'Instructor',
title: 'Instructor'
},
{
key: 7,
title: 'Pricing',
},
title: 'Pricing'
}
];
let selectedSection = null;
@@ -75,7 +75,7 @@
if (sectionEl) {
sectionEl.scrollIntoView({
behavior: 'smooth',
block: 'start',
block: 'start'
});
}
}
@@ -91,7 +91,7 @@
attendance: undefined,
group: undefined,
lessons: undefined,
slug: course.slug,
slug: course.slug
});
loading = false;
@@ -109,7 +109,7 @@
async function handlePublish() {
loading = true;
await updateCourse(courseId, undefined, {
is_published: true,
is_published: true
});
loading = false;
}
@@ -129,14 +129,9 @@
onClick={handleSave}
isLoading={loading}
/>
<PrimaryButton
label="Publish"
type="button"
onClick={handlePublish}
isDisabled={loading}
/>
<PrimaryButton label="Publish" type="button" onClick={handlePublish} isDisabled={loading} />
<IconButton onClick={handlePreview} disabled={loading || !course.slug}>
<ArrowUpRightIcon size={24} class="carbon-icon" title="Preview" />
<ArrowUpRightIcon size={24} class="carbon-icon dark:text-white" title="Preview" />
</IconButton>
</div>
</div>
@@ -156,7 +151,7 @@
<!-- Title -->
<div class="flex items-center {borderBottomGrey} w-full">
<IconButton onClick={handleClose}>
<ArrowLeftIcon size={24} class="carbon-icon" title="Go back" />
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" title="Go back" />
</IconButton>
<h3 class="dark:text-white">{selectedSection.title}</h3>
</div>
src/lib/components/Courses/components/Card/index.svelte
+6 -18
View File
@@ -33,8 +33,8 @@
$copyCourseModal.open = true;
$copyCourseModal.title = `Copy of ${title}`;
})();
},
},
}
}
// {
// label: 'Delete',
// onClick() {
@@ -45,22 +45,14 @@
}
</script>
<a
rel="prefetch"
href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`}
class=" text-black"
>
<a rel="prefetch" href={isOnLandingPage ? `/course/${slug}` : `/courses/${id}`} class=" text-black">
<div
class="root w-80 border bg-gray-100 dark:bg-gray-700 sm:mr-4 mb-4 rounded-md hover:shadow-2xl transition ease-in-out relative"
>
{#if !isOnLandingPage}
<Dropdown
options={getOptions()}
classNames="absolute top-4 right-4"
isIcon={true}
>
<Dropdown options={getOptions()} classNames="absolute top-4 right-4" isIcon={true}>
<div class="p-1 rounded-full bg-white dark:bg-gray-600">
<OverflowMenuHorizontalIcon size={20} class="carbon-icon" />
<OverflowMenuHorizontalIcon size={20} class="carbon-icon dark:text-white" />
</div>
</Dropdown>
{/if}
@@ -85,11 +77,7 @@
{#if isOnLandingPage}
<ArrowRight size={24} class="carbon-class" />
{:else}
<div
class="rounded dark:text-white bg-{isPublished
? 'green'
: 'red'}-200 py-1 px-2"
>
<div class="rounded dark:text-white bg-{isPublished ? 'green' : 'red'}-200 py-1 px-2">
{#if isPublished}
Published
{:else}
src/lib/components/Expandable/index.svelte
+5 -10
View File
@@ -22,8 +22,7 @@
<div {id} class="w-full bg-white dark:bg-gray-800 {rootClass}">
<div
class="w-full relative flex items-center justify-between {!disableContainerPadding &&
'p-5'}"
class="w-full relative flex items-center justify-between {!disableContainerPadding && 'p-5'}"
role="button"
tabindex="0"
on:click={handleClick}
@@ -31,20 +30,16 @@
<p class="dark:text-white font-bold flex items-center {titleClass}">
{title}
{#if supportsLink}
<a
class="ml-2"
href="{$page.url.pathname}#{id}"
on:click={(e) => e.stopPropagation()}
>
<LinkIcon size={24} class="carbon-icon" />
<a class="ml-2" href="{$page.url.pathname}#{id}" on:click={(e) => e.stopPropagation()}>
<LinkIcon size={24} class="carbon-icon dark:text-white" />
</a>
{/if}
</p>
{#if isExpanded}
<ChevronUpIcon size={24} class="carbon-icon" />
<ChevronUpIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<ChevronDownIcon size={24} class="carbon-icon" />
<ChevronDownIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</div>
{#if isExpanded}
src/lib/components/Form/Checkbox.svelte
+11 -7
View File
@@ -1,4 +1,6 @@
<script>
import TextField from '$lib/components/Form/TextField.svelte';
export let label;
export let value;
export let checked;
@@ -23,13 +25,15 @@
bind:checked
/>
{#if isEditable}
<input
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
type="text"
placeholder="Your option"
bind:value={label}
on:change={onChange}
/>
<div class="w-2/4">
<TextField
bind:value={label}
placeholder="Your option"
className="ml-1"
type="text"
{onChange}
/>
</div>
{:else}
<span class="dark:text-white ml-2">{label}</span>
{/if}
src/lib/components/Form/RadioItem.svelte
+10 -7
View File
@@ -1,4 +1,5 @@
<script>
import TextField from '$lib/components/Form/TextField.svelte';
export let label = '';
export let value = '';
export let checked = false;
@@ -23,13 +24,15 @@
disabled={disabled || isEditable}
/>
{#if isEditable}
<input
class="form-input p-2 mt-1 ml-1 block w-2/4 bg-gray-100 dark:bg-gray-700 border-t-0 border-l-0 border-r-0 border-b-1"
type="text"
placeholder="Your option"
bind:value={label}
on:change={onChange}
/>
<div class="w-2/4">
<TextField
bind:value={label}
placeholder="Your option"
className="ml-1"
type="text"
{onChange}
/>
</div>
{:else}
<span class="dark:text-white ml-2">{label}</span>
{/if}
src/lib/components/Form/TextArea.svelte
+6 -25
View File
@@ -6,7 +6,7 @@
export let maxRows = 3;
export let className = '';
export let labelClassName = '';
export let bgColor = 'bg-gray-200 dark:bg-gray-500';
export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
export let helperMessage = '';
export let errorMessage = '';
export let isRequired = false;
@@ -18,7 +18,7 @@
<label class="block w-full relative {className}">
{#if label}
<p for="text-field" class="dark:text-white {labelClassName}">
<p for="text-field" class="dark:text-white text-left {labelClassName}">
{label}
{#if isRequired}
@@ -38,10 +38,8 @@
{placeholder}
bind:value
required={isRequired}
class="form-textarea mt-1 block w-full
{bgColor} border-t-0 border-l-0 border-r-0 border-b-1 {!!errorMessage
? 'border-red-500'
: 'border-gray-300'}"
class="form-textarea 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
{bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
on:change={onChange}
/>
{#if !!errorMessage}
@@ -57,24 +55,7 @@
</label>
<style>
/* pre,
textarea {
font-family: inherit;
padding: 0.5em;
box-sizing: border-box;
border: 1px solid #eee;
line-height: 1.2;
overflow: hidden;
} */
/* textarea {
position: absolute;
width: 100%;
height: 100%;
top: 0;
resize: none;
.form-textarea {
box-shadow: none !important;
}
textarea.has-label {
top: 30px;
} */
</style>
src/lib/components/Form/TextField.svelte
+9 -8
View File
@@ -11,7 +11,7 @@
export let className = '';
export let inputClassName = '';
export let labelClassName = '';
export let bgColor = 'bg-gray-200';
export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
export let type = 'text';
export let isPassword = false;
export let autoFocus = false;
@@ -27,6 +27,7 @@
let ref;
let fieldNode;
let focusClass = '';
function typeAction(node) {
node.type = type;
@@ -56,21 +57,18 @@
<label class="block relative {className}">
{#if label}
<label
for="text-field"
class="dark:text-white m-0 font-light {labelClassName}"
>
<p for="text-field" class="text-sm dark:text-white text-left m-0 font-light {labelClassName}">
{label}
{#if isRequired}
<span class="text-red-700">*</span>
{/if}
</label>
</p>
{/if}
<input
use:typeAction
class="form-input {inputClassName} dark:text-black p-3 mt-1 block w-full border-none {bgColor} {errorMessage
? 'border-red-500'
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
? 'border-red-600'
: ''}"
on:keydown={onKeyDown}
on:change={onInputChange}
@@ -102,6 +100,9 @@
</label>
<style>
.form-input {
box-shadow: none !important;
}
.password-eye {
position: absolute;
top: 23px;
src/lib/components/LMS/SideBar.svelte
+3 -11
View File
@@ -37,10 +37,7 @@
height="h-7"
/>
{:else}
<TextChip
value={$currentOrg.shortName}
className="bg-blue-200 font-bold"
/>
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
{/if}
<OrgSelector />
@@ -87,7 +84,7 @@
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
>
<HelpIcon size={20} class="carbon-icon" />
<HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
@@ -98,12 +95,7 @@
`/lms/settings`
) && activeClass}"
>
<Avatar
src={$profile.avatar_url}
name={$profile.username}
width="w-7"
height="h-7"
/>
<Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
<p class="dark:text-white ml-2">Settings</p>
</li>
</a>
src/lib/components/Navigation/index.svelte
+4 -11
View File
@@ -13,9 +13,7 @@
let navClass = '';
const redirect = isCoursePage($page.url.pathname)
? `?redirect=${$page.url.pathname}`
: '';
const redirect = isCoursePage($page.url.pathname) ? `?redirect=${$page.url.pathname}` : '';
$: navClass = '';
</script>
@@ -25,12 +23,7 @@
>
<ul class="flex w-full items-center">
<div class="logo">
<a
href="/"
title={`Go to ${orgName || 'ClassroomIO'} Home`}
id="logo"
data-hveid="8"
>
<a href="/" title={`Go to ${orgName || 'ClassroomIO'} Home`} id="logo" data-hveid="8">
<img
src={logo || '/logo-192.png'}
alt={`${orgName || 'ClassroomIO'} logo`}
@@ -107,8 +100,8 @@
data-file-width="25"
data-file-height="25"
/>
<span><SendAlt32 class="carbon-icon" /> Канал</span>
<SendAlt32 class="carbon-icon" />
<span><SendAlt32 class="carbon-icon dark:text-white" /> Канал</span>
<SendAlt32 class="carbon-icon dark:text-white" />
<span>Канал</span>
</a>
</li> -->
src/lib/components/Org/Quiz/Play/Preview.svelte
+2 -2
View File
@@ -80,11 +80,11 @@
<div class="flex justify-center items-center">
<IconButton onClick={handlePrev} size="small">
<ChevronLeftIcon size={16} class="carbon-icon" />
<ChevronLeftIcon size={16} class="carbon-icon dark:text-white" />
</IconButton>
<p class="mx-3">{curQId + 1} / {totalQ}</p>
<IconButton onClick={handleNext} size="small">
<ChevronRightIcon size={16} class="carbon-icon" />
<ChevronRightIcon size={16} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{/if}
src/lib/components/Org/Quiz/QuizQuestion.svelte
+4 -5
View File
@@ -6,7 +6,7 @@
import IconButton from '$lib/components/IconButton/index.svelte';
export let currentQuestion = {
label: '',
label: ''
};
export let currentError = {};
export let optionHasError = () => false;
@@ -41,8 +41,7 @@
bgColor="bg-white"
className="mt-3"
isDisabled={currentQuestion.type === 'boolean'}
errorMessage={optionHasError(option.id, currentError.options) &&
'Please enter a label'}
errorMessage={optionHasError(option.id, currentError.options) && 'Please enter a label'}
/>
<div class="flex justify-end absolute top-2 right-2">
<IconButton
@@ -51,9 +50,9 @@
buttonClassName={option.isCorrect && 'success'}
>
{#if option.isCorrect}
<CheckmarkFilledIcon size={24} class="carbon-icon" />
<CheckmarkFilledIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<CheckmarkOutlineIcon size={24} class="carbon-icon" />
<CheckmarkOutlineIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</IconButton>
</div>
src/lib/components/Org/SideBar.svelte
+11 -22
View File
@@ -19,19 +19,19 @@
const menuItems = [
{
path: '',
label: 'Home',
label: 'Home'
},
{
path: '/quiz',
label: 'Quizzes',
label: 'Quizzes'
},
{
path: '/courses',
label: 'Courses',
label: 'Courses'
},
{
path: '/community',
label: 'Community',
label: 'Community'
},
// {
// path: '/site',
@@ -39,8 +39,8 @@
// },
{
path: '/audience',
label: 'Audience',
},
label: 'Audience'
}
];
function isActive(pagePath, itemPath) {
@@ -67,20 +67,14 @@
height="h-7"
/>
{:else if $currentOrg.shortName}
<TextChip
value={$currentOrg.shortName}
className="bg-blue-200 font-bold"
/>
<TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
{/if}
<OrgSelector />
<ul class="my-5">
{#each menuItems as menuItem}
<a
href="{$currentOrgPath}{menuItem.path}"
class="text-black no-underline"
>
<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-500 {isActive(
$page.url.pathname,
@@ -94,7 +88,7 @@
{:else if menuItem.path === '/site'}
<SiteSettingsIcon />
{:else if menuItem.path === '/community'}
<ForumIcon size={20} class="carbon-icon" />
<ForumIcon size={20} class="carbon-icon dark:text-white" />
{:else if menuItem.path === '/quiz'}
<QuizIcon />
{:else if menuItem.path === '/audience'}
@@ -112,7 +106,7 @@
<li
class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
>
<HelpIcon size={20} class="carbon-icon" />
<HelpIcon size={20} class="carbon-icon dark:text-white" />
<p class="dark:text-white ml-2">Help</p>
</li>
</a>
@@ -123,12 +117,7 @@
`${$currentOrgPath}/settings`
) && activeClass}"
>
<Avatar
src={$profile.avatar_url}
name={$profile.username}
width="w-7"
height="h-7"
/>
<Avatar src={$profile.avatar_url} name={$profile.username} width="w-7" height="h-7" />
<p class="dark:text-white ml-2">Settings</p>
</li>
</a>
src/lib/components/Snackbar/index.svelte
+4 -4
View File
@@ -18,7 +18,7 @@
snackbarStore.update((_s) => ({
..._s,
...snackbarStoreInitialState,
...snackbarStoreInitialState
}));
clearTimeout(timeoutId);
timeoutId = null;
@@ -50,11 +50,11 @@
>
<div class="flex items-center">
{#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
<CheckmarkOutline24 size={24} class="carbon-icon" />
<CheckmarkOutline24 size={24} class="carbon-icon dark:text-white" />
{:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
<WarningIcon size={24} class="carbon-icon" />
<WarningIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<InformationIcon size={24} class="carbon-icon" />
<InformationIcon size={24} class="carbon-icon dark:text-white" />
{/if}
<p class="dark:text-white ml-2 text-lg">{$snackbarStore.message}</p>
</div>
src/routes/+page.svelte
+9 -13
View File
@@ -17,18 +17,18 @@
{
title: 'Access',
description:
'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform',
'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform'
},
{
title: 'Analytics',
description:
'Avoid assumptions, better understand the needs of your classrooms and give students a personlized experience',
'Avoid assumptions, better understand the needs of your classrooms and give students a personlized experience'
},
{
title: 'Automation',
description:
'Lesson reminders, deadline reminders and many other automated alerts to help everyone in the learning process be proactive',
},
'Lesson reminders, deadline reminders and many other automated alerts to help everyone in the learning process be proactive'
}
];
async function handleSubmit() {
@@ -72,9 +72,7 @@
<form on:submit|preventDefault={handleSubmit} class="my-4">
<div class="flex items-center flex-col sm:flex-row">
{#if success}
<p class="dark:text-white">
You have been added successfully. Thanks for joining.
</p>
<p class="dark:text-white">You have been added successfully. Thanks for joining.</p>
{:else}
<TextField
bind:value={email}
@@ -85,9 +83,7 @@
isRequired={true}
isDisabled={isAdding}
/>
<PrimaryButton type="submit" isLoading={isAdding}>
Join waiting list
</PrimaryButton>
<PrimaryButton type="submit" isLoading={isAdding}>Join waiting list</PrimaryButton>
{/if}
</div>
</form>
@@ -99,11 +95,11 @@
>
<h3 class="dark:text-white text-3xl">
{#if index === 0}
<FlowStreamReferenceIcon size={32} class="carbon-icon" />
<FlowStreamReferenceIcon size={32} class="carbon-icon dark:text-white" />
{:else if index === 1}
<ChartClusterBarIcon size={32} class="carbon-icon" />
<ChartClusterBarIcon size={32} class="carbon-icon dark:text-white" />
{:else if index === 2}
<MachineLearningModelIcon size={32} class="carbon-icon" />
<MachineLearningModelIcon size={32} class="carbon-icon dark:text-white" />
{/if}
{area.title}
</h3>
src/routes/courses/[id]/lessons/+page.svelte
+7 -7
View File
@@ -149,9 +149,9 @@
}}
>
{#if lesson.is_unlocked}
<UnlockedIcon size={24} class="carbon-icon" />
<UnlockedIcon size={24} class="carbon-icon dark:text-white" />
{:else}
<LockedIcon size={24} class="carbon-icon" />
<LockedIcon size={24} class="carbon-icon dark:text-white" />
{/if}
</IconButton>
</div>
@@ -166,11 +166,11 @@
handleSaveLesson(lesson, $course.id);
}}
>
<SaveIcon size={24} class="carbon-icon" />
<SaveIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
{:else}
<IconButton onClick={() => (lessonEditing = lesson.id)}>
<EditIcon size={24} class="carbon-icon" />
<EditIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
{/if}
</div>
@@ -239,7 +239,7 @@
on:input={(e) => (lesson.lesson_at = e.target.value)}
/>
{:else}
<TimeIcon size={24} class="carbon-icon" />
<TimeIcon size={24} class="carbon-icon dark:text-white" />
<p class="dark:text-white text-md ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
@@ -255,7 +255,7 @@
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
{:else}
<PhoneIcon size={24} class="carbon-icon" />
<PhoneIcon size={24} class="carbon-icon dark:text-white" />
<a class="text-md ml-2" href={lesson.call_url || '#'} target="_blank">
{lesson.call_url ? 'Join lesson' : 'No link'}
</a>
@@ -267,7 +267,7 @@
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="absolute bottom-2 right-0">
<IconButton onClick={handleDelete(lesson.id)}>
<TrashCanIcon size={24} class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
</div>
</RoleBasedSecurity>
src/routes/courses/[id]/people/+page.svelte
+11 -34
View File
@@ -2,11 +2,7 @@
import { onMount } from 'svelte';
import copy from 'copy-to-clipboard';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
fetchCourse,
deleteGroupMember,
updatedGroupMember,
} from '$lib/utils/services/courses';
import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
import CopyIcon from 'carbon-icons-svelte/lib/Copy.svelte';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -23,12 +19,9 @@
import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
import {
invitationModal,
deleteMemberModal,
deleteMemberModal
} from '$lib/components/Course/components/People/store';
import type {
Person,
ProfileRole,
} from '$lib/components/Course/components/People/types';
import type { Person, ProfileRole } from '$lib/components/Course/components/People/types';
import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
import { profile } from '$lib/utils/store/user';
import { snackbarStore } from '$lib/components/Snackbar/store';
@@ -51,9 +44,7 @@
// }
async function deletePerson() {
$group.people = $group.people.filter(
(person: { id: string }) => person.id !== member.id
);
$group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
await deleteGroupMember(member.id);
}
@@ -127,9 +118,7 @@
</div>
<div class="table rounded-md border border-gray-300 w-full">
<div
class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
>
<div class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3">
<span class="dark:text-white w-1/4 text-center">ID</span>
<!-- <span class="flex-grow" /> -->
<p class="dark:text-white text-lg w-2/4">Name</p>
@@ -156,14 +145,10 @@
</p>
{#if !isStudent}
<div class="absolute edit-btn">
<IconButton
onClick={() => handleEditStudentIdMode(person.id)}
>
<IconButton onClick={() => handleEditStudentIdMode(person.id)}>
<EditIcon size={16} class="carbon-icon active" />
</IconButton>
<IconButton
onClick={() => copyToClipboard(person.assigned_student_id)}
>
<IconButton onClick={() => copyToClipboard(person.assigned_student_id)}>
<CopyIcon size={16} class="carbon-icon active" />
</IconButton>
</div>
@@ -173,17 +158,11 @@
<!-- <span class="flex-grow" /> -->
{#if person.profile}
<div class="w-2/4 mx-2 flex items-center">
<Avatar
src={person.profile.avatar_url}
name={person.profile.fullname}
/>
<Avatar src={person.profile.avatar_url} name={person.profile.fullname} />
<div class="ml-2 break-all">
<p class="dark:text-white text-lg">{person.profile.fullname}</p>
{#if !isStudent}
<a
href="mailto:{person.profile.email}"
class="text-md text-blue-600"
>
<a href="mailto:{person.profile.email}" class="text-md text-blue-600">
{person.profile.email}
</a>
{/if}
@@ -191,9 +170,7 @@
</div>
{:else}
<div class="break-all w-2/4 mx-2">
<p
class="bg-yellow-500 pending text-sm text-center rounded-xl text-white"
>
<p class="bg-yellow-500 pending text-sm text-center rounded-xl text-white">
Pending Invite
</p>
<a href="mailto:{person.email}" class="text-md text-blue-600">
@@ -215,7 +192,7 @@
$deleteMemberModal.open = true;
}}
>
<TrashCanIcon size={24} class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon dark:text-white" />
</IconButton>
{/if}
</div>
src/routes/dashboard/+page.svelte
+1 -1
View File
@@ -167,7 +167,7 @@
{lessonData.lesson_title}
{#if lessonData.is_unlocked}
<span class="ml-2 success">
<CheckmarkFilledIcon size={20} class="carbon-icon" />
<CheckmarkFilledIcon size={20} class="carbon-icon dark:text-white" />
</span>
{:else}
<span class="text-md ml-2">🔒</span>
src/routes/org/[slug]/+page.svelte
+2 -2
View File
@@ -251,10 +251,10 @@
{lessonData.lesson_title}
{#if lessonData.is_unlocked}
<span class="ml-2 success">
<LockedIcon class="carbon-icon" />
<LockedIcon class="carbon-icon dark:text-white" />
</span>
{:else}
<UnlockedIcon class="carbon-icon" />
<UnlockedIcon class="carbon-icon dark:text-white" />
{/if}
</a>
<p class="dark:text-white text-grey text-sm flex items-center">
src/routes/org/[slug]/community/[slug]/+page.svelte
+15 -27
View File
@@ -18,7 +18,7 @@
import { supabase } from '$lib/utils/functions/supabase';
import {
askCommunityValidation,
commentInCommunityValidation,
commentInCommunityValidation
} from '$lib/utils/functions/validator';
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { snackbarStore } from '$lib/components/Snackbar/store';
@@ -39,11 +39,11 @@
let isEditMode = false;
let deleteComment = {
shouldDelete: false,
commentId: null,
commentId: null
};
let editContent = {
title: '',
body: '',
body: ''
};
function mapResToQuestion(data) {
@@ -54,7 +54,7 @@
author: {
id: data?.author?.profile?.id || '',
name: data?.author?.profile?.fullname || '',
avatar: data?.author?.profile?.avatar_url || '',
avatar: data?.author?.profile?.avatar_url || ''
},
body: data.body,
createdAt: dayjs(data.created_at).fromNow(true),
@@ -65,9 +65,9 @@
avatar: c.author?.profile?.avatar_url || '',
votes: c.votes,
comment: c.body,
createdAt: dayjs(c.created_at).fromNow(true),
createdAt: dayjs(c.created_at).fromNow(true)
})),
totalComments: 0,
totalComments: 0
};
}
@@ -124,7 +124,7 @@
body: comment,
question_id: question.id,
author_id: $currentOrg.memberId,
votes: 0,
votes: 0
})
.select();
@@ -151,8 +151,8 @@
avatar: $profile?.avatar_url || '',
votes: 0,
comment: _c.body,
createdAt: dayjs(_c.created_at).fromNow(true),
},
createdAt: dayjs(_c.created_at).fromNow(true)
}
];
// Reset input
@@ -183,10 +183,7 @@
return c;
});
}
const { error } = await supabase
.from(table)
.update({ votes })
.match({ id: matchId });
const { error } = await supabase.from(table).update({ votes }).match({ id: matchId });
if (error) {
console.error('Error: upvoteQuestion', error);
$snackbarStore.open = true;
@@ -251,9 +248,7 @@
.match({ id: deleteComment.commentId });
if (!error) {
question.comments = question.comments.filter(
(c) => c.id !== deleteComment.commentId
);
question.comments = question.comments.filter((c) => c.id !== deleteComment.commentId);
deleteComment.shouldDelete = false;
deleteComment.commentId = null;
@@ -288,7 +283,7 @@
class="text-gray-500 dark:text-white text-md flex items-center"
href={`${$currentOrgPath}/community`}
>
<ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
</a>
<div class="my-5 flex justify-between items-center">
{#if isEditMode}
@@ -329,9 +324,7 @@
</div>
<div class="my-1 px-1 rounded-lg border border-1 border-gray">
<header class="flex items-center justify-between leading-none p-2">
<div
class="flex items-center no-underline hover:underline text-black"
>
<div class="flex items-center no-underline hover:underline text-black">
<Avatar
src={question.author.avatar}
name={question.author.name}
@@ -375,12 +368,7 @@
<div class="w-full rounded-lg border border-1 border-gray">
<header class="flex items-center justify-between leading-none p-2">
<div class="flex items-center text-black">
<Avatar
src={comment.avatar}
name={comment.name}
width="w-7"
height="h-7"
/>
<Avatar src={comment.avatar} name={comment.name} width="w-7" height="h-7" />
<p class="dark:text-white ml-2 text-sm">{comment.name}</p>
<p class="dark:text-white ml-2 text-sm text-gray-500">
{comment.createdAt}
@@ -399,7 +387,7 @@
deleteComment.commentId = comment.id;
}}
>
<TrashCanIcon size={16} class="carbon-icon" />
<TrashCanIcon size={16} class="carbon-icon dark:text-white" />
</IconButton>
{/if}
</header>
src/routes/org/[slug]/community/ask/+page.svelte
+3 -3
View File
@@ -13,7 +13,7 @@
let errors = {};
let fields = {
title: '',
body: '',
body: ''
};
async function handleSave() {
@@ -31,7 +31,7 @@
organization_id: $currentOrg.id,
author_id: $currentOrg.memberId,
votes: 0,
slug: generateSlug(fields.title),
slug: generateSlug(fields.title)
})
.select();
@@ -61,7 +61,7 @@
class="text-gray-500 dark:text-white text-md flex items-center"
href={`${$currentOrgPath}/community`}
>
<ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Go Back
</a>
<div class="flex items-center justify-between">
<h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>
src/routes/org/[slug]/quiz/[slug]/+page.svelte
+13 -29
View File
@@ -11,12 +11,7 @@
import { currentOrgPath, deleteModal } from '$lib/utils/store/org';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import {
themeImages,
allOptions,
booleanOptions,
allThemes,
} from '$lib/utils/constants/quiz';
import { themeImages, allOptions, booleanOptions, allThemes } from '$lib/utils/constants/quiz';
import { quizStore, quizesStore } from '$lib/utils/store/org';
import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
import Preview from '$lib/components/Org/Quiz/Play/Preview.svelte';
@@ -30,7 +25,7 @@
// Questionnaire State
let currentQuestion = $quizStore.questions[0] || {
options: [],
options: []
};
// Behavioural State
@@ -55,16 +50,14 @@
id: new Date().getTime(),
label: '',
type: 'multichoice',
options: [],
},
options: []
}
];
type = 'multichoice';
}
function addOption() {
const cOptIds = currentQuestion.options.map((o) => o.id);
const nextOption = cloneDeep(allOptions).find(
(o) => !cOptIds.includes(o.id)
);
const nextOption = cloneDeep(allOptions).find((o) => !cOptIds.includes(o.id));
if (!nextOption) return;
@@ -91,9 +84,7 @@
function deleteQuestion() {
// Only leave one question
if ($quizStore.questions.length === 1) return;
$quizStore.questions = $quizStore.questions.filter(
(q) => q.id !== currentQuestion.id
);
$quizStore.questions = $quizStore.questions.filter((q) => q.id !== currentQuestion.id);
currentQuestion = $quizStore.questions[0];
}
@@ -115,7 +106,7 @@
if (valLabelError) {
options.push({
id: o.id,
error: true,
error: true
});
}
@@ -128,7 +119,7 @@
isLabelEmpty: labelError,
hasOneAnswer,
id: q.id,
options,
options
});
});
@@ -149,7 +140,7 @@
.from('quiz')
.update({
...$quizStore,
updated_at: new Date(),
updated_at: new Date()
})
.match({ id: quizId });
@@ -170,8 +161,7 @@
function qHasError(qId, _errs) {
return _errs.some((qe) => {
return (
(qId ? qe.id === qId : true) &&
(qe.isLabelEmpty || !qe.hasOneAnswer || !!qe.options.length)
(qId ? qe.id === qId : true) && (qe.isLabelEmpty || !qe.hasOneAnswer || !!qe.options.length)
);
});
}
@@ -212,7 +202,7 @@
class="text-gray-500 dark:text-white text-md flex items-center"
href={`${$currentOrgPath}/quiz`}
>
<ArrowLeftIcon size={24} class="carbon-icon" /> Back to Quizzes
<ArrowLeftIcon size={24} class="carbon-icon dark:text-white" /> Back to Quizzes
</a>
<h3 class="my-3">Quiz</h3>
@@ -239,11 +229,7 @@
</div>
<div class="w-full flex justify-end">
<PrimaryButton
label="Add Question"
variant={VARIANTS.CONTAINED}
onClick={addQuestion}
/>
<PrimaryButton label="Add Question" variant={VARIANTS.CONTAINED} onClick={addQuestion} />
</div>
</div>
</aside>
@@ -261,9 +247,7 @@
{#if isBoolean(currentError.hasOneAnswer) && !currentError.hasOneAnswer}
<div class="mb-5">
<p class="text-red-500">
Please select at least one correct answer
</p>
<p class="text-red-500">Please select at least one correct answer</p>
</div>
{/if}