Add HashLinks to workshop form and modified project section

Author: Abhishek-kumar09

src/components/SidePanel/Projects.js

@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Projects({title, projects, flat }) {
+function Projects({ title, projects, flat }) {
   const classes = useStyles();
 
   return (

src/views/pages/Courses/Major.js

@@ -106,7 +106,10 @@ export default function Major({ course }) {
 
         <Hidden smDown>
           <Box display="flex" flexDirection="column" mb={3} ml={2}>
-            <Projects title="Learn To Make From This Course" projects={course.projects} />
+            <Projects
+              title="Learn To Make From This Course"
+              projects={course.projects}
+            />
           </Box>
         </Hidden>
       </Box>

src/views/pages/HomeView/CTA.js

@@ -97,7 +97,7 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="contained"

src/views/pages/HomeView/Hero.js

@@ -11,7 +11,7 @@ function Hero({ className, ...rest }) {
   return (
     <div className={className} {...rest}>
       <HeroWithLogo
-        style={{height: "420px"}}
+        style={{ height: '420px' }}
         title="Learn for Cause"
         title2="Code for Cause"
         imageUrl="/static/home/codeforcause.svg"

src/views/pages/WorkshopView/Form.js

@@ -100,7 +100,7 @@ function Form({ ...rest }) {
           We will be able to recommend, and will be able to notify you about our
           events of your interest near you.
         </Typography>
-        <Typography className={classes.subhead} variant="body1" color="primary">
+        <Typography className={classes.subhead} variant="h6" color="primary">
           Contact Information
         </Typography>
         <ValidatorForm onSubmit={handleSubmit}>
@@ -190,11 +190,7 @@ function Form({ ...rest }) {
             ]}
           />
 
-          <Typography
-            className={classes.subhead}
-            variant="body1"
-            color="primary"
-          >
+          <Typography className={classes.subhead} variant="h6" color="primary">
             Workshop Information
           </Typography>
 
@@ -210,16 +206,19 @@ function Form({ ...rest }) {
             validators={['required']}
             errorMessages={['This is a required field']}
           />
+
+          <Typography variant="caption">Referred Date For Workshop</Typography>
           <MuiPickersUtilsProvider utils={DateFnsUtils}>
             <KeyboardDatePicker
               disableToolbar
-              variant="outlined"
+              variant="filled"
               format="MM/dd/yyyy"
               minDate={new Date()}
               margin="normal"
               id="date-picker-inline"
               fullWidth
-              label="Referred Date for Workshop"
+              autoOk
+              autoSave
               value={selectedDate}
               onChange={handleDateChange}
               KeyboardButtonProps={{

src/views/pages/WorkshopView/Hero.js

@@ -4,6 +4,7 @@ import RegisterWorkshop from './RegisterWorkshop';
 import HeroWithOneButton from '../../../components/Hero/HeroWithOneButton';
 import { verticalGradient } from '../../../constants';
 import { makeStyles } from '@material-ui/core';
+import { HashLink as Link } from 'react-router-hash-link';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -18,7 +19,11 @@ function Hero({ className, ...rest }) {
       title="A Workshop With An Experienced Tech Team"
       subtitle="122+ workshops done till now!"
       className={classes.root}
-      component={<RegisterWorkshop />}
+      component={
+        <Link smooth to="#fill-the-workshop-form">
+          <RegisterWorkshop />
+        </Link>
+      }
     />
   );
 }

src/views/pages/WorkshopView/RegisterWorkshop.js

@@ -1,16 +1,11 @@
 import React from 'react';
 import ButtonComponent from '../../../components/Button/ButtonComponent';
 
-const webinarApplicationUrl =
-  'https://docs.google.com/forms/d/e/1FAIpQLSck4rCrdf4VCfnuHuv9CKcyVKLq0MpA132OQhktlJxwxqrdHw/viewform';
-
 function RegisterWorkshopButton({ className }) {
   return (
     <ButtonComponent
-      className={className}
       title="Fill Form For Workshop"
-      href={webinarApplicationUrl}
-      target="_blank"
+      className={className}
     />
   );
 }

src/views/pages/WorkshopView/WorkshopContent.js

@@ -37,12 +37,15 @@ export default function WorkshopContent({ details }) {
           <HeadWithBulletPoints
             details={details.must_do}
           ></HeadWithBulletPoints>
-          <Form />
+          <Form id="fill-the-workshop-form" />
         </Box>
 
         <Hidden smDown>
           <Box display="flex" flexDirection="column" mb={3} ml={2}>
-            <Projects title="Our Previous Workshops" projects={details.projects} />
+            <Projects
+              title="Our Previous Workshops"
+              projects={details.projects}
+            />
           </Box>
         </Hidden>
       </Box>