diff --git a/frontend/frontend/src/components/Home/Progress.js b/frontend/frontend/src/components/Home/Progress.js index 0a53112f..2504b172 100644 --- a/frontend/frontend/src/components/Home/Progress.js +++ b/frontend/frontend/src/components/Home/Progress.js @@ -24,7 +24,7 @@ const ProgressSection = ({ num, item, passed, isActive, onClick }) => { className={classnames( 'text-lg font-bold', passed ? 'text-blue-500' : 'text-gray-500', - isActive ? '-mt-[5px]' : '', + isActive ? '-mt-[4px]' : '', )} > {`Step ${num + 1}`} diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js index 405a5771..4e629162 100644 --- a/frontend/frontend/src/pages/Home/Home.js +++ b/frontend/frontend/src/pages/Home/Home.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import PropTypes from 'prop-types'; import BounceLoader from 'react-spinners/BounceLoader'; @@ -194,6 +194,12 @@ const HomeScreen = ({ stage, setStage }) => { themeSuffix += `&theme=${theme}`; } + const contentSectionRef = useRef(null); + + useEffect(() => { + contentSectionRef.current?.scrollIntoView(); + }, [stage]); + useEffect(() => { async function redirectCode() { // After requesting Github access, Github redirects back to your app with a code parameter @@ -229,7 +235,10 @@ const HomeScreen = ({ stage, setStage }) => { } return ( -
+