Update banner and new video link

components/sponsor-banner/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BannerWrap, CloseSponsor, EmojiWrap, SponsorLogo } from './style';
+import { BannerWrap, CloseSponsor, SponsorLogo } from './style';
 
 export function SponsorBanner({ onCloseBanner = () => null }) {
   return (
@@ -11,9 +11,7 @@ export function SponsorBanner({ onCloseBanner = () => null }){
           className='alert alert-info'
         >
           <SponsorLogo src='/sponsors/youtube.svg' />
-            We now have a youtube channel
-            <EmojiWrap src={'/sponsors/heart-eyes.svg'} />
-            <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
+          We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
           
           <CloseSponsor
             onClick={(e) => {

components/sponsor-banner/style.js

@@ -2,8 +2,11 @@ import styled from 'styled-components';
 
 export const BannerWrap = styled.a`
   margin-bottom: 0;
-  background: #101010;
-  color: white;
+  //background: #101010;
+  //color: white;
+  background: #ffe0b2;
+  color: #d8362a;
+  font-weight: 600;
   border: 0;
   border-radius: 0;
   padding: 10px 15px;
@@ -12,7 +15,8 @@ export const BannerWrap = styled.a`
   transition: all 200ms;
   
   &:hover {
-    color: white;
+    background: #ffd698;
+    color: #bd2015;
     text-decoration: none;
   }
 `;
@@ -32,14 +36,14 @@ export const EmojiWrap = styled.img`
 `;
 
 export const CloseSponsor = styled.span`
-  color: white;
   text-shadow: none;
   margin-right: 15px;
   position: relative;
   top: -2px;
+  color: #101010;
   
   &:hover {
     opacity: 1;
-    color: white;
+    color: #101010;
   }
 `;

pages/watch.js

@@ -14,18 +14,18 @@ const WatchList = () => (
   <DefaultLayout>
     <Helmet title='Watch' desciption='List of videos published on our youtube channel so far' />
     <SiteNav />
-    <div className="container">
+    <div className='container'>
       <PageHeader
         title={'Watch'}
         subtitle={'List of videos published on our youtube channel so far'}>
-        <BadgesList className="mt-4">
-          <BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target="_blank">
+        <BadgesList className='mt-4'>
+          <BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target='_blank'>
             <SecondaryBadge>
               <FontAwesomeIcon icon={faYoutube} />
               YouTube Channel
             </SecondaryBadge>
           </BadgeLink>
-          <BadgeLink href="/signup">
+          <BadgeLink href='/signup'>
             <PrimaryBadge>
               <FontAwesomeIcon icon={faEnvelope} />
               Send me Updates
@@ -34,9 +34,15 @@ const WatchList = () => (
         </BadgesList>
       </PageHeader>
     </div>
-    <div className="pt-5 pb-5 bg-light border-top">
-      <div className="container">
-        <div className="row">
+    <div className='pt-5 pb-5 bg-light border-top'>
+      <div className='container'>
+        <div className='row'>
+          <RowBlock
+            openExternal
+            title={'JavaScript Fetch API'}
+            subtitle="Learn how to make API calls with vanilla JavaScript using browser's builtin Fetch API."
+            url='https://www.youtube.com/watch?v=a2rcgzludDU'
+          />
           <RowBlock
             openExternal
             title={'Scaling an Application'}