From 125bd08bc7170dbc5f8d998b6641c94f536098ab Mon Sep 17 00:00:00 2001
From: martin-mfg <2026226+martin-mfg@users.noreply.github.com>
Date: Mon, 8 Dec 2025 11:58:59 +0100
Subject: [PATCH] stage 3: link style and functionality

---
 frontend/frontend/src/pages/Home/Home.js      |  1 +
 .../src/pages/Home/stages/Customize.js        | 34 ++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js
index 63cefbcd..2344ea43 100644
--- a/frontend/frontend/src/pages/Home/Home.js
+++ b/frontend/frontend/src/pages/Home/Home.js
@@ -364,6 +364,7 @@ const HomeScreen = ({ stage, setStage }) => {
               usePercent={usePercent}
               setUsePercent={setUsePercent}
               fullSuffix={fullSuffix}
+              setStage={setStage}
             />
           )}
           {stage === 3 && (
diff --git a/frontend/frontend/src/pages/Home/stages/Customize.js b/frontend/frontend/src/pages/Home/stages/Customize.js
index 850fb5d1..033c78d3 100644
--- a/frontend/frontend/src/pages/Home/stages/Customize.js
+++ b/frontend/frontend/src/pages/Home/stages/Customize.js
@@ -46,6 +46,7 @@ const CustomizeStage = ({
   usePercent,
   setUsePercent,
   fullSuffix,
+  setStage,
 }) => {
   const cardType = selectedCard || CardTypes.STATS;
   const isAuthenticated = useIsAuthenticated();
@@ -99,9 +100,24 @@ const CustomizeStage = ({
               <>
                 Set your GitHub Repo to fetch your stats.
                 <br />
-                Please <a>log in</a> to change the repo.
+                {!isAuthenticated && (
+                  <>
+                    Please
+                    <a
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setStage(1);
+                      }}
+                      className="underline text-blue-900"
+                    >
+                      log in
+                    </a>
+                    to change the repo.
+                  </>
+                )}
               </>
-            } // TODO: link to step 1
+            }
             placeholder={`e.g. "${DEMO_REPO}"`} // TODO: example without owner?
             value={repo}
             setValue={(myRepo) => {
@@ -110,7 +126,7 @@ const CustomizeStage = ({
               }
               setRepo(myRepo.includes('/') ? myRepo.split('/')[1] : myRepo);
             }}
-            disabled={!isAuthenticated} // TODO: explanation
+            disabled={!isAuthenticated}
           />
         )}
         {cardType === CardTypes.WAKATIME && (
@@ -118,8 +134,15 @@ const CustomizeStage = ({
             title="WakaTime Username"
             description={
               <>
-                Set your <a href="https://wakatime.com/">WakaTime</a> username
-                to fetch your stats.
+                Set your
+                <a
+                  href="https://wakatime.com/"
+                  target="_blank"
+                  className="underline text-blue-900"
+                >
+                  WakaTime
+                </a>{' '}
+                username to fetch your stats.
               </>
             } // TODO: make link visible
             placeholder={`e.g. "${DEMO_WAKATIME_USER}"`}
@@ -254,6 +277,7 @@ CustomizeStage.propTypes = {
   usePercent: PropTypes.bool.isRequired,
   setUsePercent: PropTypes.func.isRequired,
   fullSuffix: PropTypes.string.isRequired,
+  setStage: PropTypes.func.isRequired,
 };
 
 export default CustomizeStage;