From b21db4c6416390dec8f220be9ecdfc89c633f0f2 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 17 Nov 2024 12:55:13 -0800
Subject: [PATCH] Improve sidebar of course

---
 src/components/Course/Chapter.tsx          | 5 +++--
 src/components/Course/CircularProgress.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Course/Chapter.tsx b/src/components/Course/Chapter.tsx
index 21626ca6f..9f4525e88 100644
--- a/src/components/Course/Chapter.tsx
+++ b/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
diff --git a/src/components/Course/CircularProgress.tsx b/src/components/Course/CircularProgress.tsx
index 413dcc010..9adac2fff 100644
--- a/src/components/Course/CircularProgress.tsx
+++ b/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,