feat: improve chapters and courses indicators

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/activity/[activityid]/page.tsx

@@ -12,6 +12,7 @@ import useSWR, { mutate } from "swr";
 import { Check } from "lucide-react";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { markActivityAsComplete } from "@services/courses/activity";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 function ActivityPage(params: any) {
   const activityid = params.params.activityid;
@@ -37,7 +38,7 @@ function ActivityPage(params: any) {
         <ActivityLayout>
           <ActivityTopWrapper>
             <ActivityThumbnail>
-              <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}`}>
+              <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}`}>
                 <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
               </Link>
             </ActivityThumbnail>
@@ -53,11 +54,14 @@ function ActivityPage(params: any) {
                   <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
                     {chapter.activities.map((activity: any) => {
                       return (
-                        <>
+                        <ToolTip sideOffset={-5} slateBlack content={activity.name} key={activity.id}>
-                          <Link href={getUriWithOrg(orgslug,"") +`/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
+                          <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                            <ChapterIndicator key={activity.id} />
+                            <ChapterIndicator
-                          </Link>{" "}
+                              done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
-                        </>
+                              active={"activity_" + activityid === activity.id ? true : false} key={activity.id}
+                            />
+                          </Link>
+                        </ToolTip>
                       );
                     })}
                   </div>
@@ -131,28 +135,26 @@ const ChaptersWrapper = styled.div`
   display: flex;
   // row
   flex-direction: row;
-  justify-content: space-around;
   width: 100%;
   width: 1300px;
   margin: 0 auto;
 `;
 
-const ChapterIndicator = styled.div`
+const ChapterIndicator = styled.div < { active?: boolean, done?: boolean } > `
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
   width: 35px;
-  background-color: black;
+  background-color: ${props => props.done ? "green" : (props.active ? "#9d9d9d" : "black")};
   margin: 10px;
   margin-bottom: 0px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 

front/app/_orgs/[orgslug]/(withmenu)/course/[courseid]/page.tsx

@@ -8,6 +8,7 @@ import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config/config
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/ts/requests";
 import { useRouter } from "next/navigation";
+import ToolTip from "@components/UI/Tooltip/Tooltip";
 
 const CourseIdPage = (params: any) => {
   const courseid = params.params.courseid;
@@ -54,18 +55,22 @@ const CourseIdPage = (params: any) => {
           <ChaptersWrapper>
             {course.chapters.map((chapter: any) => {
               return (
-                <>
+                <ChapterSeparator key={chapter}>
                   {chapter.activities.map((activity: any) => {
                     return (
                       <>
+                        <ToolTip sideOffset={-18} slateBlack content={activity.name}>
                           <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`}>
-                          <ChapterIndicator />
+                          <CourseIndicator
-                        </Link>{" "}
+                              done={course.trail.activities_marked_complete.includes(activity.id) && course.trail.status == "ongoing"}
+                             />
+                          </Link>
+                        </ToolTip>
+                        
                       </>
                     );
                   })}
-                  &nbsp;&nbsp;&nbsp;&nbsp;
+                </ChapterSeparator>
-                </>
               );
             })}
           </ChaptersWrapper>
@@ -93,12 +98,12 @@ const CourseIdPage = (params: any) => {
                 {course.chapters.map((chapter: any) => {
                   return (
                     <>
-                      <h3>Chapter : {chapter.name}</h3>
+                      <h3>{chapter.name}</h3>
                       {chapter.activities.map((activity: any) => {
                         return (
                           <>
                             <p>
-                              Activity {activity.name}
+                              {activity.name}
                               <Link href={getUriWithOrg(orgslug, "") + `/course/${courseid}/activity/${activity.id.replace("activity_", "")}`} rel="noopener noreferrer">
                                 <EyeOpenIcon />
                               </Link>{" "}
@@ -161,28 +166,33 @@ const CoursePageLayout = styled.div`
 
 const ChaptersWrapper = styled.div`
   display: flex;
-  justify-content: space-around;
   width: 100%;
 `;
-const ChapterIndicator = styled.div`
+const CourseIndicator = styled.div< { active?: boolean, done?: boolean } >`
   border-radius: 20px;
   height: 5px;
   background: #151515;
   border-radius: 3px;
 
-  width: 35px;
+  background-color: ${props => props.done ? "green" : "black"};
-  background-color: black;
+
+  width: 40px;
   margin: 10px;
   margin-bottom: 20px;
   margin-left: 0px;
-  transition: all 0.2s ease;
 
   &:hover {
-    width: 50px;
     cursor: pointer;
+    background-color: #9d9d9d;
   }
 `;
 
+const ChapterSeparator = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding-right: 7px;
+`;
+
 const BoxWrapper = styled.div`
   background: #ffffff;
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);

front/components/Editor/Editor.tsx

@@ -20,7 +20,6 @@ import Youtube from "@tiptap/extension-youtube";
 import VideoBlock from "./Extensions/Video/VideoBlock";
 import { Save } from "lucide-react";
 import MathEquationBlock from "./Extensions/MathEquation/MathEquationBlock";
-import PDFBlockComponent from "./Extensions/PDF/PDFBlockComponent";
 import PDFBlock from "./Extensions/PDF/PDFBlock";
 import QuizBlock from "./Extensions/Quiz/QuizBlock";
 

front/components/Editor/Toolbar/ToolbarButtons.tsx

@@ -56,7 +56,7 @@ export const ToolbarButtons = ({ editor, props }: any) => {
         <option value="6">Heading 6</option>
       </ToolSelect>
       {/* TODO: fix this : toggling only works one-way */}
-      <DividerVerticalIcon style={{margin:"auto", color : "grey"}}/>
+      <DividerVerticalIcon style={{marginTop:"auto", marginBottom:"auto", color : "grey"}}/>
       <ToolTip content={"Info Callout"}>
         <ToolBtn onClick={() => editor.chain().focus().toggleNode("calloutInfo").run()}>
           <AlertCircle size={15} />

front/components/UI/Tooltip/Tooltip.tsx

@@ -5,22 +5,24 @@ import { violet, blackA } from '@radix-ui/colors';
 import { PlusIcon } from '@radix-ui/react-icons';
 
 
-type TooltipParams = {
+type TooltipProps = {
     sideOffset?: number;
     content: React.ReactNode;
     children: React.ReactNode;
+    slateBlack?: boolean;
 };
 
-const ToolTip = (params: TooltipParams) => {
+const ToolTip = (props: TooltipProps) => {
+  
   return (
     <Tooltip.Provider delayDuration={200}>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
-          {params.children}
+          {props.children}
         </Tooltip.Trigger>
         <Tooltip.Portal>
-          <TooltipContent side="bottom" sideOffset={params.sideOffset}>
+          <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
-            {params.content}
+            {props.content}
             <TooltipArrow />
           </TooltipContent>
         </Tooltip.Portal>
@@ -55,6 +57,16 @@ const closeAndFade = keyframes({
 });
 
 const TooltipContent = styled(Tooltip.Content, {
+
+  variants : {
+    slateBlack: {
+      true: {
+        backgroundColor:" #5a5a5a",
+        color: 'white',
+      },
+    },
+  },
+
   borderRadius: 4,
   padding: '5px 10px',
   fontSize: 12,