Improve sidebar of course

src/components/Course/Chapter.tsx

@@ -89,15 +89,16 @@ 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',
+          'relative z-10 flex w-full flex-row items-center gap-2 border-b px-2 py-4 text-base text-gray-600',
           {
-            'text-black': true,
+            'text-black': isActive,
           },
         )}
         onClick={onChapterClick}
       >
         <CircularProgress
           isVisible={!isChapterCompleted}
+          isActive={isActive}
           percentage={Number(completedPercentage) || 5}
         >
           <div

src/components/Course/CircularProgress.tsx

@@ -1,11 +1,15 @@
+import { cn } from '../../lib/classname';
+
 export function CircularProgress({
   percentage,
   children,
   isVisible = true,
+  isActive = false,
 }: {
   percentage: number;
   children: React.ReactNode;
   isVisible?: boolean;
+  isActive?: boolean;
 }) {
   const circumference = 2 * Math.PI * 13;
   const strokeDasharray = `${circumference}`;
@@ -22,7 +26,9 @@ export function CircularProgress({
             stroke="currentColor"
             strokeWidth="1.75"
             fill="none"
-            className="text-green-600"
+            className={cn('text-gray-400/70', {
+              'text-black': isActive,
+            })}
             style={{
               strokeDasharray,
               strokeDashoffset,