From b3f0e25ecda01646063a2c57f5da6463edb539c7 Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Thu, 27 Nov 2025 21:55:43 +0100
Subject: [PATCH] fix progress bar stickiness, adjust colors and spacing etc.

---
 frontend/frontend/src/components/Home/Progress.js | 8 ++++----
 frontend/frontend/src/pages/App/AppTrends.js      | 2 +-
 frontend/frontend/src/pages/App/Header.js         | 2 +-
 frontend/frontend/src/pages/Home/Home.js          | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js
index 1c22d6cc..1f6bb3d5 100644
--- a/frontend/frontend/src/components/Home/Progress.js
+++ b/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',
diff --git a/frontend/frontend/src/pages/App/AppTrends.js b/frontend/frontend/src/pages/App/AppTrends.js
index 2978cab0..df04de31 100644
--- a/frontend/frontend/src/pages/App/AppTrends.js
+++ b/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">
diff --git a/frontend/frontend/src/pages/App/Header.js b/frontend/frontend/src/pages/App/Header.js
index c5c2c74c..882467d2 100644
--- a/frontend/frontend/src/pages/App/Header.js
+++ b/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
diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 43de08b8..00cba143 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/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">