From aa9cea699989b527a75d519d9236f299c56f0072 Mon Sep 17 00:00:00 2001
From: "kshitij.sobti" <kshitij@sobti.in>
Date: Fri, 17 Jul 2026 23:42:48 +0530
Subject: [PATCH] style: Update course outline sidebar styling and use theme
 tokens

- Replace hardcoded border color (#d7d3d1) with var(--pgn-color-light-700)
  in CourseOutlineTray.scss for theme compatibility.
- Move active-section highlight to a dedicated .active-section class on
  SidebarSection and add an .active-unit class on SidebarUnit.
---
 .../sidebars/course-outline/CourseOutlineTray.scss        | 8 ++++++--
 .../sidebars/course-outline/components/SidebarSection.jsx | 7 ++-----
 .../sidebars/course-outline/components/SidebarUnit.jsx    | 0
 .../sidebars/course-outline/components/SidebarUnit.tsx    | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx

diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
index f051d248ea..ab8a2d8f21 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.scss
@@ -13,7 +13,7 @@
 }
 
 .outline-sidebar-heading-wrapper {
-    border: 1px solid #d7d3d1;
+    border: 1px solid var(--pgn-color-light-700);
 
     &.sticky {
         position: sticky;
@@ -29,7 +29,11 @@
 
 .course-sidebar-section {
     background: var(--pgn-color-white);
-    border: 1px solid #d7d3d1;
+    border: 1px solid var(--pgn-color-light-700);
+
+    &.active-section button {
+        background-color: var(--pgn-color-info-100);
+    }
 
     button {
         line-height: 1.75rem;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
index 5e7a30879a..9cf42d2698 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx
@@ -48,13 +48,10 @@ const SidebarSection = ({ section, handleSelectSection }) => {
   );
 
   return (
-    <li className="mb-2 course-sidebar-section">
+    <li className={classNames('mb-2 course-sidebar-section', { 'active-section': isActiveSection })}>
       <Button
         variant="tertiary"
-        className={classNames(
-          'd-flex align-items-center w-100 px-4 py-3.5 rounded-0 justify-content-start',
-          { 'bg-info-100': isActiveSection },
-        )}
+        className="d-flex align-items-center w-100 px-4 py-3.5 rounded-0 justify-content-start"
         onClick={() => handleSelectSection(id)}
       >
         {sectionTitle}
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
index c04414285e..f67f1fff31 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.tsx
@@ -45,7 +45,7 @@ const SidebarUnit = ({
   const unitIcon = <UnitIcon type={iconType} isCompleted={completeAndEnabled} />;
   return (
     <li className={classNames({
-      'bg-info-100': isActive,
+      'active-unit bg-info-100': isActive,
       'border-top border-light': !isFirst,
     })}
     >