refactor: moving css style

src/course-outline/CourseOutline.scss

@@ -9,18 +9,3 @@
 @import "./publish-modal/PublishModal";
 @import "./drag-helper/SortableItem";
 @import "./xblock-status/XBlockStatus";
-
-div.row:has(> div > div.highlight) {
-  animation: 5s glow;
-  animation-timing-function: cubic-bezier(1, 0, .72, .04);
-}
-
-@keyframes glow {
-  0% {
-    box-shadow: 0 0 5px 5px $primary-500;
-  }
-
-  100% {
-    box-shadow: unset;
-  }
-}

src/course-unit/CourseUnit.scss

@@ -4,18 +4,3 @@
 @import "./course-xblock/CourseXBlock";
 @import "./sidebar/Sidebar";
 @import "./header-title/HeaderTitle";
-
-div.xblock-highlight {
-  animation: 5s glow;
-  animation-timing-function: cubic-bezier(1, 0, .72, .04);
-}
-
-@keyframes glow {
-  0% {
-    box-shadow: 0 0 5px 5px $primary-500;
-  }
-
-  100% {
-    box-shadow: unset;
-  }
-}

src/index.scss

@@ -28,3 +28,25 @@
 @import "search-modal/SearchModal";
 @import "certificates/scss/Certificates";
 @import "group-configurations/GroupConfigurations";
+
+// To apply the glow effect to the selected Section/Subsection, in the Course Outline
+div.row:has(> div > div.highlight) {
+  animation: 5s glow;
+  animation-timing-function: cubic-bezier(1, 0, .72, .04);
+}
+
+// To apply the glow effect to the selected xblock, in the Unit Outline
+div.xblock-highlight {
+  animation: 5s glow;
+  animation-timing-function: cubic-bezier(1, 0, .72, .04);
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 5px 5px $primary-500;
+  }
+
+  100% {
+    box-shadow: unset;
+  }
+}