fix: theme fixes for course info page

Author: pkulkark

src/learningpath/CourseDetails.jsx

@@ -20,11 +20,17 @@ import {
   Calendar,
   Person,
   Close,
+  ChevronLeft,
 } from '@openedx/paragon/icons';
 import { useCourseDetail } from './data/queries';
 import { buildAssetUrl } from '../util/assetUrl';
 
-const CourseDetailContent = ({ course, isModalView, onClose }) => {
+const CourseDetailContent = ({
+  course,
+  isModalView,
+  onClose,
+  learningPathTitle,
+}) => {
   const {
     name,
     shortDescription,
@@ -70,19 +76,31 @@ const CourseDetailContent = ({ course, isModalView, onClose }) => {
       <div className="hero-section p-4">
         {!isModalView && (
           <div className="mb-3">
-            <Link to="/" style={{ fontWeight: 600 }}>Explore</Link>
+            <Link to="/" style={{ fontWeight: 600 }} className="d-flex">
+              <Icon src={ChevronLeft} />
+              <span>Go Back</span>
+            </Link>
           </div>
         )}
         {isModalView && (
-          <div className="pgn__modal-close-container">
-            <ModalCloseButton variant="tertiary" onClick={handleClose}>
-              <Icon src={Close} />
-            </ModalCloseButton>
-          </div>
+          <>
+            <div className="lp-course-modal-header d-flex align-items-center justify-content-between py-2">
+              {learningPathTitle && (
+                <h5 className="mb-0">
+                  Learning Path: {learningPathTitle}
+                </h5>
+              )}
+              <div className="pgn__modal-close-container">
+                <ModalCloseButton variant="tertiary" onClick={handleClose}>
+                  <Icon src={Close} />
+                </ModalCloseButton>
+              </div>
+            </div>
+          </>
         )}
-        <Row>
+        <Row className="border-bottom border-light">
           <Col xs={12} md={8}>
-            <div className="course-type-label text-uppercase mb-2">
+            <div className="course-detail-type-label d-flex text-uppercase mb-2">
               <Icon src={LmsBook} className="mr-1" />
               <span>Course</span>
             </div>
@@ -185,14 +203,21 @@ CourseDetailContent.propTypes = {
   }).isRequired,
   isModalView: PropTypes.bool,
   onClose: PropTypes.func,
+  learningPathTitle: PropTypes.string,
 };
 
 CourseDetailContent.defaultProps = {
   isModalView: false,
   onClose: undefined,
+  learningPathTitle: undefined,
 };
 
-const CourseDetailPage = ({ isModalView = false, onClose, courseKey: propCourseKey }) => {
+const CourseDetailPage = ({
+  isModalView = false,
+  onClose,
+  courseKey: propCourseKey,
+  learningPathTitle,
+}) => {
   const { courseKey: urlCourseKey } = useParams();
   const courseKey = propCourseKey || urlCourseKey;
 
@@ -236,7 +261,12 @@ const CourseDetailPage = ({ isModalView = false, onClose, courseKey: propCourseK
 
   return (
     <div className="course-detail-page">
-      <CourseDetailContent course={courseWithFallbacks} isModalView={isModalView} onClose={onClose} />
+      <CourseDetailContent
+        course={courseWithFallbacks}
+        isModalView={isModalView}
+        onClose={onClose}
+        learningPathTitle={learningPathTitle}
+      />
     </div>
   );
 };
@@ -245,12 +275,14 @@ CourseDetailPage.propTypes = {
   isModalView: PropTypes.bool,
   onClose: PropTypes.func,
   courseKey: PropTypes.string,
+  learningPathTitle: PropTypes.string,
 };
 
 CourseDetailPage.defaultProps = {
   isModalView: false,
   onClose: undefined,
   courseKey: undefined,
+  learningPathTitle: undefined,
 };
 
 export default CourseDetailPage;

src/learningpath/LearningPathDetails.jsx

@@ -19,6 +19,7 @@ import CourseDetailPage from './CourseDetails';
 const LearningPathDetailPage = () => {
   const { key } = useParams();
   const [selectedCourseKey, setSelectedCourseKey] = useState(null);
+  const [selectedPathTitle, setSelectedPathTitle] = useState('');
 
   const {
     data: detail,
@@ -51,12 +52,14 @@ const LearningPathDetailPage = () => {
     return maxDate;
   }, [coursesForPath]);
 
-  const handleOpenCourseModal = (courseKey) => {
+  const handleOpenCourseModal = (courseKey, pathTitle) => {
     setSelectedCourseKey(courseKey);
+    setSelectedPathTitle(pathTitle);
   };
 
   const handleCloseCourseModal = () => {
     setSelectedCourseKey(null);
+    setSelectedPathTitle('');
   };
 
   let content;
@@ -204,7 +207,10 @@ const LearningPathDetailPage = () => {
                   <CourseCard
                     course={course}
                     parentPath=""
-                    onClick={() => handleOpenCourseModal(course.courseId ? `course-v1:${course.org}+${course.courseId}+${course.run}` : null)}
+                    onClick={() => handleOpenCourseModal(
+                      course.courseId ? `course-v1:${course.org}+${course.courseId}+${course.run}` : null,
+                      displayName,
+                    )}
                   />
                 </div>
               ))
@@ -237,6 +243,7 @@ const LearningPathDetailPage = () => {
             isModalView
             courseKey={selectedCourseKey}
             onClose={handleCloseCourseModal}
+            learningPathTitle={selectedPathTitle}
           />
         </ModalLayer>
       )}

src/learningpath/index.css

@@ -405,3 +405,25 @@
   font-weight: 600;
   margin-bottom: 1.5rem !important;
 }
+
+.course-detail-type-label {
+  color: white;
+  align-items: center;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background-color: #8C8179;
+  border-radius: 5px;
+  padding: 2px 2px;
+  max-width: 6rem;
+}
+
+.lp-course-modal-header {
+  position: absolute;
+  top: 0 !important;
+
+  .pgn__modal-close-container {
+    position: relative !important;
+    top: 0 !important;
+    margin-left: 66vw;
+  }
+}