From 81fa27c48c2b0fb09cf91fa6d0ecd9d7a73cde33 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Mon, 18 Jul 2022 11:50:46 +0200
Subject: [PATCH] desktop Challenge menu option background green when active

---
 src/components/elements/DesktopChallengeMenu.js |  2 ++
 src/components/elements/MobileNavMenu.js        | 12 ++++++------
 src/components/elements/NavBar/NavBar.js        | 12 ++++++------
 src/pages/Challenge.js                          |  4 ++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/elements/DesktopChallengeMenu.js b/src/components/elements/DesktopChallengeMenu.js
index fa6eaf0..bc356cc 100644
--- a/src/components/elements/DesktopChallengeMenu.js
+++ b/src/components/elements/DesktopChallengeMenu.js
@@ -22,6 +22,7 @@ const Option = styled(FlexColumn)`
   width: 100%;
   transition: background-color 0.3s ease-in-out;
   cursor: pointer;
+  background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
 
   * {
     cursor: pointer;
@@ -39,6 +40,7 @@ const DesktopChallengeMenu = (props) => {
             {options.map((option, index) => {
                 return (
                     <Option key={`challenge_menu_option-${index}`} as='button'
+                            active={index === props.section}
                             onClick={() => props.setSection(index)}>
                         <H3 textTransform='uppercase'>
                             {option}
diff --git a/src/components/elements/MobileNavMenu.js b/src/components/elements/MobileNavMenu.js
index 2aeae68..06773c3 100644
--- a/src/components/elements/MobileNavMenu.js
+++ b/src/components/elements/MobileNavMenu.js
@@ -50,10 +50,10 @@ const MobileNavMenu = (props) => {
         <TransBack transition='transform' alignmentX='flex-start' top='42px'
                    translateY={props.translateY} onClick={props.toggleNavMenu}>
             <MobileNavMenuStyle as='ul'>
-                <FlexRow as={Link} to='/' gap='16px'>
-                    <Svg width='16px' height='16px' src={loginIco}/>
+                <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
+                    <Svg width='16px' height='16px' src={cupIco}/>
                     <Menu as='li'>
-                        Sign in
+                        Challenges
                     </Menu>
                 </FlexRow>
                 <FlexRow as={Link} to='/' gap='16px'>
@@ -62,10 +62,10 @@ const MobileNavMenu = (props) => {
                         Register
                     </Menu>
                 </FlexRow>
-                <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
-                    <Svg width='16px' height='16px' src={cupIco}/>
+                <FlexRow as={Link} to='/' gap='16px'>
+                    <Svg width='16px' height='16px' src={loginIco}/>
                     <Menu as='li'>
-                        Challenges
+                        Sign in
                     </Menu>
                 </FlexRow>
             </MobileNavMenuStyle>
diff --git a/src/components/elements/NavBar/NavBar.js b/src/components/elements/NavBar/NavBar.js
index 750f644..5f4b4f8 100644
--- a/src/components/elements/NavBar/NavBar.js
+++ b/src/components/elements/NavBar/NavBar.js
@@ -43,10 +43,10 @@ const NavBar = () => {
                 <Logo/>
                 <MenuButton as='button' onClick={toggleNavMenu}/>
                 <FlexRow as='ul' className='ul-desktop' gap='32px'>
-                    <FlexRow as={Link} to='/' gap='16px'>
-                        <Svg width='16px' height='16px' src={loginIco}/>
+                    <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
+                        <Svg width='16px' height='16px' src={cupIco}/>
                         <Menu as='li'>
-                            Sign in
+                            Challenges
                         </Menu>
                     </FlexRow>
                     <FlexRow as={Link} to='/' gap='16px'>
@@ -55,10 +55,10 @@ const NavBar = () => {
                             Register
                         </Menu>
                     </FlexRow>
-                    <FlexRow as={Link} to={CHALLENGES_PAGE} gap='16px'>
-                        <Svg width='16px' height='16px' src={cupIco}/>
+                    <FlexRow as={Link} to='/' gap='16px'>
+                        <Svg width='16px' height='16px' src={loginIco}/>
                         <Menu as='li'>
-                            Challenges
+                            Sign in
                         </Menu>
                     </FlexRow>
                 </FlexRow>
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 3b13375..53d07d5 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -18,7 +18,7 @@ import textIco from "../assets/text_ico.svg";
 const Challenge = () => {
     const challengeName = useParams().challengeId;
     const [challenges, setChallenges] = React.useState([]);
-    const [section, setSection] = React.useState([0]);
+    const [section, setSection] = React.useState(0);
 
     React.useEffect(() => {
         getChallenges(setChallenges);
@@ -67,7 +67,7 @@ const Challenge = () => {
     const desktopRender = () => {
         return (
             <>
-                <DesktopChallengeMenu setSection={setSection}/>
+                <DesktopChallengeMenu setSection={setSection} section={section}/>
                 <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
                     <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
                         <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>