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/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>