Update banner and new video link

components/sponsor-banner/index.js

@@ -1,26 +1,24 @@
 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'>
         <BannerWrap
-            href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
-            target='_blank'
-            className='alert alert-info'
+          href={`https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1`}
+          target='_blank'
+          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>
-
-            <CloseSponsor
-              onClick={(e) => {
-                e.preventDefault();
-                onCloseBanner();
-              }}
-              className='close'>&times;</CloseSponsor>
+          <SponsorLogo src='/sponsors/youtube.svg' />
+          We now have a youtube channel. <span className='d-none d-sm-inline-block'>Subscribe for the video content.</span>
+          
+          <CloseSponsor
+            onClick={(e) => {
+              e.preventDefault();
+              onCloseBanner();
+            }}
+            className='close'>&times;</CloseSponsor>
         </BannerWrap>
       </div>
     </div>

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,77 +14,83 @@ 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}/>
+              <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="container">
-        <div className="row">
-            <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' }
-              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' }
-              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' }
-              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' }
-              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' }
-              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' }
-              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' }
-              subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
-              url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
-            />
+    <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'}
+            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'}
+            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'}
+            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'}
+            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'}
+            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'}
+            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'}
+            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'}
+            subtitle='Learn how to manipulate arrays and objects in JavaScript with built-in JavaScript methods.'
+            url='https://www.youtube.com/watch?v=n3NKGsM3iEw'
+          />
         </div>
       </div>
     </div>