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)` const MenuOption = styled(Medium)`
cursor: pointer; cursor: pointer;
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
color: ${({theme, active}) => active ? theme.colors.green : theme.colors.dark};
&:hover { &:hover {
color: ${({theme}) => theme.colors.green}; color: ${({theme}) => theme.colors.green};
@ -16,21 +17,21 @@ const MobileChallengeMenu = (props) => {
return ( return (
<> <>
<FlexRow gap='32px'> <FlexRow gap='32px'>
<MenuOption as='button' to='/' onClick={() => props.setSection(0)}> <MenuOption as='button' active={0 === props.section} to='/' onClick={() => props.setSection(0)}>
Leaderboard Leaderboard
</MenuOption> </MenuOption>
<MenuOption as='button' to='/' onClick={() => props.setSection(1)}> <MenuOption as='button' active={1 === props.section} to='/' onClick={() => props.setSection(1)}>
Readme Readme
</MenuOption> </MenuOption>
<MenuOption as='button' to='/' onClick={() => props.setSection(2)}> <MenuOption as='button' active={2 === props.section} to='/' onClick={() => props.setSection(2)}>
How to How to
</MenuOption> </MenuOption>
</FlexRow> </FlexRow>
<FlexRow gap='36px'> <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 My entries
</MenuOption> </MenuOption>
<MenuOption as='button' to='/' onClick={() => props.setSection(3)}> <MenuOption as='button' active={4 === props.section} to='/' onClick={() => props.setSection(4)}>
Submit Submit
</MenuOption> </MenuOption>
</FlexRow> </FlexRow>

4
src/pages/Challenge.js
View File

@ -54,10 +54,10 @@ const Challenge = () => {
const mobileRender = () => { const mobileRender = () => {
return ( return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'> <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} {getChallenge().title}
</H1> </H1>
<MobileChallengeMenu setSection={setSection}/> <MobileChallengeMenu setSection={setSection} section={section}/>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/> <Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
{sectionRender()} {sectionRender()}
</FlexColumn> </FlexColumn>