Merge pull request #109 from saahil-mahato/data-correction

fix: correct contributors numbers and designs
leapfrogtechnology · Sep 20, 2024 · 0ba3191 · 0ba3191
2 parents 87c7bf1 + 2bec86a
commit 0ba3191
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 24 deletions.
diff --git a/src/assets/scss/base/_base.scss b/src/assets/scss/base/_base.scss
@@ -27,7 +27,7 @@ body {
 	font-weight: 550;
 	text-rendering: optimizeLegibility;
 	line-height: $base__body__line;
-	background: $primary;
+	background: #151712;
 	color: getColor('white.base');
 }
 

diff --git a/src/assets/scss/components/_button.scss b/src/assets/scss/components/_button.scss
@@ -23,12 +23,13 @@
 	}
 
 	&.btn-check {
-		background: rgba(21, 23, 18, 0.20) !important;
+		color: $white;
+		background: #151712;
 		padding-left: 24px;
-		border-radius: 8px 0 0 8px;
+		border-radius: 0 8px 8px 0;
 
 		&:hover {
-			background: rgba(21, 23, 18, 0.13) !important;
+			background: $buttonHover;
 		}
 
 		&:focus-visible {
@@ -66,6 +67,23 @@
 	}
 }
 
+.checker-input {
+	outline: none;
+	border: none;
+	max-width: 600px;
+
+	background: rgba(21, 23, 18, 0.20) !important;
+	padding-left: 24px;
+	border-radius: 8px 0 0 8px;
+
+	&:hover {
+		background: rgba(21, 23, 18, 0.13) !important;
+	}
+
+	&:focus-visible {
+		background: rgba(21, 23, 18, 0.10) !important;
+	}
+}
 
 .btn-facebook,
 .btn-twitter {

diff --git a/src/components/SiteHeader.js b/src/components/SiteHeader.js
@@ -39,7 +39,7 @@ const SiteHeader = () => {
 
     return (
         <Fragment>
-            <header className='header pt-6x pt-md-12x'>
+            <header className='header py-10 pt-md-12x bg-primary'>
                 <div className="container">
                     <div className="d-flex align-items-center justify-content-between">
 

diff --git a/src/components/UsernameForm/CheckButton.js b/src/components/UsernameForm/CheckButton.js
@@ -7,7 +7,7 @@ const CheckButton = () => (
       outline: 'none'
       /* Tailwind's outline-none class doesn't remove default outlines */
     }}
-    className="btn btn-check border-radius-tbl-none"
+    className="btn btn-check"
   >
     Check
   </button>

diff --git a/src/components/UsernameForm/UsernameInput.js b/src/components/UsernameForm/UsernameInput.js
@@ -13,10 +13,7 @@ const UsernameInput = ({ value, onChange }) => (
     autoCapitalize="none"
     autoCorrect="off"
     autoComplete="off"
-    style={{
-      outline: 'none', background: '#15171226', border: '1px solid #15171233', 'maxWidth': '600px'
-    }}
-    className="bn br--left leading-tight rounded-l flex-auto border-2 pt-2 pr-4 pb-2 pl-4 responsive-checker"
+    className="bn br--left leading-tight rounded-l flex-auto border-2 pt-2 pr-4 pb-2 pl-4 responsive-checker checker-input"
   />
 );
 

diff --git a/src/pages/Guidelines/index.js b/src/pages/Guidelines/index.js
@@ -4,8 +4,8 @@ import SiteHeader from 'components/SiteHeader';
 const Guidelines = () => (
   <Fragment>
     <SiteHeader />
-    <div className="container py-14x text-black">
-      <h2>Frogtoberfest Participation Guidelines</h2>
+    <div className="container py-14x text-white bg-grey-light-dark">
+      <h2 className='text-primary'>Frogtoberfest Participation Guidelines</h2>
       <div>
         <div className="my-10x">
           <p>
@@ -25,7 +25,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Wrench" className="mr-2x">
               🔧
             </span>
-            <span className='text-black'>Meaningful code changes</span>
+            <span className='text-primary'>Meaningful code changes</span>
           </h4>
           <p className="pt-5x">
             Contributions should focus on meaningful code changes, such as bug fixes, new features, or improvements,
@@ -37,7 +37,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Orange books" className="mr-2x">
               📚
             </span>
-            <span className='text-black'>Documentation enhancements</span>
+            <span className='text-primary'>Documentation enhancements</span>
           </h4>
           <p className="pt-5x">
             Encourage participants to contribute to project documentation, including updates, corrections, or
@@ -49,7 +49,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Magnifying glass" className="mr-2x">
               🔍
             </span>
-            <span className='text-black'>Issue tracking</span>
+            <span className='text-primary'>Issue tracking</span>
           </h4>
           <p className="pt-5x">
             Participants should prioritize issues or tasks listed in the project's issue tracker. This ensures alignment
@@ -61,7 +61,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Light bulb" className="mr-2x">
               💡
             </span>
-            <span className='text-black'>Value-added contributions</span>
+            <span className='text-primary'>Value-added contributions</span>
           </h4>
           <p className="pt-5x">
             Stress the importance of making contributions that provide clear value to the open-source project and its
@@ -73,7 +73,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Glowing star" className="mr-2x">
               🌟
             </span>
-            <span className='text-black'>Quality over quantity</span>
+            <span className='text-primary'>Quality over quantity</span>
           </h4>
           <p className="pt-5x">
             The emphasis on quality has resulted in participants submitting fewer, but more substantial, PRs. This
@@ -85,7 +85,7 @@ const Guidelines = () => (
             <span role="img" aria-label="Eye in speech bubble" className="mr-2x">
               👁️‍🗨️
             </span>
-            <span className='text-black'>Code review process</span>
+            <span className='text-primary'>Code review process</span>
           </h4>
           <p className="pt-5x">
             The code review process will be conducted after the event's completion to maintain the quality of

diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
@@ -89,7 +89,7 @@ const Home = () => {
     <Fragment>
       <SiteHeader></SiteHeader>
       <main>
-        <section className="banner py-32 text-center text-lg-left">
+        <section className="banner py-20 text-center text-lg-left">
           <div className="container">
             <div className="d-flex flex-column flex-lg-row align-items-center justify-content-between lg:items-center">
               <div className="banner__image order-1 order-lg-2 flex-9 pr-lg-25x pt-5 pb-5 md:p-0">
@@ -109,7 +109,7 @@ const Home = () => {
                   <a className='text-black' href="https://frog.ly/frogtoberfest-2024" target='_blank' rel="noopener noreferrer">
                     <button className='btn btn-primary'>Participate</button>
                   </a>
-                  <a className='text-white' href="https://frogtoberfest-leaderboard.lftechnology.com/" target='_blank' rel="noopener noreferrer">
+                  <a hidden className='text-white' href="https://frogtoberfest-leaderboard.lftechnology.com/" target='_blank' rel="noopener noreferrer">
                     <button className='btn btn-link text-black'>Leaderboard</button>
                   </a>
                 </div>
@@ -283,7 +283,7 @@ const Home = () => {
                 exclusive merch and
                 ribbiting perks for all your contributions</p>
               <ul className='has-bullet'>
-                <li>Top 15 contributors receive exclusive Frogtoberfest SWAG.</li>
+                <li>Top 20 contributors receive exclusive Frogtoberfest SWAG.</li>
                 <li>All eligible participants receive a digital certificate of participation.</li>
                 <li>Get featured on Leapfrog&apos;s social media and newsletters</li>
               </ul>
@@ -416,7 +416,7 @@ const Home = () => {
                     <li>Ensure all PRs are valid.</li>
                   </ol>
 
-                  Note: The top 15 contributors who fulfill these requirements will become eligible to receive the coveted Frogtoberfest SWAG as a token of recognition for their valuable contributions.
+                  Note: The top 20 contributors who fulfill these requirements will become eligible to receive the coveted Frogtoberfest SWAG as a token of recognition for their valuable contributions.
                 </p>
               </div>
               <div className="accordion-content">
@@ -427,7 +427,7 @@ const Home = () => {
                   <i className="icon fa-solid fa-plus ml-auto"></i>
                 </header>
                 <p className="accordion-content-description mr-lg-15x">
-                  The top 15 contributors and 10 Leapfroggers in the leaderboard who fulfill the criteria will become eligible to receive the coveted Frogtoberfest SWAG as a token of recognition for their valuable contributions.
+                  The top 20 contributors in the leaderboard who fulfill the criteria will become eligible to receive the coveted Frogtoberfest SWAG as a token of recognition for their valuable contributions.
                 </p>
               </div>
               <div className="accordion-content">

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -698,6 +698,10 @@ table {
   background-color: #22292f;
 }
 
+.bg-primary {
+  background-color: #9ee83f;
+}
+
 .bg-grey-darkest {
   background-color: #3d4852;
 }
@@ -711,7 +715,7 @@ table {
 }
 
 .bg-grey-light-dark {
-  background-color: #393939;
+  background-color: #151712;
 }
 
 .bg-grey {