fix(client): use picture and source to display correct logo (#35939)

client/src/components/Header/components/NavLogo.js

@@ -1,28 +1,19 @@
 import React from 'react';
-import Media from 'react-responsive';
 
 const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg';
 const fCCglyph = 'https://s3.amazonaws.com/freecodecamp/FFCFire.png';
 
 function NavLogo() {
   return (
-    <Media query='(min-width: 735px)'>
-      {matches =>
-        matches ? (
-          <img
-            alt='learn to code at freeCodeCamp logo'
-            className='nav-logo logo'
-            src={fCClogo}
-          />
-        ) : (
-          <img
-            alt='learn to code at freeCodeCamp logo'
-            className='nav-logo logo-glyph'
-            src={fCCglyph}
-          />
-        )
-      }
-    </Media>
+    <picture>
+      <source media='(max-width: 734px)' srcSet={fCCglyph} />
+      <source media='(min-width: 735px)' srcSet={fCClogo} />
+      <img
+        alt='learn to code at freeCodeCamp logo'
+        className='nav-logo'
+        src={fCCglyph}
+      />
+    </picture>
   );
 }
 

client/src/components/Header/header.css

@@ -127,28 +127,11 @@ header {
 
 /* Navbar logo */
 
-.logo-glyph {
-  height: 30px;
-  width: auto;
-}
-
-.logo {
-  display: none;
-}
-
 .logoContainer {
   margin-right: 10px;
 }
 
 @media (min-width: 735px) {
-  .logo-glyph {
-    display: none;
-  }
-
-  .logo {
-    display: block;
-  }
-
   .logoContainer {
     margin-right: 50px;
     width: 25%;