submit response handle and font headers letter spacingg correction

src/api/challengeSubmissionPost.js

@@ -1,7 +1,7 @@
 import KeyCloakService from '../services/KeyCloakService';
 import {API} from '../utils/globals';
 
-const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setData) => {
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description, setLoading) => {
     const details = {
         'f1': description,
         'f3': repoUrl,
@@ -22,7 +22,10 @@ const challengeSubmission = (challengeName, repoUrl, repoBranch, description, se
         },
         body: formBody
     }).then((resp) => resp.json())
-    .then((data) => setData(data));
+    .then((data) => {
+        setLoading(true);
+        window.location.replace(`https://gonito.net/view-progress/${data}#form`);
+    });
 };
 
 export default challengeSubmission;

src/components/generic/Button.js

@@ -16,6 +16,10 @@ const ButtonStyle = styled(Medium)`
   cursor: pointer;
   transition: transform 0.3s ease-in-out;
 
+  * {
+    cursor: pointer;
+  }
+
   &:hover {
     transform: scale(1.15);
   }

src/components/specific_challenge/Submit.js

@@ -10,7 +10,6 @@ const Submit = (props) => {
     const [description, setDescription] = React.useState('');
     const [repoUrl, setRepoUrl] = React.useState('');
     const [repoBranch, setRepoBranch] = React.useState('');
-    const [responseNumber, setResponseNumber] = React.useState(0);
 
     const descriptionHandler = (e) => {
         setDescription(e.target.value);
@@ -25,8 +24,7 @@ const Submit = (props) => {
     };
 
     const challengeSubmissionSubmit = () => {
-        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, setResponseNumber);
-        console.log(responseNumber);
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description, props.setLoading);
     };
 
     return (

src/pages/Challenge.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Container, FlexColumn, FlexRow, Svg} from '../utils/containers';
 import {useParams} from 'react-router-dom';
-import {H1, Medium} from '../utils/fonts';
+import {H1, H2, Medium} from '../utils/fonts';
 import theme from '../utils/theme';
 import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
 import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
@@ -41,7 +41,7 @@ const Challenge = (props) => {
             case 3:
                 return <MyEntries challengeName={challengeName}/>;
             case 4:
-                return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}/>;
+                return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName} setLoading={setLoading}/>;
             default:
                 return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
         }
@@ -62,12 +62,12 @@ const Challenge = (props) => {
     };
 
     const desktopRender = () => {
+        if (!loading) {
             return (
                 <>
                     <DesktopChallengeMenu setSection={setSection} section={section}/>
                     <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'>
                         <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
-                        <Loading visible={loading}/>
                             <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
                                 <H1 as='h1'>
                                     {challenge.title}
@@ -84,6 +84,17 @@ const Challenge = (props) => {
                     </FlexColumn>
                 </>
             );
+        }
+        else {
+            return (
+                <FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
+                    <H2 as='h1'>
+                        Submission processing...
+                    </H2>
+                    <Loading />
+                </FlexColumn>
+            );
+        }
     };
 
     return (

src/utils/fonts.js

@@ -7,6 +7,7 @@ const H1 = styled(Container)`
   font-weight: 400;
   font-size: 24px;
   line-height: 24px;
+  letter-spacing: 0.1px;
   @media (min-width: ${({theme}) => theme.overMobile}) {
     font-size: 48px;
     line-height: 52px;