src/App.js

@@ -21,7 +21,7 @@ import Loading from './components/generic/Loading';
 import { FlexColumn } from './utils/containers';
 import PopupMessage from './components/generic/PopupMessage';
 import PolicyPrivacy from './pages/PolicyPrivacy';
-import Challenge from './pages/Challenge';
+import Challenge from './components/specific_challenge/Challenge';
 
 const App = () => {
   const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');

src/api/challengeSubmissionPost.js

@@ -1,13 +1,12 @@
 import KeyCloakService from '../services/KeyCloakService';
 import { API } from '../utils/globals';
-import SUBMIT_ACTION from '../pages/Submit/model/SubmitActionEnum';
 
 const challengeSubmission = (
   challengeName,
   repoUrl,
   repoBranch,
   description,
-  dispatch
+  setLoading
 ) => {
   const details = {
     f1: description,
@@ -31,7 +30,7 @@ const challengeSubmission = (
   })
     .then((resp) => resp.json())
     .then((data) => {
-      dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
+      setLoading(true);
       const processUrl = API.replace('/api', '');
       window.location.replace(`${processUrl}/open-view-progress/${data}#form`);
       // console.log(data);

src/api/getChallenges.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActions';
+import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActionEnum';
 import { API } from '../utils/globals';
 
 const getChallenges = (dispatch) => {

src/api/getTags.js

@@ -1,11 +1,10 @@
-import SUBMIT_ACTION from '../pages/Submit/model/SubmitActionEnum';
 import { API } from '../utils/globals';
 
-const getTags = (dispatch) => {
+const getTags = (setTags) => {
   fetch(`${API}/list-tags`)
     .then((response) => response.json())
     .then((data) => {
-      dispatch({ type: SUBMIT_ACTION.LOAD_TAGS, payload: data });
+      setTags(data);
     });
 };
 

src/components/challenges_list/FilterBy.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { FlexColumn, Grid, Svg } from '../../../utils/containers';
-import Filter from '../../../components/generic/Filter';
-import { Body, H3, Medium } from '../../../utils/fonts';
-import arrow from '../../../assets/arrow.svg';
+import { FlexColumn, Grid, Svg } from '../../utils/containers';
+import Filter from '../generic/Filter';
+import { Body, H3, Medium } from '../../utils/fonts';
+import arrow from '../../assets/arrow.svg';
 import Media from 'react-media';
-import theme from '../../../utils/theme';
+import theme from '../../utils/theme';
 
 const FilterBy = (props) => {
   const renderFilterOptions = () => {

src/components/challenges_list/FiltersMenu/FiltersMenu.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { FlexColumn, FlexRow, TransBack } from '../../../../utils/containers';
-import Button from '../../../../components/generic/Button';
-import theme from '../../../../utils/theme';
+import { FlexColumn, FlexRow, TransBack } from '../../../utils/containers';
+import Button from '../../generic/Button';
+import theme from '../../../utils/theme';
 import styled from 'styled-components';
 import FilterBy from '../FilterBy';
 import filterOptions from './filterOptions';
 import Media from 'react-media';
-import CHALLENGES_ACTION from '../../model/ChallengesActions';
+import CHALLENGES_ACTION from '../../../pages/Challanges/model/ChallengesActionEnum';
 
 const FiltersMenuStyle = styled(FlexColumn)`
   position: fixed;

src/components/challenges_list/MiniChallenge.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import {Container, FlexColumn, FlexRow, Grid} from '../../utils/containers';
+import {Body, H3} from '../../utils/fonts';
+import styled from 'styled-components';
+import IconLabel from '../generic/IconLabel';
+import {Link} from 'react-router-dom';
+import {CHALLENGE_PAGE, MINI_DESCRIPTION_RENDER} from '../../utils/globals';
+import theme from '../../utils/theme';
+import PropsTypes from 'prop-types';
+
+const ChallengeStyle = styled(FlexColumn)`
+  padding: 12px;
+  border: 1px solid ${({theme}) => theme.colors.dark05};
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+  position: relative;
+  max-width: 420px;
+
+  * {
+    cursor: pointer;
+  }
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  article {
+    width: 100%;
+    align-items: flex-start;
+
+    p {
+      width: 80%;
+    }
+  }
+
+  @media (min-width: ${({theme}) => theme.overMobile}) {
+    width: 360px;
+    padding: 20px;
+    justify-content: flex-start;
+  }
+`;
+
+const IconsGrid = styled(Grid)`
+  width: 100%;
+  grid-gap: 14px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+
+  @media (min-width: 500px) {
+    grid-template-columns: auto auto auto;
+  }
+`;
+
+const MiniChallenge = (props) => {
+    const deadlineRender = () => {
+        if (props.deadline) {
+            return (
+                <IconLabel size='24px' gap='8px' type='deadline' time={props.deadline}>
+                    {props.deadline.slice(0, 10)}
+                </IconLabel>
+            );
+        }
+    };
+
+    return (
+        <ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
+            <FlexColumn as='article'>
+                <FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
+                    <H3 as='h3' width='85%'>
+                        {props.title}
+                    </H3>
+                    {props.type ? <IconLabel type={props.type} size='30px'/> : 'xxx'}
+                </FlexRow>
+                <Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/>
+                <Body as='p' margin='0 0 14px 0'>
+                    {props.description ? MINI_DESCRIPTION_RENDER(props.description) : 'xxx'}
+                </Body>
+                <IconsGrid>
+                    <IconLabel size='24px' gap='8px' type='metric'>
+                        {props.metric ? props.metric : 'xxx'}
+                    </IconLabel>
+                    <IconLabel size='24px' gap='8px' type='bestScore'>
+                        {props.bestScore ? props.bestScore : 'xxx'}
+                    </IconLabel>
+                    {deadlineRender()}
+                    <IconLabel size='24px' gap='8px' type='baseline'>
+                        {props.baseline ? props.baseline : 'xxx'}
+                    </IconLabel>
+                    {props.prize ? <IconLabel size='24px' gap='8px' type='prize'>
+                        {props.prize}
+                    </IconLabel> : ''}
+                </IconsGrid>
+            </FlexColumn>
+        </ChallengeStyle>
+    );
+};
+
+MiniChallenge.propTypes = {
+    name: PropsTypes.string,
+    title: PropsTypes.string,
+    type: PropsTypes.string,
+    description: PropsTypes.string,
+    metric: PropsTypes.string,
+    bestScore: PropsTypes.string,
+    deadline: PropsTypes.string,
+    baseline: PropsTypes.string,
+    prize: PropsTypes.string
+};
+
+MiniChallenge.defaultProps = {
+    name: 'xxx',
+    title: 'xxx',
+    type: 'xxx',
+    description: 'xxx',
+    metric: 'xxx',
+    bestScore: 'xxx',
+    deadline: 'xxx',
+    baseline: 'xxx',
+    prize: 'xxx'
+};
+
+export default MiniChallenge;

src/components/generic/Button.js

@@ -33,7 +33,6 @@ const Button = (props) => {
       onClick={() => props.handler()}
       width={props.width}
       height={props.height}
-      margin={props.margin}
       color={props.color}
       backgroundColor={props.backgroundColor}
       to={props.to}

src/components/generic/DropdownWithPopup.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FlexColumn, FlexRow, Grid } from '../../utils/containers';
+import { Medium } from '../../utils/fonts';
+import theme from '../../utils/theme';
+import ImageButton from './ImageButton';
+import pencilIco from '../../assets/pencil_ico.svg';
+import styled from 'styled-components';
+import PopUp from './PopUp';
+import { createPortal } from 'react-dom';
+
+const DropdownWithPopupStyle = styled(FlexColumn)`
+  cursor: pointer;
+  gap: 8px;
+  width: 100%;
+  align-items: flex-start;
+  * {
+    cursor: pointer;
+  }
+`;
+
+const DropdownWithPopup = (props) => {
+  const [tagsPopUp, setTagsPopUp] = React.useState(false);
+
+  return (
+    <DropdownWithPopupStyle
+      onClick={() => {
+        if (!tagsPopUp) setTagsPopUp(true);
+      }}
+    >
+      <Medium as="label" htmlFor={props.label}>
+        {props.label}
+      </Medium>
+      <Grid
+        borderRadius="4px"
+        width="100%"
+        height="100px"
+        border={`1px solid ${theme.colors.dark}`}
+        shadow={theme.shadow}
+        onChange={(e) => props.handler(e.target.value)}
+        padding="12px"
+        gridTemplateColumns="1fr auto"
+      >
+        <FlexRow height="100%" alignmentX="flex-start" alignmentY="flex-start">
+          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
+          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
+          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
+          dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa
+        </FlexRow>
+        <ImageButton src={pencilIco} width="20px" height="20px" />
+      </Grid>
+      {tagsPopUp &&
+        createPortal(
+          <PopUp closeHandler={() => setTagsPopUp(false)}></PopUp>,
+          document.body
+        )}
+    </DropdownWithPopupStyle>
+  );
+};
+
+export default DropdownWithPopup;

src/components/generic/PopUp.js

@@ -13,13 +13,10 @@ const PopUpStyle = styled(FlexColumn)`
 
   .PopUpStyle__body {
     width: ${({ width }) => (width ? width : '60%')};
-    height: ${({ height }) => (height ? height : '50%')};
     min-height: ${({ minHeight }) => (minHeight ? minHeight : '50%')};
     padding: ${({ padding }) => (padding ? padding : '48px')};
-    margin: ${({ margin }) => (margin ? margin : '0')};
     border-radius: 12px;
     background-color: ${({ theme }) => theme.colors.white};
-    justify-content: flex-start;
   }
 `;
 
@@ -34,9 +31,7 @@ const PopUp = (props) => {
     <PopUpStyle
       padding={props.padding}
       width={props.width}
-      height={props.height}
       minHeight={props.minHeight}
-      margin={props.margin}
       onClick={closePopUp}
     >
       <FlexColumn

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import theme from '../../utils/theme';
+import theme from '../../../utils/theme';
 import Media from 'react-media';
-import { FlexColumn } from '../../utils/containers';
-import { H2 } from '../../utils/fonts';
+import { FlexColumn } from '../../../utils/containers';
+import { H2 } from '../../../utils/fonts';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
   IS_MOBILE,
-} from '../../utils/globals';
-import Loading from '../../components/generic/Loading';
-import Pager from '../../components/generic/Pager';
-import Table from '../../components/generic/Table';
-import Search from '../../components/generic/Search';
+} from '../../../utils/globals';
+import Loading from '../../generic/Loading';
+import Pager from '../../generic/Pager';
+import Table from '../Table';
+import Search from '../../generic/Search';
 import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
-import getAllEntries from '../../api/getAllEntries';
+import getAllEntries from '../../../api/getAllEntries';
 
 const AllEntries = (props) => {
   const [entriesFromApi, setEntriesFromApi] = React.useState([]);

src/components/specific_challenge/Challenge.js

@@ -3,20 +3,20 @@ import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
 import { useParams } from 'react-router-dom';
 import { H1, Medium } from '../../utils/fonts';
 import theme from '../../utils/theme';
-import MobileChallengeMenu from './components/MobileChallengeMenu';
-import Leaderboard from '../Leaderboard/Leaderboard';
-import Readme from '../Readme';
-import HowTo from '../HowTo/HowTo';
-import MyEntries from '../MyEntries/MyEntries';
-import Submit from '../Submit';
+import MobileChallengeMenu from './MobileChallengeMenu';
+import Leaderboard from './Leaderboard/Leaderboard';
+import Readme from './Readme';
+import HowTo from './HowTo/HowTo';
+import MyEntries from './MyEntries/MyEntries';
+import Submit from './Submit';
 import Media from 'react-media';
-import DesktopChallengeMenu from './components/DesktopChallengeMenu';
+import DesktopChallengeMenu from './DesktopChallengeMenu';
 import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
 import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
-import Loading from '../../components/generic/Loading';
+import Loading from '../generic/Loading';
 import getUser from '../../api/getUser';
-import AllEntries from '../AllEntries/AllEntries';
+import AllEntries from './AllEntries/AllEntries';
 
 const Challenge = (props) => {
   const challengeName = useParams().challengeId;

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FlexColumn } from '../../../utils/containers';
-import { H3 } from '../../../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { H3 } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
-import KeyCloakService from '../../../services/KeyCloakService';
+import KeyCloakService from '../../services/KeyCloakService';
 import { Link } from 'react-router-dom';
 import {
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
   IS_MOBILE,
-} from '../../../utils/globals';
+} from '../../utils/globals';
 
 const DesktopChallengeMenuStyle = styled(FlexColumn)`
   justify-content: flex-start;

src/components/specific_challenge/HowTo/HowTo.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import getFullUser from '../../api/getFullUserInfo';
-import KeyCloakService from '../../services/KeyCloakService';
-import { FlexColumn } from '../../utils/containers';
-import { IS_MOBILE } from '../../utils/globals';
-import HowToContent from './components/HowToContent';
+import getFullUser from '../../../api/getFullUserInfo';
+import KeyCloakService from '../../../services/KeyCloakService';
+import { FlexColumn } from '../../../utils/containers';
+import { IS_MOBILE } from '../../../utils/globals';
+import HowToContent from './sections/HowToContent';
 
 const HowTo = (props) => {
   const [userFullInfo, setUserFullInfo] = React.useState(null);

src/components/specific_challenge/HowTo/sections/HowToContent.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IS_MOBILE } from '../../../utils/globals';
-import { Body, H2, Medium } from '../../../utils/fonts';
-import { FlexColumn, Grid } from '../../../utils/containers';
-import CircleNumber from '../../../components/generic/CircleNumber';
-import CodeShell from '../../../components/generic/CodeShell';
+import { IS_MOBILE } from '../../../../utils/globals';
+import { Body, H2, Medium } from '../../../../utils/fonts';
+import { FlexColumn, Grid } from '../../../../utils/containers';
+import CircleNumber from '../../../generic/CircleNumber';
+import CodeShell from '../../../generic/CodeShell';
 
 const HowToContent = (props) => {
   const pullCodeLineRender = () => {

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import Media from 'react-media';
-import theme from '../../utils/theme';
-import { FlexColumn } from '../../utils/containers';
-import { H2 } from '../../utils/fonts';
-import Table from '../../components/generic/Table';
+import theme from '../../../utils/theme';
+import { FlexColumn } from '../../../utils/containers';
+import { H2 } from '../../../utils/fonts';
+import Table from '../Table';
 import PropsTypes from 'prop-types';
-import getChallengeLeaderboard from '../../api/getChallengeLeaderboard';
+import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
 import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   RENDER_WHEN,
-} from '../../utils/globals';
-import Search from '../../components/generic/Search';
-import Pager from '../../components/generic/Pager';
-import Loading from '../../components/generic/Loading';
+} from '../../../utils/globals';
+import Search from '../../generic/Search';
+import Pager from '../../generic/Pager';
+import Loading from '../../generic/Loading';
 
 const Leaderboard = (props) => {
   const [entriesFromApi, setEntriesFromApi] = React.useState([]);

src/components/specific_challenge/MobileChallengeMenu.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { FlexRow } from '../../../utils/containers';
+import { FlexRow } from '../../utils/containers';
 import styled from 'styled-components';
-import { Medium } from '../../../utils/fonts';
+import { Medium } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
-import KeyCloakService from '../../../services/KeyCloakService';
+import KeyCloakService from '../../services/KeyCloakService';
 import {
   CHALLENGE_SECTIONS,
   MENU_CHALLENGE_SECTIONS_WITH_LOGIN,
   MENU_CHALLENGE_SECTIONS_NO_LOGIN,
-} from '../../../utils/globals';
+} from '../../utils/globals';
 import { Link } from 'react-router-dom';
 
 const MenuOption = styled(Medium)`

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import { FlexColumn } from '../../utils/containers';
-import { H2 } from '../../utils/fonts';
-import getMyEntries from '../../api/getMyEntries';
-import Pager from '../../components/generic/Pager';
+import { FlexColumn } from '../../../utils/containers';
+import { H2 } from '../../../utils/fonts';
+import getMyEntries from '../../../api/getMyEntries';
+import Pager from '../../generic/Pager';
 import {
   CALC_PAGES,
   EVALUATIONS_FORMAT,
   IS_MOBILE,
   RENDER_WHEN,
-} from '../../utils/globals';
+} from '../../../utils/globals';
 import Media from 'react-media';
-import theme from '../../utils/theme';
-import Loading from '../../components/generic/Loading';
-import Table from '../../components/generic/Table';
+import theme from '../../../utils/theme';
+import Loading from '../../generic/Loading';
+import Table from '../Table';
 import myEntriesSearchQueryHandler from './myEntriesSearchQueryHandler';
-import Search from '../../components/generic/Search';
+import Search from '../../generic/Search';
 
 const MyEntries = (props) => {
   const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState({});

src/components/specific_challenge/Readme.js

@@ -1,12 +1,14 @@
 import React from 'react';
-import { FlexColumn } from '../utils/containers';
-import { Body, H2 } from '../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { Body, H2 } from '../../utils/fonts';
 import Media from 'react-media';
-import theme from '../utils/theme';
-import getChallengeFullDescription from '../api/getChallengeFullDescription';
+import theme from '../../utils/theme';
+import getChallengeFullDescription from '../../api/getChallengeFullDescription';
 import styled from 'styled-components';
-import InfoList from '../components/generic/InfoList';
-import Loading from '../components/generic/Loading';
+import InfoList from '../generic/InfoList';
+import Loading from '../generic/Loading';
+import PropsTypes from 'prop-types';
+import MiniChallenge from '../challenges_list/MiniChallenge';
 import { marked } from 'marked';
 
 const ReadmeStyle = styled(Body)`
@@ -152,4 +154,14 @@ const Readme = (props) => {
   );
 };
 
+MiniChallenge.propTypes = {
+  challengeName: PropsTypes.string,
+  description: PropsTypes.string,
+};
+
+MiniChallenge.defaultProps = {
+  challengeName: '',
+  description: '',
+};
+
 export default Readme;

src/components/specific_challenge/Submit.js

@@ -2,58 +2,40 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { FlexColumn } from '../../utils/containers';
 import { H2, Menu } from '../../utils/fonts';
-import SubmitInput from '../../components/generic/SubmitInput';
-import Button from '../../components/generic/Button';
+import SubmitInput from '../generic/SubmitInput';
+import Button from '../generic/Button';
 import theme from '../../utils/theme';
 import challengeSubmission from '../../api/challengeSubmissionPost';
-import Loading from '../../components/generic/Loading';
+import Loading from '../generic/Loading';
 import getTags from '../../api/getTags';
-import TagsChoose from './components/TagsChoose';
-import SubmitReducer from './model/SubmitReducer';
-import SUBMIT_ACTION from './model/SubmitActionEnum';
+import DropdownWithPopup from '../generic/DropdownWithPopup';
 
 const Submit = (props) => {
-  const [state, dispatch] = React.useReducer(SubmitReducer, {
-    description: '',
-    repoUrl: '',
-    repoBranch: '',
-    submissionLoading: false,
-    tags: [],
-    submissionTags: [],
-  });
+  const [description, setDescription] = React.useState('');
+  const [repoUrl, setRepoUrl] = React.useState('');
+  const [repoBranch, setRepoBranch] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [tags, setTags] = React.useState([]);
+  // eslint-disable-next-line no-unused-vars
+  const [submissionTags, setSubmissionTags] = React.useState([]);
 
   React.useMemo(() => {
-    getTags(dispatch);
+    getTags(setTags);
   }, []);
 
   const challengeSubmissionSubmit = () => {
-    dispatch({ type: SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING });
+    setLoading(true);
     challengeSubmission(
       props.challengeName,
-      state.repoUrl,
-      state.repoBranch,
-      state.description,
-      dispatch
+      repoUrl,
+      repoBranch,
+      description,
+      setLoading
     );
   };
 
-  const setDescription = (value) => {
-    dispatch({ type: SUBMIT_ACTION.SET_DESCRIPTION, payload: value });
-  };
-
-  const setRepoUrl = (value) => {
-    dispatch({ type: SUBMIT_ACTION.SET_REPO_URL, payload: value });
-  };
-
-  const setRepoBranch = (value) => {
-    dispatch({ type: SUBMIT_ACTION.SET_REPO_BRANCH, payload: value });
-  };
-
-  const addSubmissionTag = React.useCallback((value) => {
-    dispatch({ type: SUBMIT_ACTION.ADD_SUBMISSION_TAG, payload: value });
-  }, []);
-
-  if (!state.submissionLoading) {
+  if (!loading) {
+    console.log(tags);
     return (
       <FlexColumn
         margin="40px 0 0 0"
@@ -74,11 +56,9 @@ const Submit = (props) => {
           />
           <SubmitInput label="Submission repo URL" handler={setRepoUrl} />
           <SubmitInput label="Submission repo branch" handler={setRepoBranch} />
-          <TagsChoose
+          <DropdownWithPopup
             label="Submission tags"
-            addSubmissionTag={addSubmissionTag}
-            tags={state.tags}
-            submissionTags={state.submissionTags}
+            handler={setSubmissionTags}
           />
         </FlexColumn>
         <Button width="122px" height="44px" handler={challengeSubmissionSubmit}>

src/pages/Challanges/Challenges.js

@@ -3,13 +3,13 @@ import Media from 'react-media';
 import theme from '../../utils/theme';
 import getChallenges from '../../api/getChallenges';
 import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
-import FiltersMenu from './components/FiltersMenu';
+import FiltersMenu from '../../components/challenges_list/FiltersMenu';
 import statusFilterHandle from './functions/statusFilterHandle';
 import ChallengesMobile from './components/ChallengesMobile';
 import ChallengesDesktop from './components/ChallengesDesktop';
 import challengeSearchQueryHandler from './functions/challengeSearchQueryHandler';
 import ChallengesReducer from './model/ChallengesReducer';
-import CHALLENGES_ACTION from './model/ChallengesActions';
+import CHALLENGES_ACTION from './model/ChallengesActionEnum';
 
 const Challenges = () => {
   const [state, dispatch] = React.useReducer(ChallengesReducer, {

src/pages/Challanges/components/ChallengesMobile.js

@@ -7,7 +7,7 @@ import Search from '../../../components/generic/Search';
 import { CALC_PAGES } from '../../../utils/globals';
 import renderChallenges from '../functions/renderChallenges';
 import Loading from '../../../components/generic/Loading';
-import CHALLENGES_ACTION from '../model/ChallengesActions';
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
 
 const ChallengesMobile = (props) => {
   return (

src/pages/Challanges/components/MiniChallenge.js

@@ -1,121 +0,0 @@
-import React from 'react';
-import {
-  Container,
-  FlexColumn,
-  FlexRow,
-  Grid,
-} from '../../../utils/containers';
-import { Body, H3 } from '../../../utils/fonts';
-import styled from 'styled-components';
-import IconLabel from '../../../components/generic/IconLabel';
-import { Link } from 'react-router-dom';
-import {
-  CHALLENGE_PAGE,
-  MINI_DESCRIPTION_RENDER,
-} from '../../../utils/globals';
-import theme from '../../../utils/theme';
-
-const ChallengeStyle = styled(FlexColumn)`
-  padding: 12px;
-  border: 1px solid ${({ theme }) => theme.colors.dark05};
-  cursor: pointer;
-  transition: transform 0.3s ease-in-out;
-  position: relative;
-  max-width: 420px;
-
-  * {
-    cursor: pointer;
-  }
-
-  &:hover {
-    transform: scale(1.05);
-  }
-
-  article {
-    width: 100%;
-    align-items: flex-start;
-
-    p {
-      width: 80%;
-    }
-  }
-
-  @media (min-width: ${({ theme }) => theme.overMobile}) {
-    width: 360px;
-    padding: 20px;
-    justify-content: flex-start;
-  }
-`;
-
-const IconsGrid = styled(Grid)`
-  width: 100%;
-  grid-gap: 14px;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-
-  @media (min-width: 500px) {
-    grid-template-columns: auto auto auto;
-  }
-`;
-
-const MiniChallenge = (props) => {
-  const deadlineRender = () => {
-    if (props.deadline) {
-      return (
-        <IconLabel size="24px" gap="8px" type="deadline" time={props.deadline}>
-          {props.deadline.slice(0, 10)}
-        </IconLabel>
-      );
-    }
-  };
-
-  return (
-    <ChallengeStyle as={Link} to={`${CHALLENGE_PAGE}/${props.name}`}>
-      <FlexColumn as="article">
-        <FlexRow
-          margin="0 0 14px 0"
-          gap="12px"
-          width="100%"
-          alignmentX="space-between"
-        >
-          <H3 as="h3" width="85%">
-            {props.title}
-          </H3>
-          {props.type ? <IconLabel type={props.type} size="30px" /> : 'xxx'}
-        </FlexRow>
-        <Container
-          margin="0 0 14px 0"
-          width="85%"
-          height="1px"
-          backgroundColor={theme.colors.dark05}
-        />
-        <Body as="p" margin="0 0 14px 0">
-          {props.description
-            ? MINI_DESCRIPTION_RENDER(props.description)
-            : 'xxx'}
-        </Body>
-        <IconsGrid>
-          <IconLabel size="24px" gap="8px" type="metric">
-            {props.metric ? props.metric : 'xxx'}
-          </IconLabel>
-          <IconLabel size="24px" gap="8px" type="bestScore">
-            {props.bestScore ? props.bestScore : 'xxx'}
-          </IconLabel>
-          {deadlineRender()}
-          <IconLabel size="24px" gap="8px" type="baseline">
-            {props.baseline ? props.baseline : 'xxx'}
-          </IconLabel>
-          {props.prize ? (
-            <IconLabel size="24px" gap="8px" type="prize">
-              {props.prize}
-            </IconLabel>
-          ) : (
-            ''
-          )}
-        </IconsGrid>
-      </FlexColumn>
-    </ChallengeStyle>
-  );
-};
-
-export default MiniChallenge;

src/pages/Challanges/functions/challengeSearchQueryHandler.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from '../model/ChallengesActions';
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
 
 const challengeSearchQueryHandler = (event, challengesFromAPI, dispatch) => {
   let searchQuery = event.target.value;

src/pages/Challanges/functions/renderChallenges.js

@@ -1,5 +1,5 @@
 import { ELEMENTS_PER_PAGE } from '../../../utils/globals';
-import MiniChallenge from '../components/MiniChallenge';
+import MiniChallenge from '../../../components/challenges_list/MiniChallenge';
 import { Grid } from '../../../utils/containers';
 import styled from 'styled-components';
 

src/pages/Challanges/functions/statusFilterHandle.js

@@ -1,5 +1,5 @@
 import { CHALLENGES_STATUS_FILTER } from '../../../utils/globals';
-import CHALLENGES_ACTION from '../model/ChallengesActions';
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
 
 const dateIsOlder = (newerDate, olderDate) => {
   if (newerDate.year > olderDate.year) return true;

src/pages/Challanges/model/ChallengesReducer.js

@@ -1,4 +1,4 @@
-import CHALLENGES_ACTION from './ChallengesActions';
+import CHALLENGES_ACTION from './ChallengesActionEnum';
 
 const ChallengesReducer = (state, action) => {
   switch (action.type) {

src/pages/Challenge/index.js

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

src/pages/Submit/components/TagsChoose/TagsChoose.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { FlexRow, Grid } from '../../../../utils/containers';
-import { Medium } from '../../../../utils/fonts';
-import ImageButton from '../../../../components/generic/ImageButton';
-import pencilIco from '../../../../assets/pencil_ico.svg';
-import TagsChoosePopUp from '../TagsChoosePopup/TagsChoosePopUp';
-import { createPortal } from 'react-dom';
-import TagsChooseStyle from './TagsChooseStyle';
-
-const TagsChoose = (props) => {
-  const [tagsPopUp, setTagsPopUp] = React.useState(false);
-
-  return (
-    <TagsChooseStyle
-      onClick={() => {
-        if (!tagsPopUp) setTagsPopUp(true);
-      }}
-    >
-      <Medium as="label" htmlFor={props.label}>
-        {props.label}
-      </Medium>
-      <Grid
-        className="TagsChooseStyle__grid"
-        onChange={(e) => props.handler(e.target.value)}
-      >
-        <FlexRow className="TagsChooseStyle__tags-container">tags</FlexRow>
-        <ImageButton src={pencilIco} width="20px" height="20px" />
-      </Grid>
-      {tagsPopUp &&
-        createPortal(
-          <TagsChoosePopUp
-            tags={props.tags}
-            submissionTags={props.submissionTags}
-            addSubmissionTag={props.addSubmissionTag}
-            setTagsPopUp={setTagsPopUp}
-          />,
-          document.body
-        )}
-    </TagsChooseStyle>
-  );
-};
-
-export default TagsChoose;

src/pages/Submit/components/TagsChoose/TagsChooseStyle.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { FlexColumn } from '../../../../utils/containers';
-
-const TagsChooseStyle = styled(FlexColumn)`
-  cursor: pointer;
-  gap: 8px;
-  width: 100%;
-  align-items: flex-start;
-  * {
-    cursor: pointer;
-  }
-
-  .TagsChooseStyle__grid {
-    border-radius: 4px;
-    width: 100%;
-    height: 100px;
-    border: 1px solid ${({ theme }) => theme.colors.dark};
-    box-shadow: 1px 2px 4px rgba(52, 52, 52, 0.25);
-    padding: 12px;
-    grid-template-columns: 1fr auto;
-  }
-
-  .TagsChooseStyle__tags-container {
-    height: 100%;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-`;
-
-export default TagsChooseStyle;

src/pages/Submit/components/TagsChoose/index.js

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

src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUp.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import PopUp from '../../../../components/generic/PopUp';
-import { FlexColumn, FlexRow } from '../../../../utils/containers';
-import Search from '../../../../components/generic/Search';
-import theme from '../../../../utils/theme';
-import Button from '../../../../components/generic/Button';
-import TagsChoosePopUpStyle from './TagsChoosePopUpStyle';
-import tagColorHandle from './functions/tagColorHandle';
-
-const TagsChoosePopUp = (props) => {
-  return (
-    <PopUp
-      width="50%"
-      height="80vh"
-      padding="36px 32px 0"
-      closeHandler={() => props.setTagsPopUp(false)}
-    >
-      <TagsChoosePopUpStyle>
-        <Search />
-        <FlexColumn as="list" className="TagsChoosePopUpStyle__tags-list">
-          {props.tags.map((tag, index) => {
-            return (
-              <FlexRow
-                key={`tag-${index}`}
-                onClick={() => props.addSubmissionTag(tag.name)}
-                className="TagsChoosePopUpStyle__tag-item"
-                backgroundColor={tagColorHandle(
-                  theme,
-                  index,
-                  tag,
-                  props.submissionTags
-                )}
-              >
-                {tag.name}
-              </FlexRow>
-            );
-          })}
-        </FlexColumn>
-        <FlexRow width="100%" gap="20px" alignmentX="flex-start">
-          <Button height="32px" width="76px">
-            Done
-          </Button>
-          <Button
-            height="32px"
-            width="76px"
-            backgroundColor={theme.colors.dark08}
-          >
-            Clear
-          </Button>
-          <Button
-            height="32px"
-            width="76px"
-            backgroundColor={theme.colors.dark}
-            margin="0 0 0 auto"
-          >
-            Cancel
-          </Button>
-        </FlexRow>
-      </TagsChoosePopUpStyle>
-    </PopUp>
-  );
-};
-
-export default TagsChoosePopUp;

src/pages/Submit/components/TagsChoosePopup/TagsChoosePopUpStyle.js

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-import { FlexColumn } from '../../../../utils/containers';
-
-const TagsChoosePopUpStyle = styled(FlexColumn)`
-  width: 100%;
-  justify-content: flex-start;
-  height: 100%;
-  gap: 24px;
-
-  .TagsChoosePopUpStyle__tags-list {
-    height: 80%;
-    width: 100%;
-    overflow-y: scroll;
-    justify-content: flex-start;
-  }
-
-  .TagsChoosePopUpStyle__tag-item {
-    height: 42px;
-    width: 100%;
-    justify-content: flex-start;
-    padding: 12px;
-    cursor: pointer;
-    transition: background-color 0.3s ease-in-out;
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.green03};
-    }
-  }
-`;
-
-export default TagsChoosePopUpStyle;

src/pages/Submit/components/TagsChoosePopup/functions/tagColorHandle.js

@@ -1,7 +0,0 @@
-const tagColorHandle = (theme, index, tag, tags) => {
-  if (tags.includes(tag.name)) return theme.colors.green;
-  if (index % 2 === 0) return theme.colors.dark01;
-  return theme.colors.white;
-};
-
-export default tagColorHandle;

src/pages/Submit/components/TagsChoosePopup/index.js

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

src/pages/Submit/index.js

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

src/pages/Submit/model/SubmitActionEnum.js

@@ -1,12 +0,0 @@
-const SUBMIT_ACTION = {
-  SET_DESCRIPTION: 'set_description',
-  SET_REPO_URL: 'set_repo_url',
-  SET_REPO_BRANCH: 'set_repo_branch',
-  TOGGLE_SUBMISSION_LOADING: 'toggle_submission_loading',
-  LOAD_TAGS: 'load_tags',
-  ADD_SUBMISSION_TAGS: 'add_submission_tag',
-  REMOVE_SUBMISSION_TAGS: 'remove_submission_tag',
-  CLEAR_SUBMISSION_TAGS: 'clear_submission_tags',
-};
-
-export default SUBMIT_ACTION;

src/pages/Submit/model/SubmitReducer.js

@@ -1,30 +0,0 @@
-import SUBMIT_ACTION from './SubmitActionEnum';
-
-const SubmitReducer = (state, action) => {
-  console.log('SubmitReducer');
-  let initTags = state.tags;
-  let newSubmissionTags = state.submissionTags;
-  switch (action.type) {
-    case SUBMIT_ACTION.SET_DESCRIPTION:
-      return { ...state, description: action.payload };
-    case SUBMIT_ACTION.SET_REPO_BRANCH:
-      return { ...state, repoBranch: action.payload };
-    case SUBMIT_ACTION.SET_REPO_URL:
-      return { ...state, repoUrl: action.payload };
-    case SUBMIT_ACTION.TOGGLE_SUBMISSION_LOADING:
-      return { ...state, submissionLoading: !state.submissionLoading };
-    case SUBMIT_ACTION.LOAD_TAGS:
-      if (state.tags.length === 0) initTags = action.payload;
-      return { ...state, tags: initTags };
-    case SUBMIT_ACTION.ADD_SUBMISSION_TAG:
-      if (!newSubmissionTags.includes(action.payload))
-        newSubmissionTags.push(action.payload);
-      return { ...state, submissionTags: newSubmissionTags };
-    case SUBMIT_ACTION.CLEAR_SUBMISSION_TAGS:
-      return { ...state, submissionTags: [] };
-    default:
-      throw new Error('Undefined action in SubmitReducer!');
-  }
-};
-
-export default SubmitReducer;

src/utils/colors.js

@@ -1,7 +1,6 @@
 const colors = {
     white: '#FCFCFC',
     green: '#1B998B',
-  blue: '#4B8FF0',
     green03: 'rgba(27, 153, 139, 0.3)',
     green05: 'rgba(27, 153, 139, 0.5)',
     dark: '#343434',

src/utils/containers.js

@@ -37,7 +37,6 @@ const Container = styled.div`
   list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')};
   overflow-wrap: ${({ overflowWrap }) =>
     overflowWrap ? overflowWrap : 'normal'};
-  overflow-y: ${({ overflowY }) => (overflowY ? overflowY : 'none')};
 `;
 
 const FlexRow = styled(Container)`