From d23a5b556654d2b8f86367beea7a061302dc1c69 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Tue, 11 Apr 2023 13:07:17 +0200
Subject: [PATCH 1/3] allEntries mobile

---
 .../AllEntries/AllEntries.js                  | 51 ++++++++++++++++++-
 .../Leaderboard/Leaderboard.js                |  2 +-
 .../specific_challenge/MyEntries/MyEntries.js |  2 +-
 src/components/specific_challenge/Table.js    |  4 +-
 4 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/components/specific_challenge/AllEntries/AllEntries.js b/src/components/specific_challenge/AllEntries/AllEntries.js
index 5050fc1..3b6a417 100644
--- a/src/components/specific_challenge/AllEntries/AllEntries.js
+++ b/src/components/specific_challenge/AllEntries/AllEntries.js
@@ -6,6 +6,7 @@ import { H2 } from '../../../utils/fonts';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
+  IS_MOBILE,
   RENDER_WHEN,
 } from '../../../utils/globals';
 import Loading from '../../generic/Loading';
@@ -55,10 +56,11 @@ const AllEntries = (props) => {
 
   const getAllEntriesHeader = () => {
     let header = ['#', 'submitter'];
+    if (IS_MOBILE()) header.push('when');
     for (let metric of getPossibleMetrics()) {
       header.push(metric);
     }
-    header.push('when');
+    if (!IS_MOBILE()) header.push('when');
     return header;
   };
 
@@ -147,7 +149,52 @@ const AllEntries = (props) => {
   };
 
   const mobileRender = () => {
-    return <></>;
+    return (
+      <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
+        <H2 as="h2" margin="0 0 12px 0">
+          All Entries
+        </H2>
+        {!loading ? (
+          <>
+            <Search searchQueryHandler={searchQueryHandler} />
+            <Table
+              challengeName={props.challengeName}
+              headerElements={getAllEntriesHeader()}
+              possibleMetrics={getPossibleMetrics()}
+              tableType="allEntries"
+              gridTemplateColumns={
+                '1fr ' + '4fr '.repeat(getAllEntriesHeader().length - 1)
+              }
+              staticColumnElements={[
+                { name: 'id', format: null, order: 1, align: 'left' },
+                { name: 'submitter', format: null, order: 2, align: 'left' },
+                { name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
+              ]}
+              iterableColumnElement={{
+                name: 'evaluations',
+                format: EVALUATIONS_FORMAT,
+                order: 3,
+                align: 'left',
+              }}
+              pageNr={pageNr}
+              elements={entries}
+              sortByUpdate={sortByUpdate}
+            />
+            <Pager
+              pageNr={pageNr}
+              width="48px"
+              borderRadius="64px"
+              pages={CALC_PAGES(entries)}
+              nextPage={nextPage}
+              previousPage={previousPage}
+              number={`${pageNr} / ${CALC_PAGES(entries)}`}
+            />
+          </>
+        ) : (
+          <Loading />
+        )}
+      </FlexColumn>
+    );
   };
 
   const desktopRender = () => {
diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js
index 3309153..35289e4 100644
--- a/src/components/specific_challenge/Leaderboard/Leaderboard.js
+++ b/src/components/specific_challenge/Leaderboard/Leaderboard.js
@@ -180,7 +180,7 @@ const Leaderboard = (props) => {
             <Table
               challengeName={props.challengeName}
               headerElements={getLeaderboardHeaderMobile()}
-              tableType="Leaderboard"
+              tableType="leaderboard"
               gridTemplateColumns={
                 entries[0]
                   ? '1fr 3fr ' +
diff --git a/src/components/specific_challenge/MyEntries/MyEntries.js b/src/components/specific_challenge/MyEntries/MyEntries.js
index 2398b73..3f77d47 100644
--- a/src/components/specific_challenge/MyEntries/MyEntries.js
+++ b/src/components/specific_challenge/MyEntries/MyEntries.js
@@ -177,7 +177,7 @@ const MyEntries = (props) => {
     return (
       <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
         <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
-          <H2 as="h2" margin="0 0 12px 0">
+          <H2 as="h2" margin="0 0 32px 0">
             My Entries
           </H2>
         </FlexColumn>
diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js
index 718a1c9..d032605 100644
--- a/src/components/specific_challenge/Table.js
+++ b/src/components/specific_challenge/Table.js
@@ -95,7 +95,9 @@ const Table = (props) => {
       elem = newElem;
     }
     let indexModificator = 2;
-    if (props.tableType === 'Leaderboard') indexModificator = 4;
+    if (props.tableType === 'leaderboard') indexModificator = 4;
+    if (props.tableType === 'allEntries') indexModificator = 3;
+
     return elem.map((iterableElem, i) => {
       return (
         <Body

From 4d20a97f7999a8f33800f8cc5c55f492ee400730 Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Tue, 11 Apr 2023 16:07:06 +0200
Subject: [PATCH 2/3] Table responsive corrections

---
 .../AllEntries/AllEntries.js                  |  2 +-
 .../specific_challenge/Challenge.js           |  2 +-
 .../specific_challenge/ColumnFilterIcon.js    |  9 +++--
 .../DesktopChallengeMenu.js                   | 10 ++++--
 .../Leaderboard/Leaderboard.js                |  2 +-
 .../specific_challenge/MyEntries/MyEntries.js |  4 +--
 src/components/specific_challenge/Table.js    | 19 +++++++---
 src/utils/fonts.js                            | 35 ++++++++++---------
 8 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/src/components/specific_challenge/AllEntries/AllEntries.js b/src/components/specific_challenge/AllEntries/AllEntries.js
index 3b6a417..1760c10 100644
--- a/src/components/specific_challenge/AllEntries/AllEntries.js
+++ b/src/components/specific_challenge/AllEntries/AllEntries.js
@@ -199,7 +199,7 @@ const AllEntries = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <H2 as="h2" margin="0 0 32px 0">
           All Entries
         </H2>
diff --git a/src/components/specific_challenge/Challenge.js b/src/components/specific_challenge/Challenge.js
index 344d466..f739a5d 100644
--- a/src/components/specific_challenge/Challenge.js
+++ b/src/components/specific_challenge/Challenge.js
@@ -115,7 +115,7 @@ const Challenge = (props) => {
           <FlexColumn
             minHeight="100vh"
             alignmentY="flex-start"
-            padding="64px 24px 64px 310px"
+            padding="64px 24px 64px 280px"
             id="start"
           >
             <FlexRow gap="32px" margin="0 0 32px 0" padding="16px">
diff --git a/src/components/specific_challenge/ColumnFilterIcon.js b/src/components/specific_challenge/ColumnFilterIcon.js
index 4acf76f..ea4b387 100644
--- a/src/components/specific_challenge/ColumnFilterIcon.js
+++ b/src/components/specific_challenge/ColumnFilterIcon.js
@@ -9,7 +9,8 @@ const ColumnFilterIcon = (props) => {
     if (props.index === props.active) {
       return (
         <Svg
-          width="8px"
+          minWidth="8px"
+          maxWidth="8px"
           src={filterIco}
           cursor={props.cursor}
           backgroundColor={theme.colors.dark}
@@ -20,7 +21,8 @@ const ColumnFilterIcon = (props) => {
     } else {
       return (
         <Svg
-          width="8px"
+          minWidth="8px"
+          maxWidth="8px"
           src={arrow}
           cursor={props.cursor}
           backgroundColor={theme.colors.dark}
@@ -33,7 +35,8 @@ const ColumnFilterIcon = (props) => {
   return (
     <>
       <Svg
-        width="8px"
+        minWidth="8px"
+        maxWidth="8px"
         rotate="180deg"
         src={arrow}
         cursor={props.cursor}
diff --git a/src/components/specific_challenge/DesktopChallengeMenu.js b/src/components/specific_challenge/DesktopChallengeMenu.js
index 1c18bf4..6d56525 100644
--- a/src/components/specific_challenge/DesktopChallengeMenu.js
+++ b/src/components/specific_challenge/DesktopChallengeMenu.js
@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import {
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
+  IS_MOBILE,
 } from '../../utils/globals';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
@@ -15,7 +16,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)`
   position: fixed;
   left: 0;
   overflow-y: auto;
-  width: 280px;
+  width: 240px;
   height: 100vh;
   top: 50px;
   padding: 64px 0 0 0;
@@ -58,7 +59,12 @@ const DesktopChallengeMenu = (props) => {
               .toLowerCase()
               .replace(' ', '')}`}
           >
-            <H3 textTransform="uppercase">{option}</H3>
+            <H3
+              fontSize={IS_MOBILE() ? '18px' : '22px'}
+              textTransform="uppercase"
+            >
+              {option}
+            </H3>
           </Option>
         );
       })}
diff --git a/src/components/specific_challenge/Leaderboard/Leaderboard.js b/src/components/specific_challenge/Leaderboard/Leaderboard.js
index 35289e4..837f613 100644
--- a/src/components/specific_challenge/Leaderboard/Leaderboard.js
+++ b/src/components/specific_challenge/Leaderboard/Leaderboard.js
@@ -225,7 +225,7 @@ const Leaderboard = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1200px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <H2 as="h2" margin="0 0 32px 0">
           Leaderboard
         </H2>
diff --git a/src/components/specific_challenge/MyEntries/MyEntries.js b/src/components/specific_challenge/MyEntries/MyEntries.js
index 3f77d47..8314ed5 100644
--- a/src/components/specific_challenge/MyEntries/MyEntries.js
+++ b/src/components/specific_challenge/MyEntries/MyEntries.js
@@ -175,7 +175,7 @@ const MyEntries = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
+      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
         <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
           <H2 as="h2" margin="0 0 32px 0">
             My Entries
@@ -189,7 +189,7 @@ const MyEntries = (props) => {
               headerElements={getMyEntriesHeader()}
               possibleMetrics={getPossibleMetrics()}
               gridTemplateColumns={
-                '1fr ' + '4fr '.repeat(getMyEntriesHeader().length - 1)
+                '1fr ' + '3fr '.repeat(getMyEntriesHeader().length - 2) + ' 4fr'
               }
               staticColumnElements={[
                 { name: 'id', format: null, order: 1, align: 'left' },
diff --git a/src/components/specific_challenge/Table.js b/src/components/specific_challenge/Table.js
index d032605..7f34fc0 100644
--- a/src/components/specific_challenge/Table.js
+++ b/src/components/specific_challenge/Table.js
@@ -106,6 +106,8 @@ const Table = (props) => {
           order={props.iterableColumnElement.order}
           textAlign={props.iterableColumnElement.align}
           minWidth="72px"
+          margin="auto 0"
+          overflowWrap="anywhere"
         >
           {IS_MOBILE() && (
             <Container className="mobile-table-header">
@@ -130,6 +132,8 @@ const Table = (props) => {
           as="td"
           order={elemName.order}
           textAlign={elemName.align}
+          margin="auto 0"
+          overflowWrap="anywhere"
         >
           {IS_MOBILE() && (
             <Container className="mobile-table-header">
@@ -156,7 +160,8 @@ const Table = (props) => {
               gridGap="20px"
               position="relative"
               width="100%"
-              padding="4px"
+              padding="0 6px"
+              minHeight="44px"
               margin="0 0 6px 0"
               gridTemplateColumns={props.gridTemplateColumns}
             >
@@ -183,8 +188,8 @@ const Table = (props) => {
                       cursor={elem !== '#' ? 'pointer' : ''}
                       textAlign={elem === 'when' ? 'right' : 'left'}
                       width={elem === 'when' ? '100%' : 'auto'}
-                      padding="0 6px 0 0"
-                      overflowWrap="break-word"
+                      padding="0 4px 0 0"
+                      overflowWrap="anywhere"
                       minWidth={elem === 'result' ? '72px' : 'none'}
                     >
                       {elem.replace('.', ' ')}
@@ -200,7 +205,12 @@ const Table = (props) => {
                   </FlexRow>
                 );
               })}
-              <Line height="2px" top="100%" as="td" shadow={theme.shadow} />
+              <Line
+                height="2px"
+                top="calc(100% + 2px)"
+                as="td"
+                shadow={theme.shadow}
+              />
             </Grid>
             {elementsToMap.map((elem, index) => {
               return (
@@ -215,6 +225,7 @@ const Table = (props) => {
                   position="relative"
                   width="100%"
                   padding="4px"
+                  minHeight="48px"
                 >
                   {rowRender(elem)}
                   {props.headerElements ? metricsRender(elem) : ''}
diff --git a/src/utils/fonts.js b/src/utils/fonts.js
index 5284a0c..9b2ed9a 100644
--- a/src/utils/fonts.js
+++ b/src/utils/fonts.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import {Container} from './containers';
+import { Container } from './containers';
 
 const H1 = styled(Container)`
   display: inline-block;
@@ -8,7 +8,7 @@ const H1 = styled(Container)`
   font-size: 24px;
   line-height: 24px;
   letter-spacing: 0.1px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 48px;
     line-height: 52px;
   }
@@ -16,7 +16,7 @@ const H1 = styled(Container)`
 
 const H2 = styled(H1)`
   font-size: 20px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 32px;
     line-height: 36px;
   }
@@ -25,9 +25,12 @@ const H2 = styled(H1)`
 const H3 = styled(H1)`
   font-size: 18px;
   line-height: 22px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  font-size: ${({ fontSize }) => (fontSize ? fontSize : '18px')};
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 24px;
     line-height: 26px;
+    font-size: ${({ fontSize }) => (fontSize ? fontSize : '24px')};
   }
 `;
 
@@ -37,7 +40,7 @@ const Body = styled(Container)`
   font-weight: 300;
   font-size: 14px;
   line-height: 20px;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
@@ -46,9 +49,9 @@ const Body = styled(Container)`
 
 const Medium = styled(Body)`
   font-weight: 400;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 500;
-    font-size: ${({fontSize}) => fontSize ? fontSize : '16px'}
+    font-size: ${({ fontSize }) => (fontSize ? fontSize : '16px')};
   }
 `;
 
@@ -63,7 +66,7 @@ const Menu = styled(Container)`
 const Label = styled(Menu)`
   display: inline-block;
   font-weight: 300;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 22px;
     line-height: 24px;
   }
@@ -75,22 +78,22 @@ const Code = styled(Container)`
   font-size: 12px;
   line-height: 18px;
   font-weight: 300;
-  color: ${({theme}) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.white};
   max-width: 600px;
   overflow-wrap: break-word;
 
   &:before {
-    display: ${({before}) => before ? 'inline-block' : 'none'};
+    display: ${({ before }) => (before ? 'inline-block' : 'none')};
     content: '~$';
-    color: ${({theme}) => theme.colors.green};
+    color: ${({ theme }) => theme.colors.green};
     font-weight: 400;
     margin: 0 4px 0 0;
-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
       font-weight: 500;
     }
   }
 
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -98,11 +101,11 @@ const Code = styled(Container)`
 `;
 
 const CodeMedium = styled(Code)`
-  color: ${({theme}) => theme.colors.green};
+  color: ${({ theme }) => theme.colors.green};
   font-weight: 400;
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     font-weight: 500;
   }
 `;
 
-export {H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium};
\ No newline at end of file
+export { H1, H2, H3, Body, Medium, Menu, Label, Code, CodeMedium };

From dcbbf1ccb60563b55bf033711fb381ad2112d20c Mon Sep 17 00:00:00 2001
From: Mateusz Tylka <mattyl@st.amu.edu.pl>
Date: Fri, 14 Apr 2023 11:30:12 +0200
Subject: [PATCH 3/3] Challenges refactor, and create CHALLENGES_STATUS_FILTER
 enum

---
 .../FiltersMenu/filterOptions.js              | 175 +++++++++---------
 src/pages/Challanges/Challenges.js            | 108 +++--------
 src/pages/Challanges/ChallengesStyle.js       |  50 +++++
 src/pages/Challanges/_renderChallenges.js     |  40 ----
 src/pages/Challanges/renderChallenges.js      |  65 +++++++
 src/utils/globals.js                          |   7 +
 6 files changed, 240 insertions(+), 205 deletions(-)
 create mode 100644 src/pages/Challanges/ChallengesStyle.js
 delete mode 100644 src/pages/Challanges/_renderChallenges.js
 create mode 100644 src/pages/Challanges/renderChallenges.js

diff --git a/src/components/challenges_list/FiltersMenu/filterOptions.js b/src/components/challenges_list/FiltersMenu/filterOptions.js
index 08ac81e..2772cf5 100644
--- a/src/components/challenges_list/FiltersMenu/filterOptions.js
+++ b/src/components/challenges_list/FiltersMenu/filterOptions.js
@@ -1,89 +1,92 @@
 const filterOptions = [
-    [
-        {
-            name: 'Closing',
-            sort: true,
-            rotate: ''
-        },
-        {
-            name: 'Closing',
-            sort: true,
-            rotate: '180deg'
-        },
-        {
-            name: 'Hotness',
-            sort: true,
-            rotate: ''
-        },
-        {
-            name: 'Hotness',
-            sort: true,
-            rotate: '180deg'
-        },
-        {
-            name: 'Reward',
-            sort: true,
-            rotate: ''
-        },
-        {
-            name: 'Reward',
-            sort: true,
-            rotate: '180deg'
-        }
-    ], [
-        {
-            name: 'Both',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Completed',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Active',
-            sort: false,
-            rotate: ''
-        },
-    ], [
-        {
-            name: 'All',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Tabular',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Text',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Image',
-            sort: false,
-            rotate: ''
-        },
-    ], [
-        {
-            name: 'Both',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'Yes',
-            sort: false,
-            rotate: ''
-        },
-        {
-            name: 'No',
-            sort: false,
-            rotate: ''
-        },
-    ]
+  [
+    {
+      name: 'Closing',
+      sort: true,
+      rotate: '0',
+    },
+    {
+      name: 'Closing',
+      sort: true,
+      rotate: '180deg',
+    },
+    {
+      name: 'Hotness',
+      sort: true,
+      rotate: '0',
+    },
+    {
+      name: 'Hotness',
+      sort: true,
+      rotate: '180deg',
+    },
+    {
+      name: 'Reward',
+      sort: true,
+      rotate: '0',
+    },
+    {
+      name: 'Reward',
+      sort: true,
+      rotate: '180deg',
+    },
+  ],
+  [
+    {
+      name: 'Both',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Closed',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Active',
+      sort: false,
+      rotate: '0',
+    },
+  ],
+  [
+    {
+      name: 'All',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Tabular',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Text',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Image',
+      sort: false,
+      rotate: '0',
+    },
+  ],
+  [
+    {
+      name: 'Both',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'Yes',
+      sort: false,
+      rotate: '0',
+    },
+    {
+      name: 'No',
+      sort: false,
+      rotate: '0',
+    },
+  ],
 ];
 
-export default filterOptions;
\ No newline at end of file
+export default filterOptions;
diff --git a/src/pages/Challanges/Challenges.js b/src/pages/Challanges/Challenges.js
index b9d63ad..91ba4cc 100644
--- a/src/pages/Challanges/Challenges.js
+++ b/src/pages/Challanges/Challenges.js
@@ -5,13 +5,14 @@ import Search from '../../components/generic/Search';
 import Pager from '../../components/generic/Pager';
 import FiltersMenu from '../../components/challenges_list/FiltersMenu';
 import challengeSearchQueryHandler from './challengeSearchQueryHandler';
-import _renderChallenges from './_renderChallenges';
+import renderChallenges from './renderChallenges';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import cupIco from '../../assets/cup_ico.svg';
 import getChallenges from '../../api/getChallenges';
-import { CALC_PAGES } from '../../utils/globals';
+import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals';
 import Loading from '../../components/generic/Loading';
+import ChallengesStyle from './ChallengesStyle';
 
 const Challenges = () => {
   const [pageNr, setPageNr] = React.useState(1);
@@ -19,7 +20,7 @@ const Challenges = () => {
   const [challenges, setChallenges] = React.useState([]);
   const [filtersMenu, setFiltersMenu] = React.useState(false);
   const [sortBy, setSortBy] = React.useState(0);
-  const [status, setStatus] = React.useState(0);
+  const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH);
   const [challengeType, setChallengeType] = React.useState(0);
   const [commercial, setCommercial] = React.useState(0);
   const [loading, setLoading] = React.useState(true);
@@ -33,22 +34,6 @@ const Challenges = () => {
     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) => {
     challengeSearchQueryHandler(
       event,
@@ -72,10 +57,6 @@ const Challenges = () => {
     }
   };
 
-  const renderChallenges = () => {
-    return _renderChallenges(pageNr, challenges);
-  };
-
   const toggleFiltersMenu = () => {
     let newFiltersMenu = !filtersMenu;
     setFiltersMenu(newFiltersMenu);
@@ -88,27 +69,18 @@ const Challenges = () => {
           translateX={filtersMenu ? '0' : '100vw'}
           opacity={filtersMenu ? '1' : '0'}
           toggleFiltersMenu={toggleFiltersMenu}
-          sortByHandler={sortByHandler}
-          statusHandler={statusHandler}
-          challengeTypeHandler={challengeTypeHandler}
-          commercialHandler={commercialHandler}
+          sortByHandler={setSortBy}
+          statusHandler={setStatus}
+          challengeTypeHandler={setChallengeType}
+          commercialHandler={setCommercial}
           sortBy={sortBy}
           status={status}
           challengeType={challengeType}
           commercial={commercial}
         />
-        <FlexColumn
-          as="main"
-          alignmentY="flex-start"
-          width="100%"
-          id="start"
-          minHeight="100vh"
-          padding="90px 0 32px 0"
-        >
-          <FlexColumn alignmentX="flex-start" width="80%">
-            <H1 as="h1" margin="0 0 20px 0">
-              Challenges
-            </H1>
+        <ChallengesStyle as="main" id="start">
+          <FlexColumn className="ChallengesStyle__page-container">
+            <H1 as="h1">Challenges</H1>
             <Search
               searchQueryHandler={searchQueryHandler}
               filterButton
@@ -116,23 +88,21 @@ const Challenges = () => {
             />
             <FlexColumn width="100%">
               <Loading visible={loading} />
-              {renderChallenges()}
+              {renderChallenges(pageNr, challenges)}
             </FlexColumn>
           </FlexColumn>
-          {!loading ? (
+          {!loading && (
             <Pager
               pageNr={pageNr}
               pages={CALC_PAGES(challenges)}
               width="48px"
+              borderRadius="64px"
               nextPage={nextPage}
               previousPage={previousPage}
-              borderRadius="64px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
-          ) : (
-            ''
           )}
-        </FlexColumn>
+        </ChallengesStyle>
       </>
     );
   };
@@ -143,65 +113,45 @@ const Challenges = () => {
         <FiltersMenu
           toggleFiltersMenu={toggleFiltersMenu}
           transBackDisplay="none"
-          sortByHandler={sortByHandler}
-          statusHandler={statusHandler}
-          challengeTypeHandler={challengeTypeHandler}
-          commercialHandler={commercialHandler}
+          sortByHandler={setSortBy}
+          statusHandler={setStatus}
+          challengeTypeHandler={setChallengeType}
+          commercialHandler={setCommercial}
           sortBy={sortBy}
           status={status}
           challengeType={challengeType}
           commercial={commercial}
         />
-        <FlexColumn
-          as="main"
-          alignmentY="flex-start"
-          width="100%"
-          id="start"
-          minHeight="100vh"
-          padding="112px 0 82px 310px"
-        >
-          <FlexColumn alignmentX="flex-start" width="80%">
-            <FlexRow width="100%" gap="32px">
-              <FlexColumn
-                alignmentX="flex-start"
-                gap="32px"
-                width="75%"
-                maxWidth="720px"
-              >
+        <ChallengesStyle as="main" id="start">
+          <FlexColumn className="ChallengesStyle__page-container">
+            <FlexRow className="ChallengesStyle__page-header-container">
+              <FlexColumn className="ChallengesStyle__page-header">
                 <H1 as="h1">Challenges</H1>
-                <Body margin="0 0 12px 0" maxWidth="400px">
+                <Body className="ChallengesStyle__header-content">
                   Increase your machine learning skills by competing in our
                   exciting challenges.
                 </Body>
                 <Search searchQueryHandler={searchQueryHandler} />
               </FlexColumn>
-              <Svg
-                src={cupIco}
-                size="contain"
-                width="25%"
-                height="160px"
-                backgroundColor={theme.colors.green}
-              />
+              <Svg src={cupIco} className="ChallengesStyle__main-image" />
             </FlexRow>
             <FlexColumn width="100%">
               <Loading visible={loading} />
-              {renderChallenges()}
+              {renderChallenges(pageNr, challenges)}
             </FlexColumn>
           </FlexColumn>
-          {!loading ? (
+          {!loading && (
             <Pager
               pageNr={pageNr}
               pages={CALC_PAGES(challenges)}
+              width="72px"
               borderRadius="64px"
               nextPage={nextPage}
               previousPage={previousPage}
-              width="72px"
               number={`${pageNr} / ${CALC_PAGES(challenges)}`}
             />
-          ) : (
-            ''
           )}
-        </FlexColumn>
+        </ChallengesStyle>
       </>
     );
   };
diff --git a/src/pages/Challanges/ChallengesStyle.js b/src/pages/Challanges/ChallengesStyle.js
new file mode 100644
index 0000000..d7b62e4
--- /dev/null
+++ b/src/pages/Challanges/ChallengesStyle.js
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { FlexColumn } from '../../utils/containers';
+
+const ChallengesStyle = styled(FlexColumn)`
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 100vh;
+  padding: 90px 0 32px 0;
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
+    padding: 112px 0 82px 310px;
+  }
+
+  .ChallengesStyle__page-container {
+    align-items: flex-start;
+    width: 80%;
+    h1 {
+      margin: 0 0 20px 0;
+      @media (min-width: ${({ theme }) => theme.overMobile}) {
+        margin: 0;
+      }
+    }
+  }
+
+  .ChallengesStyle__page-header-container {
+    width: 100%;
+    gap: 32px;
+  }
+
+  .ChallengesStyle__page-header {
+    align-items: flex-start;
+    gap: 32px;
+    width: 75%;
+    max-width: 720px;
+  }
+
+  .ChallengesStyle__header-content {
+    margin: 0 0 12px 0;
+    max-width: 600px;
+  }
+
+  .ChallengesStyle__main-image {
+    width: 25%;
+    height: 160px;
+    background-color: ${({ theme }) => theme.colors.green};
+    mask-size: contain;
+  }
+`;
+
+export default ChallengesStyle;
diff --git a/src/pages/Challanges/_renderChallenges.js b/src/pages/Challanges/_renderChallenges.js
deleted file mode 100644
index 5984e6b..0000000
--- a/src/pages/Challanges/_renderChallenges.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import {ELEMENTS_PER_PAGE} from '../../utils/globals';
-import MiniChallenge from '../../components/challenges_list/MiniChallenge';
-import {Grid} from '../../utils/containers';
-import styled from 'styled-components';
-
-const ChallengesGrid = styled(Grid)`
-  margin: 32px 0;
-  grid-gap: 32px 0;
-
-  @media (min-width: 1200px) {
-    margin: 96px 0;
-    grid-gap: 64px;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media (min-width: 1600px) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-`;
-
-const _renderChallenges = (pageNr, challenges) => {
-    const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
-    if (challenges && challenges !== []) {
-        return (
-            <ChallengesGrid margin='32px 0' gridGap='32px 0'>
-                {challenges.slice(n, n + ELEMENTS_PER_PAGE).map(
-                    ({title, type, description, mainMetric, bestScore, baseline, prize, deadline, name}, index) => {
-                        return (
-                            <MiniChallenge key={`challenge-${index}`} title={title} type={type}
-                                           description={description} metric={mainMetric} bestScore={bestScore}
-                                           baseline={baseline} prize={prize} deadline={deadline} name={name}/>
-                        );
-                    })}
-            </ChallengesGrid>
-        );
-    }
-    return '';
-};
-
-export default _renderChallenges;
\ 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..be6e572
--- /dev/null
+++ b/src/pages/Challanges/renderChallenges.js
@@ -0,0 +1,65 @@
+import { ELEMENTS_PER_PAGE } from '../../utils/globals';
+import MiniChallenge from '../../components/challenges_list/MiniChallenge';
+import { Grid } from '../../utils/containers';
+import styled from 'styled-components';
+
+const ChallengesGrid = styled(Grid)`
+  margin: 32px 0;
+  grid-gap: 32px 0;
+
+  @media (min-width: 1200px) {
+    margin: 96px 0;
+    grid-gap: 64px;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media (min-width: 1600px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+`;
+
+const renderChallenges = (pageNr, challenges) => {
+  const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
+  if (challenges && challenges !== []) {
+    return (
+      <ChallengesGrid margin="32px 0" gridGap="32px 0">
+        {challenges
+          .slice(n, n + ELEMENTS_PER_PAGE)
+          .map(
+            (
+              {
+                title,
+                type,
+                description,
+                mainMetric,
+                bestScore,
+                baseline,
+                prize,
+                deadline,
+                name,
+              },
+              index
+            ) => {
+              return (
+                <MiniChallenge
+                  key={`challenge-${index}`}
+                  title={title}
+                  type={type}
+                  description={description}
+                  metric={mainMetric}
+                  bestScore={bestScore}
+                  baseline={baseline}
+                  prize={prize}
+                  deadline={deadline}
+                  name={name}
+                />
+              );
+            }
+          )}
+      </ChallengesGrid>
+    );
+  }
+  return '';
+};
+
+export default renderChallenges;
diff --git a/src/utils/globals.js b/src/utils/globals.js
index 019b8f4..83f14a9 100644
--- a/src/utils/globals.js
+++ b/src/utils/globals.js
@@ -42,6 +42,12 @@ const CHALLENGE_SECTIONS = {
   SUBMIT: 5,
 };
 
+const CHALLENGES_STATUS_FILTER = {
+  BOTH: 0,
+  CLOSED: 1,
+  ACTIVE: 2,
+};
+
 const MINI_DESCRIPTION_RENDER = (description) => {
   if (description) {
     if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@@ -113,6 +119,7 @@ export {
   CHALLENGE_SECTIONS,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
+  CHALLENGES_STATUS_FILTER,
   MINI_DESCRIPTION_RENDER,
   RENDER_ICO,
   CALC_PAGES,