fix: card style fixes updates throughout app (#657)

openedx · Dec 21, 2022 · cbea709 · cbea709
1 parent 7283041
commit cbea709
Show file tree

Hide file tree

Showing 40 changed files with 689 additions and 930 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "@edx/frontend-enterprise-logistration": "2.1.1",
     "@edx/frontend-enterprise-utils": "2.2.0",
     "@edx/frontend-platform": "2.6.2",
-    "@edx/paragon": "20.21.2",
+    "@edx/paragon": "20.22.2",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",

diff --git a/src/components/TagCloud/index.jsx b/src/components/TagCloud/index.jsx
@@ -1,26 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import './styles/TagCloud.scss';
+import { Chip } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
 
 const TagCloud = ({ tags, onRemove }) => (
-  <>
-    <div className="skills-tag">
-      <ul className="item">
-        {
-          tags.map(
-            tag => (
-              <li className="list-item" key={tag.title}>
-                <span className="black">{tag.title}</span>
-                <button data-testid={tag.title} type="button" className="remove" onClick={() => onRemove(tag.metadata)}>x</button>
-              </li>
-            ),
-          )
-        }
-      </ul>
-    </div>
-
-  </>
+  <div className="skills-tag">
+    {tags.map(tag => (
+      <Chip
+        key={tag.title}
+        variant="light"
+        iconAfter={Close}
+        onIconAfterClick={() => onRemove(tag.metadata)}
+        data-testid={tag.title}
+      >
+        {tag.title}
+      </Chip>
+    ))}
+  </div>
 );
 
 TagCloud.propTypes = {

diff --git a/src/components/TagCloud/styles/TagCloud.scss b/src/components/TagCloud/styles/TagCloud.scss
diff --git a/src/components/course/CourseRecommendationCard.jsx b/src/components/course/CourseRecommendationCard.jsx
@@ -69,7 +69,7 @@ const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
           </Truncate>
         )}
         subtitle={course.owners?.length > 0 && (
-          <p className="partner text-muted m-0">
+          <p className="partner">
             <Truncate lines={1} trimWhitespace>
               {course.owners.map(partner => partner.name).join(', ')}
             </Truncate>
@@ -79,10 +79,7 @@ const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
 
       {/* Intentionally empty section so the footer is correctly spaced at the bottom of the card */}
       <Card.Section />
-
-      <Card.Footer>
-        <small className="text-muted">Course</small>
-      </Card.Footer>
+      <Card.Footer textElement={<span className="text-muted">Course</span>} />
     </Card>
   );
 };

diff --git a/src/components/course/CourseRunCard.jsx b/src/components/course/CourseRunCard.jsx
@@ -234,7 +234,7 @@ const CourseRunCard = ({
   const triggerLicenseSubsidyEvent = shouldShowLicenseSubsidyPriceText;
 
   return (
-    <Card className="w-100">
+    <Card>
       <Card.Section
         className="d-flex flex-column align-items-center justify-content-between"
       >

diff --git a/src/components/dashboard/DashboardPage.jsx b/src/components/dashboard/DashboardPage.jsx
@@ -38,36 +38,32 @@ export default function DashboardPage() {
   const userFirstName = useMemo(() => authenticatedUser?.name.split(' ').shift(), [authenticatedUser]);
   const CoursesTabComponent = (
     <>
-      <Container size="lg">
-        <Alert
-          variant="success"
-          show={isActivationAlertOpen}
-          onClose={closeActivationAlert}
-          className="mt-3"
-          dismissible
-        >
-          {LICENCE_ACTIVATION_MESSAGE}
-        </Alert>
-      </Container>
-      <Container size="lg" className="py-5">
-        <Row>
-          <CourseEnrollmentsContextProvider>
-            <CourseEnrollmentFailedAlert className="mt-0 mb-3" enrollmentSource={ENROLLMENT_SOURCE.DASHBOARD} />
-            <MainContent>
-              <DashboardMainContent />
-            </MainContent>
-            <MediaQuery minWidth={breakpoints.large.minWidth}>
-              {matches => (matches ? (
-                <Sidebar data-testid="sidebar">
-                  <DashboardSidebar />
-                </Sidebar>
-              ) : null)}
-            </MediaQuery>
-          </CourseEnrollmentsContextProvider>
-          <IntegrationWarningModal isOpen={enterpriseConfig.showIntegrationWarning} />
-          {subscriptionPlan && showExpirationNotifications && <SubscriptionExpirationModal />}
-        </Row>
-      </Container>
+      <Alert
+        variant="success"
+        show={isActivationAlertOpen}
+        onClose={closeActivationAlert}
+        className="mt-3"
+        dismissible
+      >
+        {LICENCE_ACTIVATION_MESSAGE}
+      </Alert>
+      <Row className="py-5">
+        <CourseEnrollmentsContextProvider>
+          <CourseEnrollmentFailedAlert className="mt-0 mb-3" enrollmentSource={ENROLLMENT_SOURCE.DASHBOARD} />
+          <MainContent>
+            <DashboardMainContent />
+          </MainContent>
+          <MediaQuery minWidth={breakpoints.large.minWidth}>
+            {matches => (matches ? (
+              <Sidebar data-testid="sidebar">
+                <DashboardSidebar />
+              </Sidebar>
+            ) : null)}
+          </MediaQuery>
+        </CourseEnrollmentsContextProvider>
+        <IntegrationWarningModal isOpen={enterpriseConfig.showIntegrationWarning} />
+        {subscriptionPlan && showExpirationNotifications && <SubscriptionExpirationModal />}
+      </Row>
     </>
   );
   const PAGE_TITLE = `Dashboard - ${enterpriseConfig.name}`;

diff --git a/src/components/dashboard/sidebar/SubsidiesSummary.jsx b/src/components/dashboard/sidebar/SubsidiesSummary.jsx
@@ -79,8 +79,8 @@ const SubsidiesSummary = ({
   // TODO: Design debt, don't have cards in a card
     <>
       <SidebarCard
-        cardSectionClassNames="border-0"
-        cardClassNames={classNames('mb-5', { 'col-8 border-0': programProgressPage })}
+        cardSectionClassNames="border-0 shadow-none p-0"
+        cardClassNames={classNames('mb-5', { 'col-8 border-0 shadow-none': programProgressPage })}
       >
         <div className={className} data-testid="subsidies-summary">
           {hasActiveLicenseOrLicenseRequest && (
@@ -89,7 +89,7 @@ const SubsidiesSummary = ({
               licenseRequest={licenseRequests[0]}
               courseEndDate={courseEndDate}
               programProgressPage={programProgressPage}
-              className="mb-2 border-0"
+              className="border-0 shadow-none"
             />
           )}
           {hasAssignedCodesOrCodeRequests && (
@@ -98,19 +98,19 @@ const SubsidiesSummary = ({
               couponCodeRequestsCount={couponCodeRequests.length}
               totalCoursesEligibleForCertificate={totalCoursesEligibleForCertificate}
               programProgressPage={programProgressPage}
-              className="mb-2 border-0"
+              className="border-0 shadow-none"
             />
           )}
           {canEnrollWithEnterpriseOffers && (
             <EnterpriseOffersSummaryCard
-              className="border-0"
+              className="border-0 shadow-none"
               offers={enterpriseOffers}
             />
           )}
         </div>
         {searchCoursesCta && (
           <SidebarCard
-            cardClassNames="border-0"
+            cardClassNames="border-0 shadow-none"
           >
             {searchCoursesCta}
           </SidebarCard>

diff --git a/src/components/pathway-progress/PathwayProgressCard.jsx b/src/components/pathway-progress/PathwayProgressCard.jsx
@@ -16,7 +16,7 @@ const PathwayProgressCard = ({ pathway: { learnerPathwayProgress } }) => {
   };
   return (
     <Card
-      className="mb-4 progress-listing-card mr-5"
+      className="progress-listing-card"
       isClickable
       onClick={redirectToProgressDetailPage}
     >
@@ -26,16 +26,15 @@ const PathwayProgressCard = ({ pathway: { learnerPathwayProgress } }) => {
         data-testid="pathway-card-image"
         srcAlt="dug"
       />
-
       <Card.Header
         title={(
           <Truncate lines={2} trimWhitespace>
             {learnerPathwayProgress.title}
           </Truncate>
         )}
       />
-
-      <Card.Section className="py-3">
+      <Card.Section />
+      <Card.Section>
         <ProgressCategoryBubbles
           inProgress={progress.inProgress}
           notStarted={progress.notStarted}

diff --git a/src/components/pathway-progress/PathwayProgressListingPage.jsx b/src/components/pathway-progress/PathwayProgressListingPage.jsx
@@ -2,9 +2,9 @@ import React, {
   useContext,
 } from 'react';
 import {
-  Row,
   Container,
   Button,
+  CardGrid,
 } from '@edx/paragon';
 import { AppContext, ErrorPage } from '@edx/frontend-platform/react';
 import './styles/index.scss';
@@ -38,27 +38,25 @@ const PathwayProgressListingPage = () => {
   }
 
   return (
-    <>
-      <Container size="lg" className="py-5 w-100">
-        <Row>
-          {pathwayProgressData?.length > 0 ? (
-            pathwayProgressData.map((pathway) => (
-              <PathwayProgressCard
-                pathway={pathway}
-                key={pathway.learnerPathwayProgress.uuid}
-              />
-            ))
-          ) : (
-            <div className="no-content-message">
-              <h2>{NO_PATHWAYS_ERROR_MESSAGE}</h2>
-              <Link to={`/${enterpriseConfig.slug}/search?content_type=${CONTENT_TYPE_PATHWAY}`}>
-                <Button variant="primary" iconBefore={Search} className="btn-brand-primary mt-2">Explore pathways</Button>
-              </Link>
-            </div>
-          )}
-        </Row>
-      </Container>
-    </>
+    <div className="py-5">
+      {pathwayProgressData?.length > 0 ? (
+        <CardGrid columnSizes={{ xs: 12, lg: 6 }}>
+          {pathwayProgressData.map((pathway) => (
+            <PathwayProgressCard
+              pathway={pathway}
+              key={pathway.learnerPathwayProgress.uuid}
+            />
+          ))}
+        </CardGrid>
+      ) : (
+        <div className="no-content-message">
+          <h2>{NO_PATHWAYS_ERROR_MESSAGE}</h2>
+          <Link to={`/${enterpriseConfig.slug}/search?content_type=${CONTENT_TYPE_PATHWAY}`}>
+            <Button variant="primary" iconBefore={Search} className="btn-brand-primary mt-2">Explore pathways</Button>
+          </Link>
+        </div>
+      )}
+    </div>
   );
 };
 

diff --git a/src/components/pathway/SearchPathwayCard.jsx b/src/components/pathway/SearchPathwayCard.jsx
@@ -102,7 +102,7 @@ const SearchPathwayCard = ({
       isClickable
       isLoading={isLoading}
       onClick={handleCardClick}
-      className="bg-primary-500 border-0"
+      variant="dark"
       {...rest}
     >
       <Card.ImageCap