From 9fb60ab7159f5d0a6b8a5ea2e6e5b7ab8772bdd7 Mon Sep 17 00:00:00 2001
From: Mithun Kamath <callmekatootie@gmail.com>
Date: Wed, 13 Nov 2019 19:36:40 +0530
Subject: [PATCH] Update sponsor component to display new sponsors for TCO19

---
 components/Sponsors.js     | 23 +++++++++++++--------
 pages/finalists.js         |  6 +++---
 pages/full-screen-image.js | 15 +++++++++++++-
 pages/get-ready.js         |  3 +--
 pages/live-stream.js       |  3 ++-
 pages/prize-overview.js    | 20 +++++++++++-------
 pages/problem-statement.js |  2 +-
 pages/round-ended.js       | 22 +++++++++++++++-----
 pages/sponsor.js           | 20 +++++++++++++-----
 pages/winners.js           | 42 +++++++-------------------------------
 10 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/components/Sponsors.js b/components/Sponsors.js
index b9339d9..fa56394 100644
--- a/components/Sponsors.js
+++ b/components/Sponsors.js
@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types'
 
 const sponsors = (props) => {
-  const { showFlatDesign, hideMainSponsor, showDivider, mainSponsor, otherSponsors, smallerSponsor } = props
+  const { showFlatDesign, showDivider, otherSponsors, smallerSponsor } = props
+  const sponsorGroup1 = otherSponsors.slice(0, 7)
+  const sponsorGroup2 = otherSponsors.slice(8, otherSponsors.length)
   let containerClass = (showFlatDesign) ? 'flatContainer' : (smallerSponsor) ? 'small' : ''
   return (<div className={`container ${containerClass}`}>
     {showDivider && <img className='divider' src='https://github.com/static/img/divider.png' alt='divider' />}
@@ -10,10 +12,14 @@ const sponsors = (props) => {
         SPONSORED BY
       </div>
     }
-    { !hideMainSponsor && <img className='sponsor' src={mainSponsor} />}
     <div className='otherSponsorsContainer'>
       {
-        otherSponsors.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
+        sponsorGroup1.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
+      }
+    </div>
+    <div className='otherSponsorsContainer'>
+      {
+        sponsorGroup2.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} alt='sponsor' />))
       }
     </div>
     <style jsx>
@@ -27,7 +33,7 @@ const sponsors = (props) => {
         }
 
         .container.small {
-          margin-bottom: 0px;
+          margin-bottom: 10px;
         }
 
         .flatContainer {
@@ -86,10 +92,13 @@ const sponsors = (props) => {
         .otherSponsor {
           margin: 0px 30px;
           height: 24px;
+          width: auto;
+          opacity: 0.6;
         }
 
         .small .otherSponsor {
           margin: 0px 20px;
+          width: auto;
         }
 
         .flatContainer .otherSponsorsContainer .otherSponsor {
@@ -137,16 +146,14 @@ sponsors.propTypes = {
   showDivider: PropTypes.bool,
   mainSponsor: PropTypes.string,
   otherSponsors: PropTypes.arrayOf(PropTypes.string),
-  smallerSponsor: PropTypes.bool,
-  hideMainSponsor: PropTypes.bool
+  smallerSponsor: PropTypes.bool
 }
 
 sponsors.defaultProps = {
   showDivider: false,
   showFlatDesign: false,
   mainSponsor: undefined,
-  smallerSponsor: false,
-  hideMainSponsor: false
+  smallerSponsor: false
 }
 
 export default sponsors
diff --git a/pages/finalists.js b/pages/finalists.js
index f3786a5..6953e6f 100644
--- a/pages/finalists.js
+++ b/pages/finalists.js
@@ -138,7 +138,7 @@ const Finalists = (props) => {
           </div>
         </div>
       </main>
-      <Sponsors {...props} hideMainSponsor showFlatDesign />
+      <Sponsors {...props} smallerSponsor />
       <Footer {...props} />
       <style jsx>
         {`
@@ -160,7 +160,7 @@ const Finalists = (props) => {
             align-items: center;
             display: flex;
             flex-direction: column;
-            min-height: 800px;
+            min-height: 760px;
             position: relative;
           }
 
@@ -172,7 +172,7 @@ const Finalists = (props) => {
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            margin-top: 40px;
+            margin-top: 20px;
             text-transform: uppercase;
             position: relative;
             z-index: 4;
diff --git a/pages/full-screen-image.js b/pages/full-screen-image.js
index 325ffeb..79d6c22 100644
--- a/pages/full-screen-image.js
+++ b/pages/full-screen-image.js
@@ -98,8 +98,21 @@ class FullScreenImage extends React.Component {
               display: flex;
               flex-direction: column;
               flex-shrink: 1;
-              background-image: linear-gradient(270deg,rgba(0, 43, 119, 0.5) 0%,rgba(0, 18, 101, 0.5) 100%,rgba(0, 13, 61, 0.5) 0%);
+              background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
               margin-bottom: 10px;
+              position: relative;
+            }
+
+            .main::before {
+              content: "";
+              width: 363.1px;
+              background: rgba(112, 112, 112, 0.12);
+              height: 2px;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
             }
 
             .content-image {
diff --git a/pages/get-ready.js b/pages/get-ready.js
index e9e7b0d..0e31a65 100644
--- a/pages/get-ready.js
+++ b/pages/get-ready.js
@@ -4,7 +4,6 @@ import fetch from 'isomorphic-unfetch'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
 import PageHead from '../components/PageHead'
-import Sponsors from '../components/Sponsors'
 import FinalistTable from '../components/FinalistTable'
 import { checkForMainSponsor } from '../common/helper'
 
@@ -188,7 +187,7 @@ const GetReady = (props) => {
           </div>
           {finalistsLayout(props)}
         </main>
-        <Sponsors {...props} hideMainSponsor smallerSponsor showFlatDesign />
+        {/* <Sponsors {...props} smallerSponsor /> */}
         <Footer {...props} />
       </div>
       <FinalistTable
diff --git a/pages/live-stream.js b/pages/live-stream.js
index dd26da3..c441ccb 100644
--- a/pages/live-stream.js
+++ b/pages/live-stream.js
@@ -94,12 +94,13 @@ class LiveStream extends React.Component {
               allowFullScreen
             />
           </main>
-          <Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
+          <Sponsors {...this.props} smallerSponsor />
           <Footer {...this.props} />
         </div>
         { this.props.showScoreboard && <FinalistTable
           {...this.props}
           finalists={this.state.leaderboard}
+          isMini
           // smallerDesign
         />}
         <style jsx global>{`
diff --git a/pages/prize-overview.js b/pages/prize-overview.js
index 7386340..6a6d5e6 100644
--- a/pages/prize-overview.js
+++ b/pages/prize-overview.js
@@ -155,15 +155,13 @@ class PrizeOverview extends React.Component {
           <PageHead />
           <Header {...this.props} smallHeader />
           <main className='main'>
-            <img className='hexa' src='https://github.com/static/img/largeHexa.png' />
             <div className='message'>
-              <img src='https://github.com/static/img/hexagon.png' alt='hex' />
               <div className='subtitle'>TCO Champions</div>
               <div className='title'>Prize overview</div>
             </div>
             {prizesLayout(this.props.prizes)}
           </main>
-          <Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
+          <Sponsors {...this.props} smallerSponsor />
           <Footer {...this.props} />
         </div>
         { this.props.showScoreboard && <FinalistTable
@@ -181,7 +179,7 @@ class PrizeOverview extends React.Component {
           {`
             .container {
               display: flex;
-              background: url("https://github.com/static/img/background.png") no-repeat center center fixed;
+              background: url('https://github.com/static/img/background.png') no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
@@ -203,13 +201,21 @@ class PrizeOverview extends React.Component {
               display: flex;
               flex-direction: column;
               flex-shrink: 1;
-              background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
+              background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
               margin-bottom: 10px;
+              position: relative;
             }
 
-            .hexa {
+            .main::before {
+              content: "";
+              width: 363.1px;
+              background: rgba(112, 112, 112, 0.12);
+              height: 2px;
               position: absolute;
-              width: 550px;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
             }
 
             .message {
diff --git a/pages/problem-statement.js b/pages/problem-statement.js
index 77b2a06..103c95b 100644
--- a/pages/problem-statement.js
+++ b/pages/problem-statement.js
@@ -103,7 +103,7 @@ class ProblemStatement extends React.Component {
             <div className='description'>{this.props.problemDescription}</div>
           </main>
           <div className='problemStatementSponsor'>
-            <Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
+            <Sponsors {...this.props} smallerSponsor />
           </div>
           <Footer {...this.props} />
         </div>
diff --git a/pages/round-ended.js b/pages/round-ended.js
index 6100266..cbad323 100644
--- a/pages/round-ended.js
+++ b/pages/round-ended.js
@@ -84,19 +84,18 @@ class RoundEnded extends React.Component {
           <PageHead />
           <Header {...this.props} smallHeader />
           <main className='main'>
-            <img className='hexa' src='https://github.com/static/img/largeHexa.png' />
             <div className='message'>
-              <img src='https://github.com/static/img/hexagon.png' alt='hex' />
               <div className='subtitle'>{this.props.track + ' ' + this.props.round}</div>
               <div className='title'>ENDED</div>
             </div>
           </main>
-          <Sponsors {...this.props} hideMainSponsor smallerSponsor showFlatDesign />
+          <Sponsors {...this.props} smallerSponsor />
           <Footer {...this.props} />
         </div>
         { this.props.showScoreboard && <FinalistTable
           {...this.props}
           finalists={this.state.leaderboard}
+          isMini
         />}
         <style jsx global>{`
           #__next {
@@ -108,7 +107,7 @@ class RoundEnded extends React.Component {
           {`
             .container {
               display: flex;
-              background: url("https://github.com/static/img/background.png") no-repeat center center fixed;
+              background: url('https://github.com/static/img/background.png') no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
@@ -130,8 +129,21 @@ class RoundEnded extends React.Component {
               display: flex;
               flex-direction: column;
               flex-shrink: 1;
-              background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
+              background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
               margin-bottom: 10px;
+              position: relative;
+            }
+
+            .main::before {
+              content: "";
+              width: 363.1px;
+              background: rgba(112, 112, 112, 0.12);
+              height: 2px;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
             }
 
             .hexa {
diff --git a/pages/sponsor.js b/pages/sponsor.js
index fda4423..3fd5506 100644
--- a/pages/sponsor.js
+++ b/pages/sponsor.js
@@ -85,10 +85,7 @@ class SponsorPage extends React.Component {
           <PageHead />
           <Header {...this.props} smallHeader />
           <main className='main'>
-            <img className='hexa' src='https://github.com/static/img/largeHexa.png' />
             <div className='message'>
-              <img src='https://github.com/static/img/hexagon.png' alt='hex' />
-              {/* <div className='subtitle'>players</div> */}
               <div className='title'>SPONSORED BY</div>
             </div>
             <img className='sponsorImg' src={this.props.mainSponsor} />
@@ -113,7 +110,7 @@ class SponsorPage extends React.Component {
           {`
             .container {
               display: flex;
-              background: url("https://github.com/static/img/background.png") no-repeat center center fixed;
+              background: url('https://github.com/static/img/background.png') no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
@@ -135,8 +132,21 @@ class SponsorPage extends React.Component {
               display: flex;
               flex-direction: column;
               flex-shrink: 1;
-              background-image: linear-gradient(270deg, rgba(0, 78, 119, 0) 0%, #004165 51.72%, rgba(0, 40, 61, 0) 100%);
+              background-image: linear-gradient(rgba(0,78,119,0.1) 0%,rgba(0,18,101,0.1) 51.72%,rgba(0,40,61,0.2) 100%);
               margin-bottom: 10px;
+              position: relative;
+            }
+
+            .main::before {
+              content: "";
+              width: 363.1px;
+              background: rgba(112, 112, 112, 0.12);
+              height: 2px;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
             }
 
             .hexa {
diff --git a/pages/winners.js b/pages/winners.js
index 59e32d3..cc66100 100644
--- a/pages/winners.js
+++ b/pages/winners.js
@@ -5,6 +5,7 @@ import fetch from 'isomorphic-unfetch'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
 import PageHead from '../components/PageHead'
+import Sponsors from '../components/Sponsors'
 import { checkForMainSponsor } from '../common/helper'
 
 const rowSize = {
@@ -182,27 +183,6 @@ const cardLayout = (profile, primaryColor, position, length) => {
   )
 }
 
-const otherSponsorsLayout = (sponsors) => {
-  return (
-    <div className='container'>
-      {sponsors.map((sponsor, i) => (<img key={`${sponsor}${i}`} className='otherSponsor' src={sponsor} />))}
-      <style jsx>
-        {`
-          .container {
-            height: 52px;
-            display: flex;
-            align-items: center;
-          }
-          .otherSponsor {
-            margin: 0px 30px;
-            height: 28px;
-          }
-        `}
-      </style>
-    </div>
-  )
-}
-
 const finalistsLayout = (profiles, props) => {
   const { primaryColor, finalists, prizes } = props
   const rows = rowSize[profiles.length]
@@ -267,7 +247,7 @@ const prizesLayout = (props, showWinners) => {
       >
         <img src='https://github.com/static/img/silverTrophy.png' />
         <div className='money'>
-          ${prizes[1]}
+          ${parseFloat(prizes[1]).toLocaleString()}
         </div>
         {showWinners && <div>
           <img className='smallBg smallBg2Place' src={`/static/img/blob/blob-2-place.png`} />
@@ -290,7 +270,7 @@ const prizesLayout = (props, showWinners) => {
       }}>
         <img src='https://github.com/static/img/goldTrophy.png' />
         <div className='money money1Place'>
-          ${prizes[0]}
+          ${parseFloat(prizes[0]).toLocaleString()}
         </div>
         {showWinners && <div>
           <img className='largeBg' src={`/static/img/blob/blob-1-place.png`} />
@@ -312,7 +292,7 @@ const prizesLayout = (props, showWinners) => {
       }}>
         <img src='https://github.com/static/img/bronzeTrophy.png' />
         <div className='money'>
-          ${prizes[2]}
+          ${parseFloat(prizes[2]).toLocaleString()}
         </div>
         {showWinners && <div>
           <img className='smallBg smallBg3Place' src={`/static/img/blob/blob-3-place.png`} />
@@ -511,7 +491,7 @@ const prizesLayout = (props, showWinners) => {
 }
 
 const WinnersLayout = (props) => {
-  const { finalists, showWinners, otherSponsors, mainSponsor, prizes } = props
+  const { finalists, showWinners, prizes } = props
   const profiles = (showWinners) ? finalists.slice(prizes.length) : finalists
   return (
     <div className='container'>
@@ -521,22 +501,14 @@ const WinnersLayout = (props) => {
         <div className='prizeContainer'>
           <div className='message'>
             <img src='https://github.com/static/img/hexagon.png' alt='hex' />
-            <div className='subtitle'>ANNOuncing</div>
+            <div className='subtitle'>ANNOUNCING</div>
             <div className='title'>WINNERS</div>
           </div>
           {prizesLayout(props, showWinners)}
         </div>
         {finalistsLayout(profiles, props)}
       </main>
-      <div className='sponsorContainer'>
-        <img className='sponsorContainerSeparator' src='https://github.com/static/img/footerSeparator.png' alt='separator' />
-        <div className='sponsorhalf'>
-          {otherSponsorsLayout(otherSponsors)}
-        </div>
-        <div className='sponsorhalf'>
-          <img className='sponsorImg' src={mainSponsor} />
-        </div>
-      </div>
+      <Sponsors {...props} showFlatDesign />
       <Footer {...props} />
       <style jsx>
         {`