UI changes

src/components/GenerateCourse/AICourseContent.tsx

@@ -167,48 +167,52 @@ export function AICourseContent(props: AICourseContentProps) {
       <div className="flex flex-1 overflow-hidden">
         <aside
           className={cn(
-            'fixed inset-y-0 left-0 z-20 mt-16 w-80 transform overflow-y-auto border-r border-gray-200 bg-white pt-4 transition-transform duration-200 ease-in-out md:relative md:mt-0 md:translate-x-0',
+            'fixed inset-y-0 left-0 z-20 w-80 transform overflow-y-auto border-r border-gray-200 bg-white transition-transform duration-200 ease-in-out md:relative md:mt-0 md:translate-x-0',
             sidebarOpen ? 'translate-x-0' : '-translate-x-full',
           )}
         >
-          <div className="mb-4 px-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                {!isLoading && (
-                  <div className="text-xs text-black">
-                    <span className="rounded-full bg-yellow-400 px-1.5 py-0.5">
-                      {finishedPercentage}%
-                    </span>{' '}
-                    Completed
-                  </div>
-                )}
-
-                {isLoading && (
-                  <div className="flex flex-row items-center gap-1 text-xs text-gray-500">
-                    <Loader2
-                      size={16}
-                      className="mr-2 animate-spin text-gray-400"
-                    />
-
-                    Please wait ..
-                  </div>
-                )}
-                <button
-                  onClick={() => setSidebarOpen(false)}
-                  className="rounded-md p-1 hover:bg-gray-100 md:hidden"
-                >
-                  <X size={18} />
-                </button>
+          <div
+            className={cn(
+              'relative mb-2 flex min-h-[40px] items-center border-b border-gray-200 px-3',
+              isLoading && 'striped-loader bg-gray-50',
+            )}
+          >
+            {!isLoading && (
+              <div className="text-xs text-black">
+                <span className="relative z-10 rounded-full bg-yellow-400 px-1.5 py-0.5">
+                  {finishedPercentage}%
+                </span>{' '}
+                Completed
+                <span
+                  style={{
+                    width: `${finishedPercentage}%`,
+                  }}
+                  className={cn(
+                    'absolute bottom-0 left-0 top-0',
+                    'bg-gray-200/50',
+                  )}
+                ></span>
               </div>
-            </div>
+            )}
+
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="rounded-md p-1 hover:bg-gray-100 md:hidden"
+            >
+              <X size={18} />
+            </button>
           </div>
 
           <AICourseModuleList
             course={course}
             courseSlug={courseSlug}
-            activeModuleIndex={activeModuleIndex}
+            activeModuleIndex={
+              viewMode === 'module' ? activeModuleIndex : undefined
+            }
             setActiveModuleIndex={setActiveModuleIndex}
-            activeLessonIndex={activeLessonIndex}
+            activeLessonIndex={
+              viewMode === 'module' ? activeLessonIndex : undefined
+            }
             setActiveLessonIndex={setActiveLessonIndex}
             setSidebarOpen={setSidebarOpen}
             viewMode={viewMode}

src/components/GenerateCourse/AICourseFollowUp.tsx

@@ -29,11 +29,11 @@ export function AICourseFollowUp(props: AICourseFollowUpProps) {
   return (
     <div className="relative">
       <button
-        className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-2"
+        className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200"
         onClick={() => setIsOpen(true)}
       >
         <BotIcon className="h-4 w-4" />
-        <span>Still confused? Ask AI for follow up questions.</span>
+        <span>Still confused? Ask AI some follow up questions.</span>
 
         <ArrowRightIcon className="ml-auto h-4 w-4" />
       </button>

src/components/GenerateCourse/AICourseLimit.tsx

@@ -45,7 +45,7 @@ export function AICourseLimit() {
   const followUpPercentage = Math.round((followUpUsed / followUpLimit) * 100);
 
   return (
-    <div className="relative" ref={containerRef}>
+    <div className="relative z-10" ref={containerRef}>
       <button
         className="flex cursor-pointer items-center rounded-lg border border-gray-200 px-2 py-1.5 text-sm hover:bg-gray-50"
         onClick={() => setIsOpen(!isOpen)}

src/components/GenerateCourse/AICourseModuleList.tsx

@@ -12,9 +12,9 @@ import { CircularProgress } from './CircularProgress';
 type AICourseModuleListProps = {
   course: AiCourse;
   courseSlug?: string;
-  activeModuleIndex: number;
+  activeModuleIndex: number | undefined;
   setActiveModuleIndex: (index: number) => void;
-  activeLessonIndex: number;
+  activeLessonIndex: number | undefined;
   setActiveLessonIndex: (index: number) => void;
 
   setSidebarOpen: (open: boolean) => void;

src/components/GenerateCourse/AICourseModuleView.tsx

@@ -208,7 +208,7 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
 
         {!error && isLoggedIn() && (
           <div
-            className="course-content prose prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800"
+            className="course-content prose max-w-full prose-lg mt-8 text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800"
             dangerouslySetInnerHTML={{ __html: lessonHtml }}
           />
         )}