feat: include image cropper (#617)

* fix: include image cropper

* clean styles

* ui improvements

* bug bot feedbacks

* fix: update image upload format to PNG for consistency with cropping output

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Course/components/Lesson/LessonList.svelte

@@ -79,7 +79,7 @@
 </script>
 
 <section
-  class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
+  class="mx-auto w-full p-3 lg:w-11/12 lg:px-4"
   use:dndzone={{
     items: $lessons,
     flipDurationMs,

apps/dashboard/src/lib/components/Course/components/Lesson/LessonSectionList.svelte

@@ -178,7 +178,7 @@
 <DeleteLessonConfirmation bind:openDeleteModal {deleteLesson} />
 
 <section
-  class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
+  class="mx-auto w-full p-3 lg:w-11/12 lg:px-4"
   use:dndzone={{
     items: $lessonSections,
     flipDurationMs,

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte

@@ -2,12 +2,11 @@
   import { Skeleton } from '@cio/ui/base/skeleton';
 </script>
 
-<div class="mb-7 flex max-w-3xl flex-col gap-5 rounded-md border border-gray-300 p-4">
+<div class="mb-7 flex w-full max-w-3xl flex-col gap-3 rounded-md border border-gray-300 p-3">
   <div class="flex items-center gap-2">
     <Skeleton class="h-8 w-8 overflow-hidden rounded-full" />
     <Skeleton class="h-4 w-[30%]" />
   </div>
   <Skeleton class="h-4 w-full" />
   <Skeleton class="h-4 w-full" />
-  <Skeleton class="h-4 w-full" />
 </div>