s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mobile Challenge menu option green when active and correct header alignment

Browse Source
This commit is contained in:
mattyl006 2022-07-18 11:58:29 +02:00
parent 81fa27c48c
commit 22736759c1
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/elements/MobileChallengeMenu.js
View File

@ -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>

4
src/pages/Challenge.js
View File

@ -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>