fix progress bar stickiness, adjust colors and spacing etc.

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

@@ -14,7 +14,7 @@ const ProgressSection = ({ num, item, passed, onClick }) => {
     <button
       className={classnames(
         'w-1/4 flex flex-col mx-2 p-2 border-t-4 cursor-pointer',
-        passed ? 'border-blue-500' : 'border-gray-400',
+        passed ? 'border-blue-500' : 'border-gray-500',
       )}
       type="button"
       onClick={onClick}
@@ -22,12 +22,12 @@ const ProgressSection = ({ num, item, passed, onClick }) => {
       <div
         className={classnames(
           'text-lg font-bold',
-          passed ? 'text-blue-500' : 'text-gray-400',
+          passed ? 'text-blue-500' : 'text-gray-500',
         )}
       >
         {`Step ${num + 1}`}
       </div>
-      <div className={classnames(passed ? 'text-gray-700' : 'text-gray-400')}>
+      <div className={classnames(passed ? 'text-gray-700' : 'text-gray-500')}>
         {item}
       </div>
     </button>
@@ -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-gray-200 z-10 py-2">
+    <div className="w-full flex items-center sticky top-0 bg-gray-300 z-10 pt-3 pb-1 px-20 shadow-md">
       <LeftArrowIcon
         className={classnames(
           'w-8 h-8',

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

@@ -45,7 +45,7 @@ function App() {
   }, [userKey]);
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="min-h-screen flex flex-col">
       <Router basename="/frontend">
         <Header mode="trends" stage={stage} setStage={setStage} />
         <section className="bg-white text-gray-700 flex-grow">

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

@@ -70,7 +70,7 @@ const Header = ({ mode, stage, setStage }) => {
 
   return (
     <>
-      <div className="text-gray-100 bg-gray-800 shadow-md body-font z-50">
+      <div className="text-gray-100 bg-gray-800 shadow-md body-font z-20">
         <div className="px-5 py-2 flex flex-wrap">
           {/* GitHub Trends Logo */}
           <Link

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

@@ -229,7 +229,7 @@ const HomeScreen = ({ stage, setStage }) => {
   }
 
   return (
-    <div className="h-full px-2 py-4 lg:p-8 text-gray-600 body-font">
+    <div className="h-full px-2 lg:px-8 text-gray-600 body-font">
       <div className="flex flex-col">
         <div className="m-4 rounded-sm">
           <div className="lg:p-4">