From fea7e4778425812b14be9d8b0d1594d2bd4acea8 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Fri, 8 Mar 2024 10:06:35 +0000
Subject: [PATCH] chore: lesson card buggy behavior and refactor hero (#197)

* chore: lesson card buggy behavior and refactor hero

* update landing page hero
---
 apps/classroomio-com/src/lib/Hero/Hero.svelte | 24 ++++++-------
 .../routes/courses/[id]/lessons/+page.svelte  | 36 +++++++++----------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/apps/classroomio-com/src/lib/Hero/Hero.svelte b/apps/classroomio-com/src/lib/Hero/Hero.svelte
index 8a1fbf5b..1afc81c6 100644
--- a/apps/classroomio-com/src/lib/Hero/Hero.svelte
+++ b/apps/classroomio-com/src/lib/Hero/Hero.svelte
@@ -28,22 +28,22 @@
   });
 </script>
 
-<div class="text-center mt-[30%] md:mt-36 border-b-2 relative">
-  <div class="mb-10 flex items-center justify-center w-full">
+<div class="relative mt-[30%] border-b-2 text-center md:mt-36">
+  <div class="mb-10 flex w-full items-center justify-center">
     <a
       target="_blank"
       rel="noopener noreferrer nofollow"
       href="https://github.com/rotimi-best/classroomio"
       style="color: rgb(75, 85, 99);"
-      class="border border-gray-300 rounded-full px-4 py-1 text-sm font-medium hover:underline"
+      class="rounded-full border border-gray-300 px-4 py-1 text-sm font-medium hover:underline"
       >Give us a <span class="text-blue-700">star</span> on github</a
     >
   </div>
   <h1
-    class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 flex flex-col items-center"
+    class="mx-auto flex flex-col items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl"
   >
     <span>Launch Your Online Bootcamp</span>
-    <span class="text-blue-700 relative"
+    <span class="relative text-blue-700"
       >In Minutes
       <svg
         aria-hidden="true"
@@ -58,13 +58,13 @@
     </span>
   </h1>
 
-  <p class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-md md:text-lg text-slate-700 lg:w-2/4">
+  <p class="text-md mx-auto mt-10 px-4 text-slate-700 md:text-lg lg:mt-6 lg:w-2/4 lg:p-0">
     Meet a better collaboration tool for teachers and students. ClassroomIO is a no-code tool that
     allows you build and scale your own teaching platform with ease.
   </p>
-  <div class="mt-10 flex gap-4 items-center justify-center flex-col md:flex-row">
+  <div class="mt-10 flex flex-col items-center justify-center gap-4 md:flex-row">
     <a
-      class="font-medium lg:font-semibold text-sm md:text-md w-11/12 md:w-fit text-white px-6 py-3 lg:px-6 lg:py-5 bg-blue-700 rounded-md hover:bg-blue-800 hover:shadow-xl transition-all delay-100"
+      class="md:text-md w-11/12 rounded-md bg-blue-700 px-6 py-3 text-sm font-medium text-white transition-all delay-100 hover:bg-blue-800 hover:shadow-xl md:w-fit lg:px-6 lg:py-5 lg:font-semibold"
       href="/signup"
       rel="noopener noreferrer nofollow"
     >
@@ -100,14 +100,14 @@
       {height}
       src="./cio-hero-imac.webp"
       alt="hero section with dark vs light mode"
-      class="hidden md:block lg:block floating mx-auto rounded-lg shadow-lg"
+      class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
     />
   </div>
 
   {#if PUBLIC_ENABLE_USERS_COMPANIES}
-    <div class="px-[15%] mb-[10%]">
-      <h2 class="text-base lg:text-xl font-semibold text-gray-900">Used at</h2>
-      <div class="w-full flex flex-wrap flex-row gap-5 justify-between items-center py-[5%]">
+    <div class="mb-[10%] px-[15%]">
+      <h2 class="text-base font-semibold text-gray-900 lg:text-xl">Used at</h2>
+      <div class="flex w-full flex-row flex-wrap items-center justify-between gap-5 py-[5%]">
         <img loading="lazy" src="/hero-1.svg" alt="" class="w-[30%] lg:w-[13%]" />
         <img loading="lazy" src="/hero-2.svg" alt="" class="w-[30%] lg:w-[13%]" />
         <img loading="lazy" src="/hero-3.svg" alt="" class="w-[30%] lg:w-[13%]" />
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte b/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
index 10883b2a..c01f9e20 100644
--- a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
@@ -106,7 +106,7 @@
   <PageBody width="max-w-6xl" padding="p-0">
     {#if $lessons.length}
       <section
-        class="w-full lg:w-11/12 p-3 lg:px-4 m-auto"
+        class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
         use:dndzone={{
           items: $lessons,
           flipDurationMs,
@@ -121,7 +121,7 @@
       >
         {#each $lessons as lesson (lesson.id)}
           <div
-            class="relative m-auto max-w-xl rounded-md border-2 border-gray-200 p-5 mb-4 flex items-center dark:bg-neutral-800 dark:border-neutral-700 hover:scale-95 transition-all ease-in-out"
+            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 p-5 dark:border-neutral-700 dark:bg-neutral-800"
           >
             <!-- Number Chip -->
             <div class="mr-5">
@@ -139,12 +139,12 @@
               {#if lessonEditing === lesson.id}
                 <TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
               {:else}
-                <h3 class="dark:text-white text-lg m-0 flex items-center">
+                <h3 class="m-0 flex items-center text-lg dark:text-white">
                   <a
                     href={isStudent && !lesson.is_unlocked
                       ? $page.url.pathname
                       : '/courses/' + $course.id + '/lessons/' + lesson.id}
-                    class="dark:text-white no-underline hover:underline font-medium text-black {isStudent &&
+                    class="font-medium text-black no-underline hover:underline dark:text-white {isStudent &&
                     !lesson.is_unlocked
                       ? 'cursor-not-allowed'
                       : ''}"
@@ -156,7 +156,7 @@
 
               <!-- Lesson Educator -->
               <div
-                class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-2 w-4/5"
+                class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
               >
                 <div class="lg:mb-0">
                   {#if lessonEditing === lesson.id}
@@ -167,15 +167,15 @@
                       className="sm:my-1 w-[100%]"
                     />
                   {:else if !lesson.profile}
-                    <p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
+                    <p class="mb-3 ml-2 text-sm dark:text-white">No tutor added</p>
                   {:else}
-                    <a href="." class="flex items-center hover:underline mb-2">
+                    <a href="." class="mb-2 flex items-center hover:underline">
                       <Avatar
                         className="w-6 h-6"
                         src={lesson.profile.avatar_url}
                         name="Avatar placeholder"
                       />
-                      <p class="dark:text-white ml-2 text-sm">
+                      <p class="ml-2 text-sm dark:text-white">
                         {lesson.profile.fullname}
                       </p>
                     </a>
@@ -191,9 +191,9 @@
                       onChange={(e) => (lesson.lesson_at = e.target.value)}
                     />
                   {:else}
-                    <div class="flex mb-2">
+                    <div class="mb-2 flex">
                       <Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
-                      <p class="dark:text-white text-sm ml-2">
+                      <p class="ml-2 text-sm dark:text-white">
                         {new Date(lesson.lesson_at || '').toDateString()}
                       </p>
                     </div>
@@ -201,7 +201,7 @@
                 </div>
 
                 <!-- Lesson Call url -->
-                <div class="flex items-center mb-3 lg:mb-0">
+                <div class="mb-3 flex items-center lg:mb-0">
                   {#if lessonEditing === lesson.id}
                     <TextField
                       bind:value={lesson.call_url}
@@ -211,9 +211,9 @@
                     />
                   {:else}
                     <div class="flex">
-                      <Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
+                      <Video size={20} class="carbon-icon ml-0.5 text-gray-400 dark:text-white" />
                       <a
-                        class="text-sm ml-2 text-primary-600"
+                        class="text-primary-600 ml-2 text-sm"
                         href={lesson.call_url || '#'}
                         target="_blank"
                       >
@@ -228,7 +228,7 @@
             <!-- 3 dot edit -->
             <div class="flex flex-row">
               <RoleBasedSecurity allowedRoles={[1, 2]}>
-                <OverflowMenu flipped size="xl" class="absolute top-0 right-0">
+                <OverflowMenu size="xl" class="absolute right-0 top-0">
                   <OverflowMenuItem
                     disabled={isStudent}
                     text={lesson.is_unlocked ? 'Lock' : 'Unlock'}
@@ -268,10 +268,10 @@
       </section>
     {:else}
       <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
-        <div class="flex justify-between flex-col items-center">
-          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
-          <h2 class="text-xl my-1.5 font-normal">No lessons yet</h2>
-          <p class="text-sm text-center text-slate-500">
+        <div class="flex flex-col items-center justify-between">
+          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
+          <h2 class="my-1.5 text-xl font-normal">No lessons yet</h2>
+          <p class="text-center text-sm text-slate-500">
             Share your knowledge with the world by creating engaging lessons. Start by clicking on
             the Add button.
           </p>