fix Filter hover transform on chrome, and handler after reset

src/components/elements/Filter.js

@@ -12,10 +12,21 @@ const FilterStyle = styled(FlexRow)`
   box-shadow: ${({theme}) => theme.shadow};
   cursor: pointer;
   background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
+  //transition: color, background-color 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
+  z-index: 2;
 
   &:hover {
+      //background-color: ${({theme}) => theme.colors.dark};
     transform: scale(1.1);
+
+    // p {
+      //   color: ${({theme}) => theme.colors.white};
+    // }
+    //
+    // span {
+      //   background-color: ${({theme}) => theme.colors.white};
+    // }
   }
 
   p {
@@ -33,6 +44,7 @@ const FilterStyle = styled(FlexRow)`
 
 const Filter = (props) => {
     const onCheckHandler = (e) => {
+        console.log('elo');
         if (e.target.checked)
             props.handler(Number(e.target.value));
     };
@@ -44,7 +56,8 @@ const Filter = (props) => {
                 {props.children}
             </FilterStyle>
             <FlexRow display='none' as='input' type='radio' value={props.index}
-                     id={props.id} name={props.name} onChange={(e) => onCheckHandler(e)}/>
+                     id={props.id} name={props.name} checked={props.option === props.index}
+                     onChange={(e) => onCheckHandler(e)}/>
         </>
     );
 };

src/components/elements/FiltersMenu/FiltersMenu.js

@@ -40,7 +40,6 @@ const FiltersMenuStyle = styled(FlexColumn)`
 
 const FiltersMenu = (props) => {
     const resetHandler = () => {
-        console.log('siema');
         props.sortByHandler(0);
         props.statusHandler(0);
         props.challengeTypeHandler(0);

src/components/sections/FilterBy.js

@@ -29,7 +29,7 @@ const FilterBy = (props) => {
     };
 
     return (
-        <FlexColumn as='fieldset' width='94%' alignmentX='flex-start'>
+        <FlexColumn as='fieldset' width='100%' alignmentX='flex-start' padding='8px'>
             <Media query={theme.mobile}>
                 <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
                     {props.header}
@@ -39,9 +39,8 @@ const FilterBy = (props) => {
                 <H3 as='legend' textTransform='uppercase' margin='0 0 24px 0'>
                     {props.header}
                 </H3>
-
             </Media>
-            <Grid gridTemplateColumns='auto auto' gridGap='12px'>
+            <Grid gridTemplateColumns='auto auto' gridGap='12px' position='relative'>
                 {renderFilterOptions()}
             </Grid>
         </FlexColumn>