fix: upgrade paraagon and make required Hero media query changes (#179)

* fix: required Hero media query changes

* feat: Upgrade paragon and apply media query fix

* feat: unused classes

package.json

@@ -40,7 +40,7 @@
     "@edx/frontend-component-header": "2.4.1",
     "@edx/frontend-enterprise-catalog-search": "2.2.5",
     "@edx/frontend-platform": "1.14.3",
-    "@edx/paragon": "^16.16.0",
+    "@edx/paragon": "^17.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-regular-svg-icons": "5.15.3",

src/components/hero/Hero.jsx

@@ -1,6 +1,6 @@
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Container, ExtraExtraLarge, ExtraLarge, Image, Large, Medium,
+  Container, Image, useMediaQuery, breakpoints,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -39,25 +39,29 @@ LargeImage.propTypes = {
   alt: PropTypes.string.isRequired,
 };
 
+const Desktop = ({ children }) => {
+  const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
+  return isDesktop ? children : null;
+};
+const Tablet = ({ children }) => {
+  const isTablet = useMediaQuery({ minWidth: breakpoints.medium.minWidth, maxWidth: breakpoints.medium.maxWidth });
+  return isTablet ? children : null;
+};
+
 const Hero = ({ intl, text, highlight }) => {
   const alt = intl.formatMessage(messages['hero.image.alt']);
+
   return (
     <section className="hero">
       <Container size="lg" className="hero__content">
         <h1 className="display-1"><Highlighted text={text} highlight={highlight} /></h1>
         <div>
-          <Large>
-            <SmallImage alt={alt} />
-          </Large>
-          <Medium>
-            <SmallImage alt={alt} />
-          </Medium>
-          <ExtraExtraLarge>
+          <Desktop>
             <LargeImage alt={alt} />
-          </ExtraExtraLarge>
-          <ExtraLarge>
+          </Desktop>
+          <Tablet>
             <LargeImage alt={alt} />
-          </ExtraLarge>
+          </Tablet>
         </div>
       </Container>
     </section>