Update UI

src/components/Course/Chapter.tsx

@@ -82,33 +82,35 @@ export function Chapter(props: ChapterProps) {
     <div>
       <button
         className={cn(
-          'relative z-10 flex w-full items-center gap-2 border-b px-2 py-4 text-base',
+          'relative z-10 flex flex-col w-full items-center gap-2 border-y px-2 py-4 text-base',
           {
             'text-black': true,
           },
         )}
         onClick={onChapterClick}
       >
-        <div className="text-400 flex h-[21px] w-[21px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white">
+        <div className="flex w-full items-center gap-2">
-          {index}
+          <div className="text-400 flex h-[21px] w-[21px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white">
+            {index}
+          </div>
+          <span className="truncate text-left">{title}</span>
+          {/*Right check of completion*/}
+          {isChapterCompleted && lessons.length > 0 && (
+            <CheckIcon additionalClasses="h-4 w-4 ml-auto flex-shrink-0" />
+          )}
         </div>
-        <span className="truncate text-left">{title}</span>
-        {/*Right check of completion*/}
-        {isChapterCompleted && lessons.length > 0 && (
-          <CheckIcon additionalClasses="h-4 w-4 ml-auto flex-shrink-0" />
-        )}
 
-        {/* active background indicator */}
+        {/*/!* active background indicator *!/*/}
-        <div
+        {/*<div*/}
-          className="absolute inset-0 -z-10 bg-gray-100"
+        {/*  className="absolute inset-0 -z-10 bg-gray-100"*/}
-          style={{
+        {/*  style={{*/}
-            width: `${completedPercentage}%`,
+        {/*    width: `${completedPercentage}%`,*/}
-          }}
+        {/*  }}*/}
-        />
+        {/*/>*/}
       </button>
 
       {isActive && (
-        <div className="flex flex-col border-b">
+        <div className="flex flex-col">
           {lessons.length > 0 && (
             <>
               <LessonList

src/components/Course/CourseSidebar.tsx

@@ -31,7 +31,7 @@ export function CourseSidebar(props: CourseSidebarProps) {
 
   return (
     <aside className="border-r">
-      <div className="border-b p-4">
+      <div className="p-4">
         <h2 className="mb-1.5 text-2xl font-semibold">{title}</h2>
         <div className="text-sm">
           <span className="rounded-lg bg-yellow-300 px-1.5 py-0.5 text-black">

src/components/Course/CourseView.tsx

@@ -49,6 +49,9 @@ export function CourseView(props: CourseViewProps) {
             <div className="relative h-full">
               <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
                 <div className="mx-auto max-w-xl p-4">
+                  <h3 className="text-4xl font-semibold mt-10">
+                    {lesson.frontmatter.title}
+                  </h3>
                   <div className="course-content prose prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800">
                     {children}
                   </div>

src/components/Course/QuizView.tsx

@@ -37,11 +37,11 @@ export function QuizView(props: QuizViewProps) {
     <div className="relative h-full">
       <div className="absolute inset-0 overflow-y-auto [scrollbar-color:#3f3f46_#27272a;]">
         <div className="mx-auto max-w-xl p-4 py-10">
-          <h3 className="mb-10 text-lg font-semibold">
+          <h3 className="mb-10 text-3xl font-semibold">
             {lesson.frontmatter.title}
           </h3>
 
-          <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-7">
             {questions.map((question) => {
               return (
                 <QuizItem
@@ -76,7 +76,7 @@ export function QuizView(props: QuizViewProps) {
             })}
           </div>
 
-          <div className="mt-8 flex items-center justify-end">
+          <div className="mt-8 flex justify-end">
             <button
               className="rounded-xl border border-zinc-700 bg-zinc-800 p-2 px-4 text-sm font-medium text-white focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
               disabled={isSubmitted || !isAllAnswered}
@@ -124,9 +124,27 @@ type QuizItemProps = {
 export function QuizItem(props: QuizItemProps) {
   const { id, title, options, onOptionSelectChange, disabled } = props;
 
+  const hasWrongAnswer = options.some((item) => item.status === 'wrong');
+  const hasCorrectAnswer = options.some((item) => item.status === 'correct');
+
   return (
-    <div className="rounded-2xl bg-zinc-800 p-4">
+    <div
-      <h3 className="mx-2 text-balance text-lg font-medium">{title}</h3>
+      className={cn('relative rounded-2xl border p-4 text-black', {
+        'border-red-400': hasWrongAnswer,
+        'border-green-500': hasCorrectAnswer,
+      })}
+    >
+      {(hasWrongAnswer || hasCorrectAnswer) && (
+        <span
+          className={
+            'absolute -top-3.5 left-4 rounded-lg bg-green-300/70 px-2 py-1 text-xs font-medium uppercase tracking-wide text-green-800'
+          }
+        >
+          Correct
+        </span>
+      )}
+
+      <h3 className="mx-2 text-lg font-medium">{title}</h3>
 
       <div className="mt-4 flex flex-col gap-1">
         {options.map((option, index) => {
@@ -166,21 +184,21 @@ export function QuizOption(props: QuizOptionProps) {
       onClick={onSelect}
       className={cn(
         'flex items-start gap-2 rounded-xl p-2 text-sm disabled:cursor-not-allowed',
-        status === 'selected' && 'ring-1 ring-zinc-500',
+        status === 'selected' && 'ring-1 ring-black',
         status === 'wrong' && 'text-red-500 ring-1 ring-red-500',
         status === 'correct' && 'text-green-500 ring-1 ring-green-500',
-        status === 'default' && 'hover:bg-zinc-700',
+        status === 'default' && 'hover:bg-gray-100',
       )}
       disabled={disabled}
     >
-      <span className="mt-0.5">
+      <span className="mt-[1px]">
-        {status === 'wrong' && <CircleX className="size-4" />}
+        {status === 'wrong' && <CircleX className="size-5" />}
-        {status === 'correct' && <CircleCheck className="size-4" />}
+        {status === 'correct' && <CircleCheck className="size-5" />}
         {(status === 'selected' || status === 'default') && (
-          <Circle className="size-4" />
+          <Circle className="size-5" />
         )}
       </span>
-      <p>{text}</p>
+      <p className="text-left">{text}</p>
     </button>
   );
 }

src/data/courses/sql/chapters/introduction/lessons/intro-to-sql.md

@@ -5,8 +5,6 @@ order: 100
 type: lesson
 ---
 
-## What is SQL
-
 The SQL language is widely used today across web frameworks and database applications. Knowing SQL gives you the freedom to explore your data, and the power to make better decisions. By learning SQL, you will also learn concepts that apply to nearly every data storage system.
 
 The statements covered in this course use SQLite Relational Database Management System (RDBMS). You can also access a glossary of all the SQL commands taught in this course.