highlight current step, ge to next step when selecting card or theme

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

@@ -9,12 +9,13 @@ import {
 
 import { classnames } from '../../utils';
 
-const ProgressSection = ({ num, item, passed, onClick }) => {
+const ProgressSection = ({ num, item, passed, isActive, onClick }) => {
   return (
     <button
       className={classnames(
-        'w-1/4 flex flex-col mx-2 p-2 border-t-4 cursor-pointer',
+        'w-1/4 flex flex-col mx-2 p-2 cursor-pointer',
         passed ? 'border-blue-500' : 'border-gray-500',
+        isActive ? 'border-t-[14px] -mt-[5px]' : 'border-t-4',
       )}
       type="button"
       onClick={onClick}
@@ -38,6 +39,7 @@ ProgressSection.propTypes = {
   num: PropTypes.number.isRequired,
   item: PropTypes.string.isRequired,
   passed: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
 };
 
@@ -64,6 +66,7 @@ const ProgressBar = ({ items, currItem, setCurrItem }) => {
               key={index}
               item={item}
               passed={currItem >= index}
+              isActive={currItem === index}
               onClick={() => setCurrItem(index)}
             />
           );

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

@@ -288,6 +288,7 @@ const HomeScreen = ({ stage, setStage }) => {
             <SelectCardStage
               selectedCard={selectedCard}
               setSelectedCard={setSelectedCard}
+              setStage={setStage}
               setImageSrc={setImageSrc}
             />
           )}
@@ -328,6 +329,7 @@ const HomeScreen = ({ stage, setStage }) => {
             <ThemeStage
               theme={theme}
               setTheme={setTheme}
+              setStage={setStage}
               fullSuffix={fullSuffix}
             />
           )}

frontend/frontend/src/pages/Home/stages/SelectCard.js

@@ -6,7 +6,12 @@ import PropTypes from 'prop-types';
 import { Card } from '../../../components';
 import { useUserId } from '../../../redux/selectors/userSelectors';
 
-const SelectCardStage = ({ selectedCard, setSelectedCard, setImageSrc }) => {
+const SelectCardStage = ({
+  selectedCard,
+  setSelectedCard,
+  setStage,
+  setImageSrc,
+}) => {
   const userId = useUserId();
   return (
     <div className="w-full flex flex-wrap">
@@ -55,6 +60,7 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setImageSrc }) => {
           type="button"
           onClick={() => {
             setSelectedCard(card.cardType);
+            setStage(2);
             setImageSrc(card.imageSrc);
           }}
         >
@@ -74,6 +80,7 @@ const SelectCardStage = ({ selectedCard, setSelectedCard, setImageSrc }) => {
 SelectCardStage.propTypes = {
   selectedCard: PropTypes.string,
   setSelectedCard: PropTypes.func.isRequired,
+  setStage: PropTypes.func.isRequired,
   setImageSrc: PropTypes.func.isRequired,
 };
 

frontend/frontend/src/pages/Home/stages/Theme.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { Card } from '../../../components';
 import { themes } from '../../../backend/themes/index';
 
-const ThemeStage = ({ theme, setTheme, fullSuffix }) => {
+const ThemeStage = ({ theme, setTheme, setStage, fullSuffix }) => {
   return (
     <div className="flex flex-wrap">
       {Object.keys(themes)
@@ -26,7 +26,10 @@ const ThemeStage = ({ theme, setTheme, fullSuffix }) => {
             className="p-2 lg:p-4"
             key={index}
             type="button"
-            onClick={() => setTheme(myTheme)}
+            onClick={() => {
+              setTheme(myTheme);
+              setStage(4);
+            }}
           >
             <Card
               title={myTheme}
@@ -43,6 +46,7 @@ const ThemeStage = ({ theme, setTheme, fullSuffix }) => {
 ThemeStage.propTypes = {
   theme: PropTypes.string.isRequired,
   setTheme: PropTypes.func.isRequired,
+  setStage: PropTypes.func.isRequired,
   fullSuffix: PropTypes.string.isRequired,
 };