chore: update to paragon 19.0.0

Adapt to the big <Card> redesign.

Also, as part of 19.0.0, the shadow variables in paragon got
marked as !default, letting the theme override them. This would
normally be fine and good. But the edx.org theme has a dramatically
larger shadow set. And a lot of our cards and card-like components
were designed with a smaller shadow in mind. So I added a new
raised-card custom css class to keep as many cards looking the same.

Notably, I cannot fix the data tables on the Progress tab. So those
might have a larger shadow with this change, but that's unavoidable
and presumably the intent of the edx.org theme authors.

src/courseware/course/course-exit/CourseRecommendations.jsx

@@ -24,6 +24,11 @@ const messages = defineMessages({
     description: 'Header for recommendations section of course celebration',
     defaultMessage: 'Keep building your skills with these courses!',
   },
+  recommendationsCourseFooter: {
+    id: 'courseCelebration.recommendations.label', // not very descriptive, but is historical
+    description: 'Label on a discovery-card that lets a user know that it is a course card',
+    defaultMessage: 'Course',
+  },
   listJoin: {
     id: 'courseCelebration.recommendations.formatting.list_join',
     description: 'Joining mark or word for a list of items, use the {sp} placeholder to include space before the joining word',
@@ -73,6 +78,20 @@ function CourseCard({
     intl,
   );
 
+  const subtitle = (
+    <FormattedMessage
+      id="courseCelebration.recommendations.card.schools.label"
+      description="Screenreader label for the Schools and Partners running the course."
+      defaultMessage="Schools and Partners"
+    >{text => (
+      <>
+        <span className="sr-only">{text}: </span>
+        {truncate(formattedOwners, 40, { reserveLastWord: -1 })}
+      </>
+    )}
+    </FormattedMessage>
+  );
+
   return (
     <div
       role="group"
@@ -83,36 +102,12 @@ function CourseCard({
         className="text-decoration-none"
         onClick={onClick}
       >
-        <Card style={{ width: '270px', height: '270px' }} className="discovery-card">
-          <Card.Img variant="top" src={image.src} bsPrefix="d-card-hero" />
-          <Card.Body>
-            <Card.Title>
-              <h3 className="h4 text-gray-700 font-weight-normal">
-                {truncate(title, 70, { reserveLastWord: -1 })}
-              </h3>
-            </Card.Title>
-            <div className="text-gray-500 small">
-              <FormattedMessage
-                id="courseCelebration.recommendations.card.schools.label"
-                description="Screenreader label for the Schools and Partners running the course."
-                defaultMessage="Schools and Partners"
-              >{text => (
-                <>
-                  <span className="sr-only">{text}: </span>
-                  {truncate(formattedOwners, 40, { reserveLastWord: -1 })}
-                </>
-              )}
-              </FormattedMessage>
-            </div>
-          </Card.Body>
-          <footer className="pl-4 pb-2 x-small text-gray-500">
-            <FormattedMessage
-              id="courseCelebration.recommendations.label"
-              description="Label on a discovery-card that lets a user know that it is a course card"
-              defaultMessage="Course"
-            />
-          </footer>
-
+        <Card isClickable style={{ width: '21rem', height: '100%' }}>
+          <Card.ImageCap src={image.src} />
+          <Card.Header title={truncate(title, 70, { reserveLastWord: -1 })} subtitle={subtitle} size="sm" />
+          {/* Section is needed for internal vertical spacing to work out. If you can remove, be my guest */}
+          <Card.Section />
+          <Card.Footer textElement={intl.formatMessage(messages.recommendationsCourseFooter)} />
         </Card>
       </Hyperlink>
     </div>
@@ -161,7 +156,7 @@ function CourseRecommendations({ intl, variant }) {
   }
 
   if (recommendationsStatus === LOADING) {
-    return <PageLoading srMessage={`${intl.formatMessage(messages.loadingRecommendations)}`} />;
+    return <PageLoading srMessage={intl.formatMessage(messages.loadingRecommendations)} />;
   }
 
   const onCardClick = (url) => (e) => {

src/courseware/course/course-exit/CourseRecommendations.scss

@@ -8,23 +8,4 @@
       }
     }
   }
-
-  .discovery-card {
-    &:hover,
-    &:focus {
-      box-shadow: 0 2px 4px 2px $gray-500
-    }
-  }
-
-    .d-card-hero-top {
-      height: 102px;
-      min-height: 102px;
-      background-color: $gray-200;
-      overflow: hidden;
-      border: {
-        radius: 3px 3px 0 0;
-        bottom: 1px solid $success-100;
-      }
-    }
-
 }