DesktopChallengeMenu component

src/components/elements/DesktopChallengeMenu.js

@@ -1,10 +1,48 @@
 import React from "react";
+import styled from "styled-components";
+import {FlexColumn} from "../../utils/containers";
+import {H3} from "../../utils/fonts";
 
-const DesktopChallengeMenu = () => {
+const DesktopChallengeMenuStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  position: fixed;
+  left: 0;
+  overflow-y: auto;
+  width: 310px;
+  height: 100vh;
+  top: 50px;
+  padding: 64px 0 0 0;
+  z-index: 2;
+  gap: 32px;
+  box-shadow: ${({theme}) => theme.shadowRight};
+`;
+
+const Option = styled(FlexColumn)`
+  height: 48px;
+  width: 100%;
+  transition: background-color 0.3s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({theme}) => theme.colors.green};
+  }
+`;
+
+const DesktopChallengeMenu = (props) => {
+    const options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
     return (
-        <>
+        <DesktopChallengeMenuStyle>
-
+            {options.map((option, index) => {
-        </>
+                return (
+                    <Option key={`challenge_menu_option-${index}`} as='button'
+                            onClick={() => props.setSection(index)}>
+                        <H3 textTransform='uppercase'>
+                            {option}
+                        </H3>
+                    </Option>
+                )
+            })}
+        </DesktopChallengeMenuStyle>
     );
 }
 

src/components/elements/FiltersMenu/FiltersMenu.js

@@ -17,7 +17,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
   max-height: 650px;
   justify-content: flex-start;
   padding: 14px 16px 14px 24px;
-  box-shadow: ${({theme}) => theme.filtersShadowLeft};
+  box-shadow: ${({theme}) => theme.shadowLeft};
   background-color: ${({theme}) => theme.colors.white};
   transition: transform 0.5s ease-in-out;
   z-index: 3;
@@ -32,8 +32,7 @@ const FiltersMenuStyle = styled(FlexColumn)`
     top: 50px;
     right: auto;
     left: 0;
-    height: 100vh;
+    box-shadow: ${({theme}) => theme.shadowRight};
-    box-shadow: ${({theme}) => theme.filtersShadowRight};
     padding: 32px 32px 64px;
   }
 `;

src/components/sections/HowTo.js

@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const HowTo = () => {
     return (
-        <FlexColumn padding='24px'>
+        <FlexColumn padding='24px' as='section'>
-            <H2>
+            <H2 as='h2'>
                 How to
             </H2>
         </FlexColumn>

src/components/sections/Leaderboard.js

@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Leaderboard = () => {
     return (
-        <FlexColumn padding='24px'>
+        <FlexColumn padding='24px' as='section'>
-            <H2>
+            <H2 as='h2'>
                 Leaderboard
             </H2>
         </FlexColumn>

src/components/sections/MiniChallenge.js

@@ -2,7 +2,7 @@ import React from "react";
 import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
 import {Body, H3} from "../../utils/fonts";
 import styled from "styled-components";
-import IconLabel from "./IconLabel";
+import IconLabel from "../elements/IconLabel";
 import {Link} from "react-router-dom";
 import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from "../../utils/globals";
 import theme from "../../utils/theme";

src/components/sections/MyEntries.js

@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const MyEntries = () => {
     return (
-        <FlexColumn padding='24px'>
+        <FlexColumn padding='24px' as='section'>
-            <H2>
+            <H2 as='h2'>
                 My entries
             </H2>
         </FlexColumn>

src/components/sections/Readme.js

@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Readme = () => {
     return (
-        <FlexColumn padding='24px'>
+        <FlexColumn padding='24px' as='section'>
-            <H2>
+            <H2 as='h2'>
                 Readme
             </H2>
         </FlexColumn>

src/components/sections/Submit.js

@@ -4,8 +4,8 @@ import {H2} from "../../utils/fonts";
 
 const Submit = () => {
     return (
-        <FlexColumn padding='24px'>
+        <FlexColumn padding='24px' as='section'>
-            <H2>
+            <H2 as='h2'>
                 Submit
             </H2>
         </FlexColumn>

src/pages/Challanges/_renderChallenges.js

@@ -1,5 +1,5 @@
 import {ELEMENTS_PER_PAGE} from "../../utils/globals";
-import MiniChallenge from "../../components/elements/MiniChallenge";
+import MiniChallenge from "../../components/sections/MiniChallenge";
 import {Grid} from "../../utils/containers";
 import styled from "styled-components";
 

src/pages/Challenge.js

@@ -67,24 +67,21 @@ const Challenge = () => {
     const desktopRender = () => {
         return (
             <>
-                <DesktopChallengeMenu/>
+                <DesktopChallengeMenu setSection={setSection}/>
                 <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
-                    <FlexRow gap='32px' margin='0 0 32px 0'>
+                    <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
-                        <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='628px'>
+                        <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
-                            <H1>
+                            <H1 as='h1'>
                                 {getChallenge().title}
                             </H1>
-                            <Medium>
+                            <Medium as='p'>
                                 {MINI_DESCRIPTION_RENDER(getChallenge().description)}
                             </Medium>
                         </FlexColumn>
                         <Svg src={getChallenge().type ? RENDER_ICO(getChallenge().type) : textIco}
-                             width='120px'
+                             width='120px' height='120px' size='contain'/>
-                             height='120px'
-                             size='cover'/>
                     </FlexRow>
-
+                    <Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>
-                    <Container width='55%' minWidth='600px' height='1px' backgroundColor={theme.colors.dark}/>
                     {sectionRender()}
                 </FlexColumn>
             </>

src/utils/theme.js

@@ -8,8 +8,8 @@ const theme = {
     shadow: '1px 2px 4px rgba(52, 52, 52, 0.25)',
     navShadow: '0 1px 2px rgba(52, 52, 52, 0.25)',
     buttonShadow: '0 4px 4px rgba(52, 52, 52, 0.25)',
-    filtersShadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
+    shadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
-    filtersShadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
+    shadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
 };
 
 export default theme;