Update banner and new video link

components/sponsor-banner/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BannerWrap, CloseSponsor, EmojiWrap, SponsorLogo } from './style';
+import { BannerWrap, CloseSponsor, SponsorLogo } from './style';
 
-export function SponsorBanner({ onCloseBanner = () => null }){
+export function SponsorBanner({ onCloseBanner = () => null }) {
   return (
     <div className='row'>
       <div className='col p-0'>
@@ -11,9 +11,7 @@ export function SponsorBanner({ onCloseBanner = () => null }){
           className='alert alert-info'
         >
           <SponsorLogo src='/sponsors/youtube.svg' />
-            We now have a youtube channel
+          We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
-            <EmojiWrap src={'/sponsors/heart-eyes.svg'} />
-            <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;
+  //background: #101010;
-  color: white;
+  //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,74 +14,80 @@ 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">
+        <BadgesList className='mt-4'>
-          <BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target="_blank">
+          <BadgeLink href='https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1' target='_blank'>
             <SecondaryBadge>
-              <FontAwesomeIcon icon={faYoutube}/>
+              <FontAwesomeIcon icon={faYoutube} />
               YouTube Channel
             </SecondaryBadge>
           </BadgeLink>
-          <BadgeLink href="/signup">
+          <BadgeLink href='/signup'>
             <PrimaryBadge>
-              <FontAwesomeIcon icon={faEnvelope}/>
+              <FontAwesomeIcon icon={faEnvelope} />
               Send me Updates
             </PrimaryBadge>
           </BadgeLink>
         </BadgesList>
       </PageHeader>
     </div>
-    <div className="pt-5 pb-5 bg-light border-top">
+    <div className='pt-5 pb-5 bg-light border-top'>
-      <div className="container">
+      <div className='container'>
-        <div className="row">
+        <div className='row'>
           <RowBlock
             openExternal
-              title={ 'Scaling an Application' }
+            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'}
             subtitle='Learn how to scale an unscalable application and how to tackle the issues in production.'
             url='https://www.youtube.com/watch?v=a2rcgzludDU'
           />
           <RowBlock
             openExternal
-              title={ 'All about Promises in JavaScript' }
+            title={'All about Promises in JavaScript'}
             subtitle='Everything you need to know to about writing asynchronous code with Promises.'
             url='https://www.youtube.com/watch?v=BvrkobaCVVE'
           />
           <RowBlock
             openExternal
-              title={ 'GitHub Actions' }
+            title={'GitHub Actions'}
             subtitle='Learn what is CI/CD and how to automate your workflows with GitHub actions.'
             url='https://www.youtube.com/watch?v=nyKZTKQS_EQ'
           />
           <RowBlock
             openExternal
-              title={ 'Dependency Injection' }
+            title={'Dependency Injection'}
             subtitle='Learn how to write testable and maintainable code with Dependency Injection.'
             url='https://www.youtube.com/watch?v=0yc2UANSDiw'
           />
           <RowBlock
             openExternal
-              title={ 'CSS Variables' }
+            title={'CSS Variables'}
             subtitle='Learn how to write maintainable CSS using CSS Variables with a simple project based lesson.'
             url='https://www.youtube.com/watch?v=lgaxU7CRmxU'
           />
           <RowBlock
             openExternal
-              title={ 'All about DOM' }
+            title={'All about DOM'}
             subtitle='Learn and understand the differences between the DOM, Shadow DOM and the Virtual DOM.'
             url='https://www.youtube.com/watch?v=7Tok22qxPzQ'
           />
           <RowBlock
             openExternal
-              title={ 'Creating a React App' }
+            title={'Creating a React App'}
             subtitle='Learn how to build a react application with this project based video series.'
             url='https://www.youtube.com/watch?v=NyG7YJWJd6s&list=PLkZYeFmDuaN3NDLnBG01-sH2-nwn43mYu'
           />
           <RowBlock
             openExternal
-              title={ 'Arrays and Objects in JavaScript' }
+            title={'Arrays and Objects in JavaScript'}
             subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
             url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
           />