From a24ecfbd859f8e7a2c8c75a48644f12df008fd8a Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Sun, 5 May 2019 21:44:46 +0200
Subject: [PATCH] fix(client): use picture and source to display correct logo
 (#35939)

---
 .../components/Header/components/NavLogo.js   | 27 +++++++------------
 client/src/components/Header/header.css       | 17 ------------
 2 files changed, 9 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Header/components/NavLogo.js b/client/src/components/Header/components/NavLogo.js
index 005fe3cf63..9773a324e5 100644
--- a/client/src/components/Header/components/NavLogo.js
+++ b/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>
   );
 }
 
diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css
index f709288a45..b7e05691f5 100644
--- a/client/src/components/Header/header.css
+++ b/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%;