update application procedure in course page

Author: KeenWarrior

src/data/courses/advanced/CompetitiveJava.js

@@ -4,7 +4,7 @@ export const competitiveJava = {
   level: 'Level 2',
   link: '/competitive-programming-using-java',
   domain: 'Interview Prepration',
-  title: 'Competitve Programming using Java',
+  title: 'Competitive Programming using Java',
   upcoming: 'Oct 1st',
   schedule: [
     {

src/views/pages/ApplicationsView/ApplicationSteps.js

@@ -13,7 +13,6 @@ import {
   SelectValidator
 } from 'react-material-ui-form-validator';
 
-// import axios from 'axios';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -337,36 +336,52 @@ function FormChallenge({ setActiveStep, data, setData }) {
     setActiveStep(3);
   };
 
+  // useEffect(() => {
+  //   ValidatorForm.addValidationRule('isNotShort', value => {
+  //     console.log(value);
+  //     if (value.length < 100) {
+  //       return false;
+  //     }
+  //     return true;
+  //   });
+  // });
+
   return (
     <ValidatorForm onSubmit={handleSubmit}>
       <TextValidator
         className={classes.textField}
         multiline
         fullWidth
-        label="Why ?"
+        label="Why do you wish to take up this course?"
         variant="outlined"
         onChange={handleChange}
         rows={4}
+        validators={['required']}
+        errorMessages={['College is a required field']}
       />
 
       <TextValidator
         className={classes.textField}
         multiline
         fullWidth
-        label="What is your expectation from this course?"
+        label="Why do you deserve this scholarship?"
         variant="outlined"
         onChange={handleChange}
         rows={4}
+        validators={['required']}
+        errorMessages={['College is a required field']}
       />
 
       <TextValidator
         className={classes.textField}
         multiline
         fullWidth
-        label="What is your viewpoint toward Coding in Community Contribution?"
+        label="What is your viewpoint towards Coding for a Cause?"
         variant="outlined"
         onChange={handleChange}
         rows={4}
+        validators={['required']}
+        errorMessages={['College is a required field']}
       />
 
       <Button variant="outlined" onClick={handlePrev} color="secondary">

src/views/pages/Courses/Process.js

@@ -6,12 +6,13 @@ import ProcessSteppers from './ProcessSteppers';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(0, 10, 10),
+    background: 'linear-gradient(180deg, #2A185A 0%, #000000 100%)',
+    padding: theme.spacing(14, 10, 10),
     [theme.breakpoints.down('md')]: {
-      padding: theme.spacing(0, 0, 10),
+      padding: theme.spacing(14, 0, 10)
     },
     color: '#000000'
-  },
+  }
 }));
 
 function Process({ benefits, className, ...rest }) {
@@ -21,12 +22,21 @@ function Process({ benefits, className, ...rest }) {
     <div className={clsx(classes.root, className)} {...rest}>
       <Container maxWidth="lg">
         <Typography
-          style={{ marginTop: '10px' }}
+          style={{ color: '#ffffff' }}
           variant="h2"
           align="center"
           gutterBottom
         >
-          Application Process for Selection
+          Offering 70% Scholarship On this Batch
+        </Typography>
+
+        <Typography
+          style={{ marginTop: '32px', color: '#ffffff' }}
+          variant="h4"
+          align="center"
+          gutterBottom
+        >
+          Application Process To Get Shortlisted
         </Typography>
         <Grid container component="dl" style={{ padding: '20px 0px 20px' }}>
           <ProcessSteppers />

src/views/pages/Courses/ProcessSteppers.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
-import Stepper from '@material-ui/core/Stepper';
+import { Stepper, Typography } from '@material-ui/core';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Check from '@material-ui/icons/Check';
@@ -48,8 +48,8 @@ function QontoStepIcon(props) {
       {completed ? (
         <Check className={classes.completed} />
       ) : (
-          <div className={classes.circle} />
-        )}
+        <div className={classes.circle} />
+      )}
     </div>
   );
 }
@@ -71,14 +71,12 @@ const ColorlibConnector = withStyles({
   },
   active: {
     '& $line': {
-      backgroundImage:
-        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)'
+      background: '#ffffff'
     }
   },
   completed: {
     '& $line': {
-      backgroundImage:
-        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)'
+      background: '#ffffff'
     }
   },
   line: {
@@ -93,7 +91,7 @@ const useColorlibStepIconStyles = makeStyles({
   root: {
     backgroundColor: '#ccc',
     zIndex: 1,
-    color: '#fff',
+    color: 'linear-gradient(180deg, #2A185A 0%, #000000 100%)',
     width: 50,
     height: 50,
     display: 'flex',
@@ -102,13 +100,10 @@ const useColorlibStepIconStyles = makeStyles({
     alignItems: 'center'
   },
   active: {
-    backgroundImage:
-      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
-    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)'
+    background: '#ffffff'
   },
   completed: {
-    backgroundImage:
-      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)'
+    background: '#ffffff'
   }
 });
 
@@ -174,7 +169,7 @@ function getSteps() {
 
 export default function ProcessSteppers() {
   const classes = useStyles();
-  const activeStep = 3;
+  const activeStep = 4;
   const steps = getSteps();
 
   return (
@@ -184,12 +179,21 @@ export default function ProcessSteppers() {
         activeStep={activeStep}
         connector={<ColorlibConnector />}
         style={{
-          padding: '24px 0px'
+          padding: '24px 0px',
+          backgroundColor: 'transparent'
         }}
       >
         {steps.map(label => (
           <Step key={label}>
-            <StepLabel StepIconComponent={ColorlibStepIcon}>{label}</StepLabel>
+            <StepLabel StepIconComponent={ColorlibStepIcon}>
+              <Typography
+                style={{
+                  color: '#ffffff'
+                }}
+              >
+                {label}
+              </Typography>
+            </StepLabel>
           </Step>
         ))}
       </Stepper>

src/views/pages/Courses/Schedule.js

@@ -16,12 +16,12 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2)
   },
   root: {
-    padding: theme.spacing(0, 10, 10),
+    padding: theme.spacing(10, 10, 10),
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     [theme.breakpoints.down('md')]: {
-      padding: theme.spacing(0, 3, 10)
+      padding: theme.spacing(10, 3, 10)
     }
   },
 

src/views/pages/Courses/partials/Details.js

@@ -62,14 +62,13 @@ export default function Details({ course, bottom }) {
           <Box mb={2} display="flex" flexDirection="row">
             <Typography
               style={{
-                marginRight: '48px',
+                marginRight: '24px',
                 color: '#0085FF'
               }}
               variant="body1"
             >
               {course.difficulty}
             </Typography>
-            <Typography variant="body1">{course.level}</Typography>
           </Box>
 
           <Box mb={4} display="flex" flexDirection="row" flexWrap="wrap">

src/views/pages/Courses/partials/DetailsBottom.js

@@ -64,14 +64,13 @@ export default function DetailsBottom({ course, batch }) {
           >
             <Typography
               style={{
-                marginRight: '48px',
+                marginRight: '24px',
                 color: '#0085FF'
               }}
               variant="body1"
             >
               {course.difficulty}
             </Typography>
-            <Typography variant="body1">{course.level}</Typography>
           </Box>
 
           <Box mb={4} display="flex" flexDirection="row" flexWrap="wrap">

src/views/pages/common/CourseCard.js

@@ -2,12 +2,7 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import ParallaxSlide from '@mui-treasury/components/slide/parallax';
 
-import {
-  Typography,
-  Box,
-  Card,
-  CardContent,
-} from '@material-ui/core';
+import { Typography, Box, Card, CardContent } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
@@ -118,12 +113,12 @@ export default function CourseCard({ course }) {
               display="flex"
               flexDirection="row"
               style={{
-                margin: '8px 0px 0px'
+                margin: '8px 0px 16px'
               }}
             >
               <Typography
                 align="left"
-                variant="body2"
+                variant="h5"
                 style={{
                   width: '50%',
                   color: '#0085FF'
@@ -133,26 +128,16 @@ export default function CourseCard({ course }) {
               </Typography>
               <Typography
                 align="right"
-                variant="body2"
+                variant="h5"
                 style={{
-                  width: '50%'
+                  width: '50%',
+                  color: '#FF4C00'
                 }}
               >
-                <Box fontWeight={600}>{course.level}</Box>
+                {course.domain}
               </Typography>
             </Box>
 
-            <Typography
-              variant="h5"
-              align="left"
-              style={{
-                marginBottom: '16px',
-                color: '#FF4C00'
-              }}
-            >
-              {course.domain}
-            </Typography>
-
             <Typography variant="h4" align="left">
               {course.title}
             </Typography>