Update UI

src/components/Course/CertificateView.tsx

@@ -175,10 +175,10 @@ export function CertificateView(props: CertificateViewProps) {
 
         {!isCourseCompleted && !isLoading && (
           <div className="flex flex-col items-center">
-            <h1 className="text-4xl font-semibold">Almost there!</h1>
-            <p className="mt-3 text-center text-lg text-zinc-200">
-              Complete the course to download the certificate and rate your
-              experience.
+            <h1 className="text-4xl font-semibold">Pending completion!</h1>
+            <p className="mt-3 text-center text-lg text-gray-600">
+              Please complete all the lessons and challenges in the course to
+              issue the certificate.
             </p>
           </div>
         )}

src/components/Course/Chapter.tsx

@@ -94,9 +94,9 @@ export function Chapter(props: ChapterProps) {
     <div>
       <button
         className={cn(
-          'relative z-10 flex w-full flex-row items-center gap-2 border-b px-2 py-4 text-base text-gray-600',
+          'relative z-10 flex w-full flex-row items-center gap-2 border-b px-2 py-4 text-base text-gray-600 hover:bg-gray-100',
           {
-            'text-black': isActive,
+            'text-black hover:bg-gray-50': isActive,
           },
         )}
         onClick={onChapterClick}

src/components/Course/CourseSidebar.tsx

@@ -3,6 +3,7 @@ import type { ChapterFileType, LessonFileType } from '../../lib/course';
 import { Chapter } from './Chapter';
 import { StickyNote, ChevronLeft } from 'lucide-react';
 import { ProgressPercentageSkeleton } from './CourseSkeletons';
+import { cn } from '../../lib/classname';
 
 export type CourseSidebarProps = {
   isLoading: boolean;
@@ -87,7 +88,9 @@ export function CourseSidebar(props: CourseSidebarProps) {
           })}
 
           <a
-            className="flex items-center gap-2 p-2 text-sm text-zinc-500 hover:bg-zinc-800 hover:text-white"
+            className={cn("flex items-center py-4 px-4 gap-2 text-base text-zinc-500 hover:bg-gray-200 hover:text-black", {
+              "bg-gray-200": false,
+            })}
             href={certificateUrl}
           >
             <StickyNote className="h-4 w-4 stroke-[2.5]" />

src/data/courses/sql/chapters/introduction/lessons/challenge-1.md

@@ -33,8 +33,6 @@ expectedResults:
       - [5]
 ---
 
-## Instructions
-
 Write a SQL query to find the total number of orders in the `orders` table.
 
 ## Result

src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro

@@ -2,11 +2,11 @@
 import { CourseView } from '../../../../../components/Course/CourseView';
 import SkeletonLayout from '../../../../../layouts/SkeletonLayout.astro';
 import {
-  getAllCourses,
-  getChaptersByCourseId,
-  type CourseFileType,
-  type ChapterFileType,
-  type LessonFileType,
+getAllCourses,
+getChaptersByCourseId,
+type ChapterFileType,
+type CourseFileType,
+type LessonFileType,
 } from '../../../../../lib/course';
 
 interface Params extends Record<string, string | undefined> {
@@ -64,7 +64,7 @@ export async function getStaticPaths() {
 }
 
 const { courseId, chapterId } = Astro.params;
-const { course, chapter, lesson } = Astro.props;
+const { course, lesson } = Astro.props;
 ---
 
 <SkeletonLayout title={course.frontmatter.title}>
@@ -75,6 +75,7 @@ const { course, chapter, lesson } = Astro.props;
     lesson={lesson}
     title={course.frontmatter.title}
     chapters={course.chapters}
+    isLoading={false}
     client:load
   >
     <lesson.Content />