From 8e5adc6295049b4903f32e0bc6d648bb86cd0fb3 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 17 Nov 2024 14:53:56 -0800
Subject: [PATCH] Update UI

---
 src/components/Course/CertificateView.tsx           |  8 ++++----
 src/components/Course/Chapter.tsx                   |  4 ++--
 src/components/Course/CourseSidebar.tsx             |  5 ++++-
 .../chapters/introduction/lessons/challenge-1.md    |  2 --
 .../[courseId]/[chapterId]/[lessonId]/index.astro   | 13 +++++++------
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/Course/CertificateView.tsx b/src/components/Course/CertificateView.tsx
index f3ee46e5e..253f11dad 100644
--- a/src/components/Course/CertificateView.tsx
+++ b/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>
         )}
diff --git a/src/components/Course/Chapter.tsx b/src/components/Course/Chapter.tsx
index ef9654f83..55c93885b 100644
--- a/src/components/Course/Chapter.tsx
+++ b/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}
diff --git a/src/components/Course/CourseSidebar.tsx b/src/components/Course/CourseSidebar.tsx
index 50ae57b0a..b524eba66 100644
--- a/src/components/Course/CourseSidebar.tsx
+++ b/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]" />
diff --git a/src/data/courses/sql/chapters/introduction/lessons/challenge-1.md b/src/data/courses/sql/chapters/introduction/lessons/challenge-1.md
index b5b024b1b..99aa51fc1 100644
--- a/src/data/courses/sql/chapters/introduction/lessons/challenge-1.md
+++ b/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
diff --git a/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro b/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro
index 7dadfb228..61b1c1c2f 100644
--- a/src/pages/learn/[courseId]/[chapterId]/[lessonId]/index.astro
+++ b/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 />