new components structure

src/App.js

@@ -3,7 +3,7 @@ import theme from './utils/theme';
 import LandingPage from './pages/LandingPage';
 import Challenges from './pages/Challanges/Challenges';
 import {BrowserRouter, Route, Routes} from 'react-router-dom';
-import NavBar from './components/elements/NavBar';
+import NavBar from './components/navigation/NavBar';
 import {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals';
 import Challenge from './pages/Challenge';
 import Register from './pages/auth/Register';
@@ -12,9 +12,9 @@ import LoginWithEmail from './pages/auth/LoginWithEmail';
 import RegisterWithEmail from './pages/auth/RegisterWithEmail';
 import KeyCloakService from './services/KeyCloakService';
 import React from 'react';
-import LoggedBar from './components/elements/LoggedBar';
+import LoggedBar from './components/navigation/LoggedBar';
 import addUser from './api/addUser';
-import Loading from './components/elements/Loading';
+import Loading from './components/generic/Loading';
 import {FlexColumn} from './utils/containers';
 
 const App = () => {

src/components/challenges_list/FilterBy.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {FlexColumn, Grid, Svg} from '../../utils/containers';
-import Filter from '../elements/Filter';
+import Filter from '../generic/Filter';
 import {Body, H3, Medium} from '../../utils/fonts';
 import arrow from '../../assets/arrow.svg';
 import Media from 'react-media';

src/components/challenges_list/FiltersMenu/FiltersMenu.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {FlexColumn, FlexRow, TransBack} from '../../../utils/containers';
-import Button from '../Button';
+import Button from '../../generic/Button';
 import theme from '../../../utils/theme';
 import styled from 'styled-components';
-import FilterBy from '../../sections/FilterBy';
+import FilterBy from '../FilterBy';
 import filterOptions from './filterOptions';
 import Media from 'react-media';
 import PropsTypes from 'prop-types';

src/components/challenges_list/MiniChallenge.js

@@ -2,7 +2,7 @@ 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 '../elements/IconLabel';
+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';

src/components/content_sections/Commercial.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FlexColumn, FlexRow, ImageBackground} from '../../utils/containers';
 import {Body, H2, Medium} from '../../utils/fonts';
-import CircleNumber from '../elements/CircleNumber';
+import CircleNumber from '../generic/CircleNumber';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import commercialImage from '../../assets/commercial-image.svg';

src/components/content_sections/Hero.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Body, H1, Medium} from '../../utils/fonts';
 import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
 import theme from '../../utils/theme';
-import ButtonLink from '../elements/ButtonLink';
+import ButtonLink from '../generic/ButtonLink';
 import Media from 'react-media';
 import codepenIco from '../../assets/codepen_ico.svg';
 import styled from 'styled-components';

src/components/content_sections/Partnerships.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {FlexColumn, Grid} from '../../utils/containers';
 import {H2} from '../../utils/fonts';
-import Placeholder from '../elements/Placeholder';
+import Placeholder from '../generic/Placeholder';
 import styled from 'styled-components';
 
 const PartnershipsStyle = styled(FlexColumn)`

src/components/navigation/NavBar/NavBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Container, FlexRow, Svg} from '../../../utils/containers';
-import Logo from '../Logo';
+import Logo from '../../generic/Logo';
 import styled from 'styled-components';
 import menuButtonIcon from '../../../assets/menu-button.svg';
 import MobileNavMenu from '../MobileNavMenu';

src/components/specific_challenge/HowTo.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers';
 import {Body, H2, H3, Medium} from '../../utils/fonts';
-import CircleNumber from '../elements/CircleNumber';
-import CodeShell from '../elements/CodeShell';
+import CircleNumber from '../generic/CircleNumber';
+import CodeShell from '../generic/CodeShell';
 import cubeIcon from '../../assets/cube_ico.svg';
 import theme from '../../utils/theme';
 import {IS_MOBILE} from '../../utils/globals';
@@ -69,15 +69,15 @@ const HowTo = () => {
                 </Body>
                 <CodeShell codeBlockIndex={3}
                            commands={['cd challenging-america-geo-prediction',
-                                      'git checkout -b my-brilliant-branch # switch to some other branch',
-                                      'git add foo.py build.sh # add your source codes',
-                                      /* eslint-disable */
-                                      `git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
+                               'git checkout -b my-brilliant-branch # switch to some other branch',
+                               'git add foo.py build.sh # add your source codes',
+                               /* eslint-disable */
+                               `git add gonito.yaml # it's a good practice to add metadata file, see below`]}/>
                 <CodeShell codeBlockIndex={4}
                            commands={['git add dev-0/out.tsv test-A/out.tsv # add your output files',
-                           /* eslint-disable */
-                           `git commit -m 'my brilliant solution'`,
-                           'git push origin my-brilliant-branch']}/>
+                               /* eslint-disable */
+                               `git commit -m 'my brilliant solution'`,
+                               'git push origin my-brilliant-branch']}/>
             </FlexColumn>
             <FlexColumn as='article' gap={IS_MOBILE() ? '16px' : '24px'} alignmentX='flex-start'>
                 <H2 as='h2' margin='0 0 8px 0'>
@@ -213,14 +213,14 @@ const HowTo = () => {
                     </Body>
                     <CodeShell codeBlockIndex={5} disablePrompt
                                commands={['description: This my brilliant solution',
-                               'tags:', '\t- neutral-network', '\t- left-to-right', 
-                               'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
-                               'unwanted-params:', '\t- model-file', '\t- vocab-file',
-                               'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
-                               'links:', '\t- title: "Some external link"', 
-                               '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
-                               '\t\s\shttps://example.com/foo-bar-baz-123"', 
-                               '\t- url: "https://example.net/bare-link-without-text']}/>
+                                   'tags:', '\t- neutral-network', '\t- left-to-right',
+                                   'params:', '\tepochs: 10', '\tlearning-rate: 0.01',
+                                   'unwanted-params:', '\t- model-file', '\t- vocab-file',
+                                   'param-files:', '\t- “*.yaml”*', '\t- config/*.yaml*/',
+                                   'links:', '\t- title: "Some external link"',
+                                   '\t\s\surl: "https://example.org/xyz"', '\t- title: "Yet another link"',
+                                   '\t\s\shttps://example.com/foo-bar-baz-123"',
+                                   '\t- url: "https://example.net/bare-link-without-text']}/>
                     <Body>
                         It might seem a little bit complicated, but you could simply use the method which is the most
                         convenient for you.

src/components/specific_challenge/Leaderboard/Leaderboard.js

@@ -3,14 +3,14 @@ import Media from 'react-media';
 import theme from '../../../utils/theme';
 import {FlexColumn} from '../../../utils/containers';
 import {H2} from '../../../utils/fonts';
-import Table from '../../elements/Table';
+import Table from '../Table';
 import PropsTypes from 'prop-types';
 import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard';
 import _tableSearchQueryHandler from './_tableSearchQueryHandler';
 import {CALC_PAGES, EVALUATIONS_FORMAT, RENDER_WHEN} from '../../../utils/globals';
-import Search from '../../elements/Search';
-import Pager from '../../elements/Pager';
-import Loading from '../../elements/Loading';
+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/MyEntries.js

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

src/components/specific_challenge/Readme.js

@@ -6,10 +6,10 @@ import theme from '../../utils/theme';
 import getChallengeFullDescription from '../../api/getChallengeFullDescription';
 import {markdown} from 'markdown';
 import styled from 'styled-components';
-import InfoList from '../elements/InfoList';
-import Loading from '../elements/Loading';
+import InfoList from '../generic/InfoList';
+import Loading from '../generic/Loading';
 import PropsTypes from 'prop-types';
-import MiniChallenge from './MiniChallenge';
+import MiniChallenge from '../challenges_list/MiniChallenge';
 
 const ReadmeStyle = styled(Body)`
   h3 {

src/components/specific_challenge/Submit.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {FlexColumn} from '../../utils/containers';
 import {H2, Menu} from '../../utils/fonts';
-import SubmitInput from '../elements/SubmitInput';
-import Button from '../elements/Button';
+import SubmitInput from '../generic/SubmitInput';
+import Button from '../generic/Button';
 import theme from '../../utils/theme';
 import challengeSubmission from '../../api/challengeSubmissionPost';
 

src/normalize.css

@@ -42,7 +42,7 @@ h1 {
     margin: 0.67em 0;
 }
 
-/* Grouping content
+/* Grouping content_sections
      ========================================================================== */
 
 /**
@@ -138,7 +138,7 @@ sup {
     top: -0.5em;
 }
 
-/* Embedded content
+/* Embedded content_sections
      ========================================================================== */
 
 /**

src/pages/Challanges/Challenges.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {Body, H1} from '../../utils/fonts';
 import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
-import Search from '../../components/elements/Search';
-import Pager from '../../components/elements/Pager';
-import FiltersMenu from '../../components/elements/FiltersMenu';
+import Search from '../../components/generic/Search';
+import Pager from '../../components/generic/Pager';
+import FiltersMenu from '../../components/challenges_list/FiltersMenu';
 import _searchQueryHandler from './_searchQueryHandler';
 import _renderChallenges from './_renderChallenges';
 import Media from 'react-media';
@@ -11,7 +11,7 @@ import theme from '../../utils/theme';
 import cupIco from '../../assets/cup_ico.svg';
 import getChallenges from '../../api/getChallenges';
 import {CALC_PAGES} from '../../utils/globals';
-import Loading from '../../components/elements/Loading';
+import Loading from '../../components/generic/Loading';
 
 const Challenges = () => {
     const [pageNr, setPageNr] = React.useState(1);

src/pages/Challanges/_renderChallenges.js

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

src/pages/Challenge.js

@@ -3,18 +3,18 @@ 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/elements/MobileChallengeMenu';
-import Leaderboard from '../components/sections/Leaderboard/Leaderboard';
-import Readme from '../components/sections/Readme';
-import HowTo from '../components/sections/HowTo';
-import MyEntries from '../components/sections/MyEntries';
-import Submit from '../components/sections/Submit';
+import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
+import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
+import Readme from '../components/specific_challenge/Readme';
+import HowTo from '../components/specific_challenge/HowTo';
+import MyEntries from '../components/specific_challenge/MyEntries';
+import Submit from '../components/specific_challenge/Submit';
 import Media from 'react-media';
-import DesktopChallengeMenu from '../components/elements/DesktopChallengeMenu';
+import DesktopChallengeMenu from '../components/specific_challenge/DesktopChallengeMenu';
 import {RENDER_ICO} from '../utils/globals';
 import textIco from '../assets/text_ico.svg';
 import getChallengeInfo from '../api/getChallengeInfo';
-import Loading from '../components/elements/Loading';
+import Loading from '../components/generic/Loading';
 
 const Challenge = () => {
     const challengeName = useParams().challengeId;

src/pages/LandingPage.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import {FlexColumn} from '../utils/containers';
-import Motivation from '../components/sections/Motivation';
-import Csi from '../components/sections/Csi';
-import Commercial from '../components/sections/Commercial';
-import Hero from '../components/sections/Hero';
-import Partnerships from '../components/sections/Partnerships';
+import Motivation from '../components/content_sections/Motivation';
+import Csi from '../components/content_sections/Csi';
+import Commercial from '../components/content_sections/Commercial';
+import Hero from '../components/content_sections/Hero';
+import Partnerships from '../components/content_sections/Partnerships';
 import styled from 'styled-components';
 
 const LandingPageStyle = styled(FlexColumn)`

src/pages/auth/Login.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {FlexColumn} from '../../utils/containers';
-import AuthHeader from '../../components/elements/AuthHeader';
+import AuthHeader from '../../components/auth/AuthHeader';
 import {Body, Medium} from '../../utils/fonts';
 import {Link} from 'react-router-dom';
-import AuthOption from '../../components/elements/AuthOption';
+import AuthOption from '../../components/auth/AuthOption';
 import githubIco from '../../assets/github_ico.svg';
 import emailIco from '../../assets/email_ico.svg';
 import googleIco from '../../assets/google_ico.svg';

src/pages/auth/LoginWithEmail.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import AuthHeader from '../../components/elements/AuthHeader';
+import AuthHeader from '../../components/auth/AuthHeader';
 import OptionsContainerStyle from './styles/OptionsContainerStyle';
 import MainContainerStyle from './styles/MainContainerStyle';
-import AuthInput from '../../components/elements/AuthInput';
-import Button from '../../components/elements/Button';
+import AuthInput from '../../components/auth/AuthInput';
+import Button from '../../components/generic/Button';
 import {FlexRow} from '../../utils/containers';
 import LinkStyle from './styles/LinkStyle';
 import {Link} from 'react-router-dom';

src/pages/auth/Register.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import {FlexColumn} from '../../utils/containers';
-import AuthHeader from '../../components/elements/AuthHeader';
+import AuthHeader from '../../components/auth/AuthHeader';
 import {Body, Medium} from '../../utils/fonts';
 import {Link} from 'react-router-dom';
-import AuthOption from '../../components/elements/AuthOption';
+import AuthOption from '../../components/auth/AuthOption';
 import githubIco from '../../assets/github_ico.svg';
 import emailIco from '../../assets/email_ico.svg';
 import googleIco from '../../assets/google_ico.svg';

src/pages/auth/RegisterWithEmail.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import AuthHeader from '../../components/elements/AuthHeader';
+import AuthHeader from '../../components/auth/AuthHeader';
 import OptionsContainerStyle from './styles/OptionsContainerStyle';
-import AuthInput from '../../components/elements/AuthInput';
+import AuthInput from '../../components/auth/AuthInput';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import {FlexRow} from '../../utils/containers';
-import Button from '../../components/elements/Button';
+import Button from '../../components/generic/Button';
 import MainContainerStyle from './styles/MainContainerStyle';
 
 const RegisterWithEmail = () => {