fix broken progress bar, adjust header layout

frontend/frontend/src/components/Home/Progress.js

@@ -46,7 +46,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
   const rightDisabled = currItem === items.length - 1;
 
   return (
-    <div className="w-full flex items-center sticky top-0 bg-white z-10 py-2">
+    <div className="w-full flex items-center sticky top-0 bg-gray-200 z-10 py-2">
       <LeftArrowIcon
         className={classnames(
           'w-8 h-8',

frontend/frontend/src/pages/App/AppTrends.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -18,11 +18,18 @@ import {
 function App() {
   const userKey = useUserKey();
   const isAuthenticated = useIsAuthenticated();
+  const [stage, setStage] = useState(isAuthenticated ? 1 : 0);
 
   const dispatch = useDispatch();
   const setUserAccess = (access) =>
     dispatch(_setUserAccess(access.token, access.privateAccess));
 
+  useEffect(() => {
+    if (isAuthenticated && stage === 0) {
+      setStage(1);
+    }
+  }, [isAuthenticated]);
+
   useEffect(() => {
     async function getPrivateAccess() {
       if (userKey && userKey.length > 0) {
@@ -40,9 +47,9 @@ function App() {
   return (
     <div className="h-screen flex flex-col">
       <Router basename="/frontend">
-        <Header mode="trends" />
+        <Header mode="trends" stage={stage} setStage={setStage} />
         <section className="bg-white text-gray-700 flex-grow">
-          <HomeScreen />
+          <HomeScreen stage={stage} setStage={setStage} />
         </section>
       </Router>
     </div>

frontend/frontend/src/pages/App/Header.js

@@ -60,98 +60,99 @@ MobileLink.propTypes = propTypes;
 
 MobileLink.defaultProps = defaultProps;
 
-const Header = ({ mode }) => {
+const Header = ({ mode, stage, setStage }) => {
   const [toggle, setToggle] = useState(false);
 
   const isAuthenticated = useIsAuthenticated();
-  const [stage, setStage] = useState(isAuthenticated ? 1 : 0);
 
   const dispatch = useDispatch();
   const logout = () => dispatch(_logout());
 
   return (
-    <div className="text-gray-100 bg-gray-100 shadow-md body-font top-0 z-50">
-      <div className="p-5 flex flex-wrap">
-        {/* GitHub Trends Logo */}
-        <Link
-          to="/"
-          className="flex items-center title-font font-medium text-gray-700 mb-0 md:mr-8"
-        >
-          <img src={appIcon} alt="logo" className="w-6 h-6" />
-          {mode === 'trends' && (
-            <span className="ml-2 text-xl">GitHub Trends</span>
-          )}
-        </Link>
-        {/* Star on GitHub */}
-        <div className="hidden md:flex ml-auto items-center text-base justify-center">
-          <a
-            href="https://www.github.com/avgupta456/github-trends"
-            target="_blank"
-            rel="noopener noreferrer"
+    <>
+      <div className="text-gray-100 bg-gray-800 shadow-md body-font z-50">
+        <div className="px-5 py-2 flex flex-wrap">
+          {/* GitHub Trends Logo */}
+          <Link
+            to="/"
+            className="flex items-center title-font font-medium text-gray-50 mb-0 md:mr-8"
           >
+            <img src={appIcon} alt="logo" className="w-6 h-6" />
+            {mode === 'trends' && (
+              <span className="ml-2 text-xl">GitHub Trends</span>
+            )}
+          </Link>
+          {/* Star on GitHub */}
+          <div className="hidden md:flex ml-auto items-center text-base justify-center">
+            <a
+              href="https://www.github.com/avgupta456/github-trends"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <button
+                type="button"
+                className="rounded-sm shadow bg-gray-200 hover:bg-gray-300 text-black px-3 py-1 flex items-center"
+              >
+                Star on
+                <GithubIcon className="ml-1.5 w-5 h-5" />
+              </button>
+            </a>
+          </div>
+          {/* Hamburger Menu */}
+          <div className="md:hidden flex ml-auto items-center">
             <button
               type="button"
-              className="rounded-sm shadow bg-gray-700 hover:bg-gray-800 text-gray-50 px-3 py-2 flex items-center"
+              className="outline-none"
+              onClick={() => setToggle(!toggle)}
             >
-              Star on
-              <GithubIcon className="ml-1.5 w-5 h-5" />
+              <HamburgerIcon className="w-6 h-6 text-gray-700" />
             </button>
-          </a>
+          </div>
         </div>
-        {/* Hamburger Menu */}
-        <div className="md:hidden flex ml-auto items-center">
-          <button
-            type="button"
-            className="outline-none"
-            onClick={() => setToggle(!toggle)}
-          >
-            <HamburgerIcon className="w-6 h-6 text-gray-700" />
-          </button>
-        </div>
-      </div>
-      {/* Hamburger Dropdown */}
-      <div className={classnames('p-5 pt-0', !toggle && 'hidden')}>
-        {mode === 'trends' && (
-          <>
-            <MobileLink to="/user" onClick={() => setToggle(false)}>
-              Dashboard
-            </MobileLink>
-          </>
-        )}
-        {isAuthenticated ? (
-          <>
-            {mode === 'trends' && (
-              <MobileLink to="/settings" onClick={() => setToggle(false)}>
-                Settings
+        {/* Hamburger Dropdown */}
+        <div className={classnames('p-5 pt-0', !toggle && 'hidden')}>
+          {mode === 'trends' && (
+            <>
+              <MobileLink to="/user" onClick={() => setToggle(false)}>
+                Dashboard
               </MobileLink>
-            )}
-            <MobileLink
-              to="/"
-              onClick={() => {
-                setToggle(false);
-                logout();
-              }}
-            >
-              Sign Out
-            </MobileLink>
-          </>
-        ) : (
-          <>
-            <a
-              className="block text-sm px-2 my-2 py-2 rounded-sm bg-gray-200 text-gray-700"
-              href={GITHUB_PUBLIC_AUTH_URL}
-            >
-              Login
-            </a>
-            <Link
-              to="/signup"
-              onClick={() => setToggle(false)}
-              className="block text-sm px-2 my-2 py-2 rounded-sm bg-blue-500 text-white"
-            >
-              Sign Up
-            </Link>
-          </>
-        )}
+            </>
+          )}
+          {isAuthenticated ? (
+            <>
+              {mode === 'trends' && (
+                <MobileLink to="/settings" onClick={() => setToggle(false)}>
+                  Settings
+                </MobileLink>
+              )}
+              <MobileLink
+                to="/"
+                onClick={() => {
+                  setToggle(false);
+                  logout();
+                }}
+              >
+                Sign Out
+              </MobileLink>
+            </>
+          ) : (
+            <>
+              <a
+                className="block text-sm px-2 my-2 py-2 rounded-sm bg-gray-800 text-gray-700"
+                href={GITHUB_PUBLIC_AUTH_URL}
+              >
+                Login
+              </a>
+              <Link
+                to="/signup"
+                onClick={() => setToggle(false)}
+                className="block text-sm px-2 my-2 py-2 rounded-sm bg-blue-500 text-white"
+              >
+                Sign Up
+              </Link>
+            </>
+          )}
+        </div>
       </div>
       <ProgressBar
         items={[
@@ -164,12 +165,14 @@ const Header = ({ mode }) => {
         currItem={stage}
         setCurrItem={setStage}
       />
-    </div>
+    </>
   );
 };
 
 Header.propTypes = {
   mode: PropTypes.string.isRequired,
+  stage: PropTypes.number.isRequired,
+  setStage: PropTypes.func.isRequired,
 };
 
 export default Header;

frontend/frontend/src/pages/Home/Home.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
 import BounceLoader from 'react-spinners/BounceLoader';
 
 import { v4 as uuidv4 } from 'uuid';
@@ -24,7 +25,7 @@ import {
   usePrivateAccess,
 } from '../../redux/selectors/userSelectors';
 
-const HomeScreen = () => {
+const HomeScreen = ({ stage, setStage }) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const userId = useUserId();
@@ -35,14 +36,6 @@ const HomeScreen = () => {
 
   const login = (newUserId, userKey) => dispatch(_login(newUserId, userKey));
 
-  // for all stages
-  const [stage, setStage] = useState(isAuthenticated ? 1 : 0);
-  useEffect(() => {
-    if (isAuthenticated && stage === 0) {
-      setStage(1);
-    }
-  }, [isAuthenticated]);
-
   // for stage one
   const [selectedCard, setSelectedCard] = useState('stats');
   const [imageSrc, setImageSrc] = useState(`?username=${userId}`);
@@ -347,4 +340,9 @@ const HomeScreen = () => {
   );
 };
 
+HomeScreen.propTypes = {
+  stage: PropTypes.number.isRequired,
+  setStage: PropTypes.func.isRequired,
+};
+
 export default HomeScreen;