fix: theme fixes for learning path item page

Author: pkulkark

src/learningpath/LearningPathDetails.jsx

@@ -9,6 +9,7 @@ import {
   Calendar,
   FormatListBulleted,
   AccessTimeFilled,
+  ChevronLeft,
 } from '@openedx/paragon/icons';
 import { buildAssetUrl } from '../util/assetUrl';
 import { useLearningPathDetail, useCoursesByIds } from './data/queries';
@@ -65,7 +66,10 @@ const LearningPathDetailPage = () => {
     content = (
       <div className="p-4">
         <p>Failed to load detail</p>
-        <Link to="/">Explore</Link>
+        <Link to="/">
+          <Icon src={ChevronLeft} />
+          <span>Go Back</span>
+        </Link>
       </div>
     );
   } else {
@@ -89,13 +93,14 @@ const LearningPathDetailPage = () => {
       <div className="learning-path-detail-page">
         <div className="hero-section p-4">
           <div className="mb-3">
-            <Link to="/" style={{ fontWeight: 600 }}>
-              Explore
+            <Link to="/" style={{ fontWeight: 600 }} className="d-flex">
+              <Icon src={ChevronLeft} />
+              <span>Go Back</span>
             </Link>
           </div>
-          <Row>
+          <Row className="border-bottom border-light">
             <Col xs={12} md={8}>
-              <div className="lp-type-label text-uppercase mb-2">
+              <div className="lp-detail-type-label d-flex text-uppercase mb-2">
                 <Icon src={FormatListBulleted} className="mr-1" />
                 <span>Learning Path</span>
               </div>
@@ -112,7 +117,7 @@ const LearningPathDetailPage = () => {
                 src={buildAssetUrl(imageUrl)}
                 alt={displayName}
                 style={{
-                  width: '100%', borderRadius: '4px', maxHeight: '250px', objectFit: 'cover',
+                  width: '650px', borderRadius: '4px', maxHeight: '500px', objectFit: 'cover',
                 }}
               />
               )}
@@ -122,7 +127,7 @@ const LearningPathDetailPage = () => {
             {accessUntilDate && (
               <Col xs={6} md={3} className="mb-3">
                 <div className="d-flex align-items-center">
-                  <Icon src={AccessTimeFilled} className="mr-4 mb-3" />
+                  <Icon src={AccessTimeFilled} className="mr-4 mb-3" style={{ color: '#821122' }} />
                   <div>
                     <p className="mb-0 font-weight-bold">
                       {accessUntilDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
@@ -134,7 +139,7 @@ const LearningPathDetailPage = () => {
             )}
             <Col xs={6} md={3} className="mb-3">
               <div className="d-flex align-items-center">
-                <Icon src={Award} className="mr-4 mb-4" />
+                <Icon src={Award} className="mr-4 mb-4" style={{ color: '#821122' }} />
                 <div>
                   <p className="mb-1 font-weight-bold">Earn a certificate</p>
                   <p className="text-muted">Some subtext</p>
@@ -143,7 +148,7 @@ const LearningPathDetailPage = () => {
             </Col>
             <Col xs={6} md={3} className="mb-3">
               <div className="d-flex align-items-center">
-                <Icon src={Calendar} className="mr-4 mb-4" />
+                <Icon src={Calendar} className="mr-4 mb-4" style={{ color: '#821122' }} />
                 <div>
                   <p className="mb-1 font-weight-bold">
                     {durationText || '6 months'}
@@ -154,7 +159,7 @@ const LearningPathDetailPage = () => {
             </Col>
             <Col xs={6} md={3} className="mb-3">
               <div className="d-flex align-items-center">
-                <Icon src={Person} className="mr-4 mb-4" />
+                <Icon src={Person} className="mr-4 mb-4" style={{ color: '#821122' }} />
                 <div>
                   <p className="mb-1 font-weight-bold">Self-paced</p>
                   <p className="text-muted">Some subtext</p>
@@ -187,7 +192,7 @@ const LearningPathDetailPage = () => {
               {description || ''}
             </p>
           </section>
-          <section id="courses" className="mb-6">
+          <section id="courses" className="mb-6 courses-section">
             <h2>Courses</h2>
             {loadingCourses && <Spinner animation="border" variant="primary" />}
             {!loadingCourses && !coursesError && (!coursesForPath || coursesForPath.length === 0) && (

src/learningpath/index.css

@@ -85,7 +85,7 @@
 
 .learning-path-detail-page {
   font-family: "Open Sans", sans-serif;
-  margin: 6rem;
+  margin: 2rem;
 
   .hero-section {
     padding: 2rem;
@@ -164,8 +164,8 @@
 
   .lp-info {
     margin-top: 3rem;
-    margin-left: 10rem;
-    margin-right: 10rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
 
     section {
       margin-bottom: 2rem;
@@ -175,6 +175,27 @@
         margin-bottom: 1rem;
       }
     }
+
+    .courses-section {
+      position: relative;
+      left: 50%;
+      right: 50%;
+      width: 100vw;
+      margin-left: -50vw;
+      margin-right: -50vw;
+      background-color: #FBFAF9;
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+
+      h2 {
+        margin-left: 6rem;
+      }
+
+      .mb-3 {
+        max-width: 1360px;
+        margin-left: 6rem;
+      }
+    }
   }
 }
 
@@ -189,8 +210,31 @@
     border-bottom: 0;
 
     .nav-link {
+      position: relative;
       font-weight: 600;
       padding: 1rem 1.5rem;
+      text-decoration: none !important;
+
+      &:focus {
+        box-shadow: none !important;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 0;
+        background-color: transparent;
+        transition: height 0.2s, background-color 0.2s;
+      }
+
+      &:hover::after,
+      &:active::after {
+        height: 4px;
+        background-color: #821122;
+      }
     }
   }
 
@@ -349,3 +393,15 @@
 .pgn__card .pgn__card-footer.vertical {
   padding: 0 !important;
 }
+
+.lp-detail-type-label {
+  background-color: #821122;
+  max-width: 10rem;
+  color: #fff;
+  border-radius: 5px;
+  padding: 2px 2px;
+  align-items: center;
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem !important;
+}