Custom UI for a specific client

package.json

@@ -14,7 +14,8 @@
     "@edx/frontend-enterprise-logistration": "3.4.0",
     "@edx/frontend-enterprise-utils": "3.4.0",
     "@edx/frontend-platform": "4.6.3",
-    "@edx/paragon": "20.45.4",
+    "@edx/paragon": "^21.5.6",
+    "@material-symbols/svg-400": "^0.17.3",
     "@tanstack/react-query": "4.28.0",
     "@tanstack/react-query-devtools": "4.29.0",
     "algoliasearch": "4.6.0",

src/components/app/AuthenticatedPage.jsx

@@ -8,7 +8,6 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';
 import { Hyperlink } from '@edx/paragon';
 import { EnterprisePage } from '../enterprise-page';
-import { EnterpriseBanner } from '../enterprise-banner';
 import { Layout } from '../layout';
 import LoginRefresh from './LoginRefresh';
 import { ErrorPage } from '../error-page';
@@ -48,7 +47,6 @@ const AuthenticatedPage = ({ children, useEnterpriseConfigCache }) => {
       <LoginRefresh>
         <EnterprisePage useEnterpriseConfigCache={useEnterpriseConfigCache}>
           <Layout>
-            <EnterpriseBanner />
             {children}
           </Layout>
         </EnterprisePage>

src/components/course/CourseMainContent.jsx

@@ -1,14 +1,12 @@
 import React, { useContext } from 'react';
-import { breakpoints, Hyperlink, MediaQuery } from '@edx/paragon';
-import { AppContext } from '@edx/frontend-platform/react';
+// import { AppContext } from '@edx/frontend-platform/react';
+import { Col } from '@edx/paragon';
 
-import { PreviewExpand } from '../preview-expand';
 import { CourseContext } from './CourseContextProvider';
-import CourseSidebar from './CourseSidebar';
-import CreatedBy from './CreatedBy';
-import VerifiedCertPitch from './VerifiedCertPitch';
+// import CreatedBy from './CreatedBy';
+// import VerifiedCertPitch from './VerifiedCertPitch';
 
 function formatSponsorTextList(sponsors) {
   const names = sponsors.map(sponsor => sponsor.name);
   let sponsorTextList;
 
@@ -29,132 +27,84 @@
 }
 
 const CourseMainContent = () => {
-  const { config } = useContext(AppContext);
+  // const { config } = useContext(AppContext);
   const { state } = useContext(CourseContext);
   const { course, activeCourseRun } = state;
 
   return (
-    <>
-      <MediaQuery minWidth={breakpoints.large.minWidth}>
-        {matches => !matches && (
-          <div className="mb-5">
-            <CourseSidebar />
-          </div>
-        )}
-      </MediaQuery>
+    <Col>
       {course.fullDescription && (
-        <PreviewExpand
-          className="mb-5"
-          cta={{
-            labelToExpand: 'More about this course',
-            labelToMinimize: 'Collapse about this course',
-            id: 'about-this-course',
-          }}
-          heading={<h3>About this course</h3>}
-        >
+        <div className="my-5">
+          <h2>About</h2>
           {/* eslint-disable-next-line react/no-danger */}
           <div dangerouslySetInnerHTML={{ __html: course.fullDescription }} />
-        </PreviewExpand>
-      )}
-      {course.sponsors && course.sponsors.length > 0 && (
-        <div className="mb-5">
-          <h3>Sponsored by</h3>
-          <div className="row no-gutters mt-3">
-            {course.sponsors.map((sponsor) => (
-              <div className="col-lg-6 mb-3" key={sponsor.name}>
-                <div className="mb-2">
-                  <a
-                    href={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`}
-                    aria-hidden="true"
-                    tabIndex="-1"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <img src={sponsor.logoImageUrl} alt={`${sponsor.name} logo`} />
-                  </a>
-                </div>
-                <Hyperlink
-                  destination={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`}
-                  target="_blank"
-                >
-                  {sponsor.name}
-                </Hyperlink>
-              </div>
-            ))}
-          </div>
-          <p>
-            The production of this course would not have been possible without the
-            generous contributions of {formatSponsorTextList(course.sponsors)}.
-          </p>
         </div>
       )}
       {course.outcome && (
-        <PreviewExpand
-          className="mb-5"
-          cta={{
-            labelToExpand: 'Expand what you\'ll learn',
-            labelToMinimize: 'Collapse what you\'ll learn',
-            id: 'what-youll-learn',
-          }}
-          heading={<h3>What you&apos;ll learn</h3>}
-        >
-          {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: course.outcome }} />
-        </PreviewExpand>
-      )}
-      {course.syllabusRaw && (
-        <PreviewExpand
-          className="mb-5"
-          cta={{
-            labelToExpand: 'Expand syllabus',
-            labelToMinimize: 'Collapse syllabus',
-            id: 'course-syllabus',
-          }}
-          heading={<h3>Syllabus</h3>}
-        >
-          {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: course.syllabusRaw }} />
-        </PreviewExpand>
-      )}
-      <CreatedBy />
-      {activeCourseRun.type === 'verified' && (
-        <VerifiedCertPitch />
-      )}
-      {course.learnerTestimonials && (
         <div className="mb-5">
-          <h3>Learner testimonials</h3>
+          <h2>What you&apos;ll learn</h2>
           {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: course.learnerTestimonials }} />
-        </div>
-      )}
-      {course.faq && (
-        <div className="mb-5">
-          <h3>Frequently asked questions</h3>
-          {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: course.faq }} />
+          <div dangerouslySetInnerHTML={{ __html: course.outcome }} />
         </div>
       )}
-      {course.additionalInformation && (
+      {course.syllabusRaw && (
         <div className="mb-5">
+          <h2>Syllabus</h2>
           {/* eslint-disable-next-line react/no-danger */}
-          <div dangerouslySetInnerHTML={{ __html: course.additionalInformation }} />
-        </div>
-      )}
-      {activeCourseRun.hasOfacRestrictions && (
-        <div className="mb-5">
-          <h3>Who can take this course?</h3>
-          <p>
-            Unfortunately, learners from one or more of the following countries or regions will not
-            be able to register for this course: Iran, Cuba and the Crimea region of Ukraine.
-            While edX has sought licenses from the U.S. Office of Foreign Assets Control (OFAC) to
-            offer our courses to learners in these countries and regions, the licenses we have
-            received are not broad enough to allow us to offer this course in all locations. EdX
-            truly regrets that U.S. sanctions prevent us from offering all of our courses to
-            everyone, no matter where they live.
-          </p>
+          <div dangerouslySetInnerHTML={{ __html: course.syllabusRaw }} />
         </div>
       )}
-    </>
+      {/*
+      <CreatedBy />
+      */}
+      {/*
+        activeCourseRun.type === 'verified' && (
+          <VerifiedCertPitch />
+        )
+      */}
+      {
+        course.learnerTestimonials && (
+          <div className="mb-5">
+            <h3>Learner testimonials</h3>
+            {/* eslint-disable-next-line react/no-danger */}
+            <div dangerouslySetInnerHTML={{ __html: course.learnerTestimonials }} />
+          </div>
+        )
+      }
+      {
+        course.faq && (
+          <div className="mb-5">
+            <h3>Frequently asked questions</h3>
+            {/* eslint-disable-next-line react/no-danger */}
+            <div dangerouslySetInnerHTML={{ __html: course.faq }} />
+          </div>
+        )
+      }
+      {
+        course.additionalInformation && (
+          <div className="mb-5">
+            {/* eslint-disable-next-line react/no-danger */}
+            <div dangerouslySetInnerHTML={{ __html: course.additionalInformation }} />
+          </div>
+        )
+      }
+      {
+        activeCourseRun.hasOfacRestrictions && (
+          <div className="mb-5">
+            <h3>Who can take this course?</h3>
+            <p>
+              Unfortunately, learners from one or more of the following countries or regions will not
+              be able to register for this course: Iran, Cuba and the Crimea region of Ukraine.
+              While edX has sought licenses from the U.S. Office of Foreign Assets Control (OFAC) to
+              offer our courses to learners in these countries and regions, the licenses we have
+              received are not broad enough to allow us to offer this course in all locations. EdX
+              truly regrets that U.S. sanctions prevent us from offering all of our courses to
+              everyone, no matter where they live.
+            </p>
+          </div>
+        )
+      }
+    </Col>
   );
 };
 

src/components/course/SubsidyRequestButton.jsx

@@ -18,7 +18,7 @@ const props = {
     requested: 'Awaiting approval',
   },
   disabledStates: ['requested'],
-  variant: 'primary',
+  variant: 'outline-primary',
   className: 'mb-4 mt-1',
 };
 
@@ -114,7 +114,9 @@ const SubsidyRequestButton = () => {
   };
 
   return (
-    <StatefulButton {...props} state={getButtonState()} onClick={handleRequestButtonClick} />
+    <div>
+      <StatefulButton {...props} state={getButtonState()} onClick={handleRequestButtonClick} />
+    </div>
   );
 };