refactor Challenges structure and add animation to filters menu button

src/App.js

@@ -1,7 +1,7 @@
-import styled, {ThemeProvider} from 'styled-components';
+import {ThemeProvider} from 'styled-components';
 import theme from "./utils/theme";
 import LandingPage from "./pages/LandingPage";
-import Challenges from "./pages/Challenges";
+import Challenges from "./pages/Challanges/Challenges";
 import {BrowserRouter, Route, Routes} from "react-router-dom";
 import NavBar from "./components/elements/NavBar";
 import Footer from "./components/sections/Footer";

src/components/elements/MiniChallenge.js

@@ -74,9 +74,9 @@ const MiniChallenge = (props) => {
                 <IconLabel size='24px' gap='8px' type='baseline'>
                     {props.baseline ? props.baseline : 'xxx'}
                 </IconLabel>
-                <IconLabel size='24px' gap='8px' type='prize'>
+                {props.prize ? <IconLabel size='24px' gap='8px' type='prize'>
-                    {props.prize ? props.prize : 'xxx'}
+                    {props.prize}
-                </IconLabel>
+                </IconLabel> : ''}
             </IconsGrid>
         </ChallengeStyle>
     );

src/components/elements/Search.js

@@ -23,6 +23,11 @@ const SearchStyle = styled(FlexRow)`
     margin-left: 12px;
     width: 14px;
     height: 20px;
+    transition: transform 0.3s ease-in-out;
+
+    &:hover {
+      transform: scale(1.25);
+    }
   }
 
   input {

src/components/sections/Footer.js

@@ -2,7 +2,6 @@ import React from "react";
 import {Container, FlexRow} from "../../utils/containers";
 import styled from "styled-components";
 import {Medium} from "../../utils/fonts";
-import {Link} from "react-router-dom";
 
 const FooterStyle = styled(FlexRow)`
   width: 100%;
@@ -12,7 +11,7 @@ const FooterStyle = styled(FlexRow)`
   align-items: center;
   background-color: ${({theme}) => theme.colors.green};
 
-  * {
+  p, a {
     color: ${({theme}) => theme.colors.white}
   }
 

src/pages/Challanges/Challenges.js

@@ -1,12 +1,13 @@
 import React from "react";
-import {H1} from "../utils/fonts";
+import {H1} from "../../utils/fonts";
-import {FlexColumn, Grid} from "../utils/containers";
+import {FlexColumn, Grid} from "../../utils/containers";
-import Search from "../components/elements/Search";
+import Search from "../../components/elements/Search";
-import MiniChallenge from "../components/elements/MiniChallenge";
+import Pager from "../../components/elements/Pager";
-import Pager from "../components/elements/Pager";
+import {ELEMENTS_PER_PAGE} from "../../utils/globals";
-import {ELEMENTS_PER_PAGE, API} from "../utils/globals";
+import FiltersMenu from "../../components/elements/FiltersMenu";
-import FiltersMenu from "../components/elements/FiltersMenu";
 import _searchQueryHandler from "./_searchQueryHandler";
+import _challengesRequest from "./_challengesRequest";
+import _renderChallenges from "./_renderChallenges";
 
 const Challenges = () => {
     const [pageNr, setPageNr] = React.useState(1);
@@ -23,12 +24,7 @@ const Challenges = () => {
     }, []);
 
     const challengesRequest = () => {
-        fetch(`${API}/list-challenges`)
+        _challengesRequest(setChallengesFromAPI, setChallenges);
-            .then(response => response.json())
-            .then(data => {
-                setChallengesFromAPI(data);
-                setChallenges(data);
-            });
     }
 
     const sortByHandler = (value) => {
@@ -70,17 +66,7 @@ const Challenges = () => {
     }
 
     const renderChallenges = () => {
-        const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
+        return _renderChallenges(pageNr, challenges);
-        return (
-            challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
-                return (
-                    <MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
-                                   description={challenge.description} metric={challenge.mainMetric}
-                                   bestScore={challenge.bestScore} baseline={challenge.baseline}
-                                   prize={challenge.prize} deadline={challenge.deadline}/>
-                );
-            })
-        )
     }
 
     const toggleFiltersMenu = () => {

src/pages/Challanges/_challengesRequest.js

@@ -0,0 +1,12 @@
+import {API} from "../../utils/globals";
+
+const _challengesRequest = (setChallengesFromAPI, setChallenges) => {
+    fetch(`${API}/list-challenges`)
+        .then(response => response.json())
+        .then(data => {
+            setChallengesFromAPI(data);
+            setChallenges(data);
+        });
+}
+
+export default _challengesRequest;

src/pages/Challanges/_renderChallenges.js

@@ -0,0 +1,18 @@
+import {ELEMENTS_PER_PAGE} from "../../utils/globals";
+import MiniChallenge from "../../components/elements/MiniChallenge";
+
+const _renderChallenges = (pageNr, challenges) => {
+    const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
+    return (
+        challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
+            return (
+                <MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
+                               description={challenge.description} metric={challenge.mainMetric}
+                               bestScore={challenge.bestScore} baseline={challenge.baseline}
+                               prize={challenge.prize} deadline={challenge.deadline}/>
+            );
+        })
+    )
+}
+
+export default _renderChallenges;

src/pages/Challanges/index.js

@@ -0,0 +1 @@
+export {default} from './Challenges';

src/utils/containers.js

@@ -17,7 +17,6 @@ const Container = styled.div`
   border: ${({border}) => border ? border : 'none'};
   cursor: ${({cursor}) => cursor ? cursor : 'auto'};
   display: ${({display}) => display ? display : 'block'};
-  outline: ${({outline}) => outline ? outline : 'none'};
   text-decoration: ${({textDecoration}) => textDecoration ? textDecoration : 'none'};
   text-transform: ${({textTransform}) => textTransform ? textTransform : 'none'};
   opacity: ${({opacity}) => opacity ? opacity : '1'};