FiltersMenu on desktop

src/components/elements/FiltersMenu/FiltersMenu.js

@@ -5,6 +5,7 @@ import theme from "../../../utils/theme";
 import styled from "styled-components";
 import FilterBy from "../../sections/FilterBy";
 import filterOptions from "./filterOptions";
+import Media from "react-media";
 
 const FiltersMenuStyle = styled(FlexColumn)`
   position: fixed;
@@ -16,17 +17,29 @@ const FiltersMenuStyle = styled(FlexColumn)`
   max-height: 650px;
   justify-content: flex-start;
   padding: 14px 16px 14px 24px;
-  box-shadow: ${({theme}) => theme.filtersShadow};
+  box-shadow: ${({theme}) => theme.filtersShadowLeft};
   background-color: ${({theme}) => theme.colors.white};
   transition: transform 0.5s ease-in-out;
   z-index: 3;
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    width: 310px;
+    max-height: none;
+    top: 50px;
+    right: auto;
+    left: 0;
+    height: 100vh;
+    box-shadow: ${({theme}) => theme.filtersShadowRight};
+    padding: 32px 32px 64px;
+  }
 `;
 
 const FiltersMenu = (props) => {
     return (
         <>
             <TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
-                       opacity={props.opacity} onClick={props.toggleFiltersMenu}/>
+                       opacity={props.opacity} onClick={props.toggleFiltersMenu}
+                       display={props.transBackDisplay ? props.transBackDisplay : 'flex'}/>
             <FiltersMenuStyle translateX={props.translateX} gap='16px'>
                 <FilterBy header='Sort by' options={filterOptions[0]}
                           handler={props.sortByHandler} option={props.sortBy}/>
@@ -36,15 +49,25 @@ const FiltersMenu = (props) => {
                           handler={props.challengeTypeHandler} option={props.challengeType}/>
                 <FilterBy header='Commercial' options={filterOptions[3]}
                           handler={props.commercialHandler} option={props.commercial}/>
-                <FlexRow gap='16px' margin='14px 0 0 0'>
-                    <Button as='button' width='64px' height='28px'>
-                        Done
-                    </Button>
-                    <Button as='button' width='64px' height='28px'
-                            backgroundColor={theme.colors.dark}>
-                        Clear
-                    </Button>
-                </FlexRow>
+                <Media query={theme.mobile}>
+                    <FlexRow gap='16px' margin='14px 0 0 0'>
+                        <Button as='button' width='64px' height='28px'>
+                            Done
+                        </Button>
+                        <Button as='button' width='64px' height='28px'
+                                backgroundColor={theme.colors.dark}>
+                            Reset
+                        </Button>
+                    </FlexRow>
+                </Media>
+                <Media query={theme.desktop}>
+                    <FlexRow margin='20px 0 0 0' width='94%' alignmentX='flex-start'>
+                        <Button as='button' width='72px' height='34px'
+                                backgroundColor={theme.colors.green}>
+                            Reset
+                        </Button>
+                    </FlexRow>
+                </Media>
             </FiltersMenuStyle>
         </>
     );

src/components/elements/Pager.js

@@ -18,6 +18,12 @@ const LeftArrow = styled(Svg)`
   cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
   width: 10px;
   height: 10px;
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
   @media (min-width: ${({theme}) => theme.overMobile}) {
     width: 12px;
     height: 12px;
@@ -30,6 +36,12 @@ const RightArrow = styled(Svg)`
   cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
   width: 10px;
   height: 10px;
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: rotate(180deg) scale(1.1);
+  }
+
   @media (min-width: ${({theme}) => theme.overMobile}) {
     width: 12px;
     height: 12px;

src/components/elements/Search.js

@@ -28,6 +28,10 @@ const SearchStyle = styled(FlexRow)`
     &:hover {
       transform: scale(1.25);
     }
+
+    @media (min-width: ${({theme}) => theme.overMobile}) {
+      display: none;
+    }
   }
 
   input {

src/components/sections/FilterBy.js

@@ -1,11 +1,12 @@
 import React from "react";
 import {FlexColumn, Grid, Svg} from "../../utils/containers";
 import Filter from "../elements/Filter";
-import {Body, Medium} from "../../utils/fonts";
+import {Body, H3, Medium} from "../../utils/fonts";
 import arrow from "../../assets/arrow.svg";
+import Media from "react-media";
+import theme from "../../utils/theme";
 
 const FilterBy = (props) => {
-
     const renderFilterOptions = () => {
         return (
             props.options.map((option, index) => {
@@ -27,10 +28,18 @@ const FilterBy = (props) => {
     }
 
     return (
-        <FlexColumn as='fieldset' width='220px' alignmentX='flex-start'>
-            <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
-                {props.header}
-            </Medium>
+        <FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
+            <Media query={theme.mobile}>
+                <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
+                    {props.header}
+                </Medium>
+            </Media>
+            <Media query={theme.desktop}>
+                <H3 as='legend' textTransform='uppercase' margin='0 0 24px 0'>
+                    {props.header}
+                </H3>
+
+            </Media>
             <Grid gridTemplateColumns='auto auto' gridGap='12px'>
                 {renderFilterOptions()}
             </Grid>

src/components/sections/Footer.js

@@ -10,6 +10,8 @@ const FooterStyle = styled(FlexRow)`
   justify-content: center;
   align-items: center;
   background-color: ${({theme}) => theme.colors.green};
+  z-index: 1000;
+  position: relative;
 
   p, a {
     color: ${({theme}) => theme.colors.white}

src/pages/Challanges/Challenges.js

@@ -104,20 +104,26 @@ const Challenges = () => {
 
     const desktopRender = () => {
         return (
-            <FlexColumn as='main' alignmentY='flex-start' width='100%'
-                        minHeight='100vh' padding='112px 0 82px 0'>
-                <FlexColumn alignmentX='flex-start'>
-                    <H1 as='h1' margin='0 0 32px 0'>
-                        Challenges
-                    </H1>
-                    <Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
-                    <FlexColumn width='100%'>
-                        {renderChallenges()}
+            <>
+                <FiltersMenu toggleFiltersMenu={toggleFiltersMenu} transBackDisplay='none'
+                             sortByHandler={sortByHandler} statusHandler={statusHandler}
+                             challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
+                             sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
+                <FlexColumn as='main' alignmentY='flex-start' width='100%'
+                            minHeight='100vh' padding='112px 0 82px 310px'>
+                    <FlexColumn alignmentX='flex-start'>
+                        <H1 as='h1' margin='0 0 32px 0'>
+                            Challenges
+                        </H1>
+                        <Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
+                        <FlexColumn width='100%'>
+                            {renderChallenges()}
+                        </FlexColumn>
                     </FlexColumn>
+                    <Pager pageNr={pageNr} pages={calcPages()}
+                           nextPage={nextPage} previousPage={previousPage}/>
                 </FlexColumn>
-                <Pager pageNr={pageNr} pages={calcPages()}
-                       nextPage={nextPage} previousPage={previousPage}/>
-            </FlexColumn>
+            </>
         );
     }
 

src/pages/Challanges/_renderChallenges.js

@@ -12,6 +12,10 @@ const ChallengesGrid = styled(Grid)`
     grid-gap: 64px;
     grid-template-columns: 1fr 1fr;
   }
+
+  @media (min-width: 1600px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
 `;
 
 const _renderChallenges = (pageNr, challenges) => {

src/utils/theme.js

@@ -8,7 +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)',
-    filtersShadow: '-4px 4px 4px rgba(52, 52, 52, 0.25)'
+    filtersShadowLeft: '-4px 4px 4px rgba(52, 52, 52, 0.25)',
+    filtersShadowRight: '2px 2px 4px rgba(52, 52, 52, 0.25)'
 };
 
 export default theme;