From 22736759c1e1d5ae093035dbf000aaf023ff5d97 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Mon, 18 Jul 2022 11:58:29 +0200
Subject: [PATCH] mobile Challenge menu option green when active and correct
 header alignment

---
 src/components/elements/MobileChallengeMenu.js | 11 ++++++-----
 src/pages/Challenge.js                         |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/elements/MobileChallengeMenu.js b/src/components/elements/MobileChallengeMenu.js
index 7b39ded..656db0d 100644
--- a/src/components/elements/MobileChallengeMenu.js
+++ b/src/components/elements/MobileChallengeMenu.js
@@ -6,6 +6,7 @@ import {Medium} from "../../utils/fonts";
 const MenuOption = styled(Medium)`
   cursor: pointer;
   transition: color 0.3s ease-in-out;
+  color: ${({theme, active}) => active ? theme.colors.green : theme.colors.dark};
 
   &:hover {
     color: ${({theme}) => theme.colors.green};
@@ -16,21 +17,21 @@ const MobileChallengeMenu = (props) => {
     return (
         <>
             <FlexRow gap='32px'>
-                <MenuOption as='button' to='/' onClick={() => props.setSection(0)}>
+                <MenuOption as='button' active={0 === props.section} to='/' onClick={() => props.setSection(0)}>
                     Leaderboard
                 </MenuOption>
-                <MenuOption as='button' to='/' onClick={() => props.setSection(1)}>
+                <MenuOption as='button' active={1 === props.section} to='/' onClick={() => props.setSection(1)}>
                     Readme
                 </MenuOption>
-                <MenuOption as='button' to='/' onClick={() => props.setSection(2)}>
+                <MenuOption as='button' active={2 === props.section} to='/' onClick={() => props.setSection(2)}>
                     How to
                 </MenuOption>
             </FlexRow>
             <FlexRow gap='36px'>
-                <MenuOption as='button' to='/' onClick={() => props.setSection(4)}>
+                <MenuOption as='button' active={3 === props.section} to='/' onClick={() => props.setSection(3)}>
                     My entries
                 </MenuOption>
-                <MenuOption as='button' to='/' onClick={() => props.setSection(3)}>
+                <MenuOption as='button' active={4 === props.section} to='/' onClick={() => props.setSection(4)}>
                     Submit
                 </MenuOption>
             </FlexRow>
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index 53d07d5..576b455 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -54,10 +54,10 @@ const Challenge = () => {
     const mobileRender = () => {
         return (
             <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
-                <H1 margin='0 0 8px 0'>
+                <H1 margin='0 0 8px 0' textAlign='center'>
                     {getChallenge().title}
                 </H1>
-                <MobileChallengeMenu setSection={setSection}/>
+                <MobileChallengeMenu setSection={setSection} section={section}/>
                 <Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
                 {sectionRender()}
             </FlexColumn>