add reset and done handler to Button on filters menu

src/components/elements/Button.js

@@ -23,7 +23,7 @@ const ButtonStyle = styled(Medium)`
 
 const Button = (props) => {
     return (
-        <ButtonStyle onClick={props.handler} width={props.width} height={props.height}
+        <ButtonStyle as='button' onClick={props.handler} width={props.width} height={props.height}
                      color={props.color} backgroundColor={props.backgroundColor}>
             {props.children}
         </ButtonStyle>

src/components/elements/FiltersMenu/FiltersMenu.js

@@ -39,6 +39,14 @@ const FiltersMenuStyle = styled(FlexColumn)`
 `;
 
 const FiltersMenu = (props) => {
+    const resetHandler = () => {
+        console.log('siema');
+        props.sortByHandler(0);
+        props.statusHandler(0);
+        props.challengeTypeHandler(0);
+        props.commercialHandler(0);
+    }
+
     return (
         <>
             <TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
@@ -55,19 +63,17 @@ const FiltersMenu = (props) => {
                           handler={props.commercialHandler} option={props.commercial}/>
                 <Media query={theme.mobile}>
                     <FlexRow gap='16px' margin='14px 0 0 0'>
-                        <Button as='button' width='64px' height='28px'>
+                        <Button width='64px' height='28px' handler={props.toggleFiltersMenu}>
                             Done
                         </Button>
-                        <Button as='button' width='64px' height='28px'
+                        <Button width='64px' height='28px' backgroundColor={theme.colors.dark} handler={resetHandler}>
-                                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'
+                        <Button width='72px' height='34px' backgroundColor={theme.colors.green} handler={resetHandler}>
-                                backgroundColor={theme.colors.green}>
                             Reset
                         </Button>
                     </FlexRow>

src/pages/Challanges/Challenges.js

@@ -31,23 +31,23 @@ const Challenges = () => {
     const challengesRequest = () => {
         getChallenges(setChallengesFromAPI);
         getChallenges(setChallenges, setLoading);
-    }
+    };
 
     const sortByHandler = (value) => {
         setSortBy(value);
-    }
+    };
 
     const statusHandler = (value) => {
         setStatus(value)
-    }
+    };
 
     const challengeTypeHandler = (value) => {
         setChallengeType(value);
-    }
+    };
 
     const commercialHandler = (value) => {
         setCommercial(value);
-    }
+    };
 
     const searchQueryHandler = (event) => {
         _searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);