feat: improve chapters and courses indicators

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}>
-            {params.content}
+          <TooltipContent slateBlack={props.slateBlack} side="bottom" sideOffset={props.sideOffset}>
+            {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,