diff --git a/src/App.js b/src/App.js
index 60e154b..0069aae 100644
--- a/src/App.js
+++ b/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";
diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js
index 6d1f561..9ce2c53 100644
--- a/src/components/elements/MiniChallenge.js
+++ b/src/components/elements/MiniChallenge.js
@@ -74,9 +74,9 @@ const MiniChallenge = (props) => {
{props.baseline ? props.baseline : 'xxx'}
-
- {props.prize ? props.prize : 'xxx'}
-
+ {props.prize ?
+ {props.prize}
+ : ''}
);
diff --git a/src/components/elements/Search.js b/src/components/elements/Search.js
index fd0f412..15e3be9 100644
--- a/src/components/elements/Search.js
+++ b/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 {
diff --git a/src/components/sections/Footer.js b/src/components/sections/Footer.js
index c333242..b6070ab 100644
--- a/src/components/sections/Footer.js
+++ b/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}
}
diff --git a/src/pages/Challenges.js b/src/pages/Challanges/Challenges.js
similarity index 71%
rename from src/pages/Challenges.js
rename to src/pages/Challanges/Challenges.js
index 06f0bcd..b76ec84 100644
--- a/src/pages/Challenges.js
+++ b/src/pages/Challanges/Challenges.js
@@ -1,12 +1,13 @@
import React from "react";
-import {H1} from "../utils/fonts";
-import {FlexColumn, Grid} from "../utils/containers";
-import Search from "../components/elements/Search";
-import MiniChallenge from "../components/elements/MiniChallenge";
-import Pager from "../components/elements/Pager";
-import {ELEMENTS_PER_PAGE, API} from "../utils/globals";
-import FiltersMenu from "../components/elements/FiltersMenu";
+import {H1} from "../../utils/fonts";
+import {FlexColumn, Grid} from "../../utils/containers";
+import Search from "../../components/elements/Search";
+import Pager from "../../components/elements/Pager";
+import {ELEMENTS_PER_PAGE} from "../../utils/globals";
+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`)
- .then(response => response.json())
- .then(data => {
- setChallengesFromAPI(data);
- setChallenges(data);
- });
+ _challengesRequest(setChallengesFromAPI, setChallenges);
}
const sortByHandler = (value) => {
@@ -70,17 +66,7 @@ const Challenges = () => {
}
const renderChallenges = () => {
- const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
- return (
- challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
- return (
-
- );
- })
- )
+ return _renderChallenges(pageNr, challenges);
}
const toggleFiltersMenu = () => {
diff --git a/src/pages/Challanges/_challengesRequest.js b/src/pages/Challanges/_challengesRequest.js
new file mode 100644
index 0000000..eadf1a6
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js
new file mode 100644
index 0000000..206d5be
--- /dev/null
+++ b/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 (
+
+ );
+ })
+ )
+}
+
+export default _renderChallenges;
\ No newline at end of file
diff --git a/src/pages/_searchQueryHandler.js b/src/pages/Challanges/_searchQueryHandler.js
similarity index 100%
rename from src/pages/_searchQueryHandler.js
rename to src/pages/Challanges/_searchQueryHandler.js
diff --git a/src/pages/Challanges/index.js b/src/pages/Challanges/index.js
new file mode 100644
index 0000000..b25879c
--- /dev/null
+++ b/src/pages/Challanges/index.js
@@ -0,0 +1 @@
+export {default} from './Challenges';
\ No newline at end of file
diff --git a/src/utils/containers.js b/src/utils/containers.js
index 33e7064..272ea21 100644
--- a/src/utils/containers.js
+++ b/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'};