Corrects header for campus leads page

src/Routes.js

@@ -2,6 +2,7 @@
 import React, { lazy, Suspense, Fragment } from 'react';
 import { Switch, Redirect, Route } from 'react-router-dom';
 import MainLayout from 'src/layouts/MainLayout';
+import CLLayout from 'src/layouts/CLLayout';
 import DocsLayout from 'src/layouts/DocsLayout';
 import HomeView from 'src/views/pages/HomeView';
 import CAView from 'src/views/pages/CLView';
@@ -46,7 +47,7 @@ const routesConfig = [
   },
   {
     path: '/campusLeaders',
-    layout: MainLayout,
+    layout: CLLayout,
     routes: [
       {
         exact: true,
@@ -108,8 +109,8 @@ const renderRoutes = routes =>
                     {route.routes ? (
                       renderRoutes(route.routes)
                     ) : (
-                      <Component {...props} />
-                    )}
+                        <Component {...props} />
+                      )}
                   </Layout>
                 </Guard>
               )}

src/layouts/CLLayout/TopBar/OpenSource.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Typography } from '@material-ui/core';
+// import authService from 'src/services/authService';
+
+const OpenSource = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: 64,
+      backgroundColor: '#A60000'
+    }}
+  >
+    <div
+      style={{
+        padding: '10% 10px',
+        whiteSpace: 'nowrap'
+      }}
+    >
+      <Typography variant="h6">Open Source</Typography>
+    </div>
+  </div>
+);
+
+export default OpenSource;

src/layouts/CLLayout/TopBar/index.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {
+  AppBar,
+  Box,
+  Hidden,
+  Toolbar,
+  makeStyles
+} from '@material-ui/core';
+import Logo from 'src/components/Logo';
+import OpenSource from './OpenSource';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    zIndex: theme.zIndex.drawer + 100,
+    backgroundColor: theme.palette.background.default,
+    paddingLeft: 70,
+    paddingRight: 70,
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  },
+  toolbar: {
+    minHeight: 64
+  },
+  menuButton: {
+    float: 'right',
+    color: '#000',
+    marginRight: '0px'
+  },
+  list: {
+    width: '100% !important',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  textStyle: {
+    textDecoration: 'none'
+  }
+}));
+
+function TopBar({ className, onMobileNavOpen, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <AppBar className={clsx(classes.root, className)} {...rest}>
+      <Toolbar className={classes.toolbar}>
+        <RouterLink to="/">
+          <Logo className={classes.logo} />
+        </RouterLink>
+        <Hidden smDown>
+          <Box ml={2} flexGrow={1} />
+          <Box ml={2} flexGrow={0.05} />
+
+          <Box ml={2}>
+            <OpenSource />
+          </Box>
+          <Box ml={2} flexGrow={0.05} />
+
+        </Hidden>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+TopBar.propTypes = {
+  className: PropTypes.string,
+  onMobileNavOpen: PropTypes.func
+};
+
+export default TopBar;

src/layouts/CLLayout/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import TopBar from './TopBar';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%'
+  },
+  wrapper: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    paddingTop: 64
+  },
+  contentContainer: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden'
+  },
+  content: {
+    flex: '1 1 auto',
+    height: '100%',
+    overflow: 'auto'
+  }
+}));
+
+function CLLayout({ children }) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <TopBar />
+      <div className={classes.wrapper}>
+        <div className={classes.contentContainer}>
+          <div className={classes.content}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CLLayout.propTypes = {
+  children: PropTypes.any
+};
+
+export default CLLayout;

src/views/pages/CLView/Apply.js

@@ -11,13 +11,11 @@ import {
   Hidden
 } from '@material-ui/core';
 
-const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 const useStyles = makeStyles(theme => ({
   root: {
     minHeight: '350px',
     color: '#FFF',
-    background,
     padding: '100px 70px',
     [theme.breakpoints.down('md')]: {
       paddingLeft: 15,
@@ -54,7 +52,7 @@ function Apply({ className, ...rest }) {
   const classes = useStyles();
 
   return (
-    <div className={clsx(classes.root, className)} {...rest}>
+    <div className={clsx(classes.root, className)} style={{ backgroundImage: 'url("/static/campusLeaders/apply.png")', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} {...rest}>
       <Grid container maxWidth="lg">
         <Grid item lg={9} md={12} sm={12} xs={12} className={classes.applyleft}>
           <div className={classes.main}>

src/views/pages/CLView/CLViewData.js

@@ -21,3 +21,23 @@ export const benefits = [
     detail: 'Connect with our mentors and Industry experts linked with us.'
   }
 ];
+
+export const values = [
+  {
+    id: '1',
+    detail: 'He/she shall be entusiastic about going social and build & contribute for the community'
+  },
+  {
+    id: '2',
+    detail:
+      'A Leader shall always have a way of talking people out from problems and leading them to do that for others too'
+  },
+  {
+    id: '3',
+    detail: 'He/she should be connecting to the resources available in community that might help in building a better & more helpful community'
+  },
+  {
+    id: '4',
+    detail: 'Connect with our mentors and Industry experts linked with us.'
+  }
+];

src/views/pages/CLView/Hero.js

@@ -10,13 +10,11 @@ import {
   makeStyles
 } from '@material-ui/core';
 
-const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 const useStyles = makeStyles(theme => ({
   root: {
     minHeight: '350px',
     color: '#FFF',
-    background,
     padding: '100px 70px',
     [theme.breakpoints.down('md')]: {
       paddingLeft: 15,
@@ -48,7 +46,7 @@ function Hero({ className, ...rest }) {
   const classes = useStyles();
 
   return (
-    <div className={clsx(classes.root, className)} {...rest}>
+    <div className={clsx(classes.root, className)} style={{ backgroundImage: 'url("/static/campusLeaders/hero.png")', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} {...rest}>
       <Container maxWidth="lg">
         <div className={classes.main}>
           <Typography variant="h1">Campus Leaders</Typography>

src/views/pages/CLView/ProcessSteppers.js

@@ -6,9 +6,10 @@ import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Check from '@material-ui/icons/Check';
-import SettingsIcon from '@material-ui/icons/Settings';
-import GroupAddIcon from '@material-ui/icons/GroupAdd';
-import VideoLabelIcon from '@material-ui/icons/VideoLabel';
+import ListAltIcon from '@material-ui/icons/ListAlt';
+import PeopleIcon from '@material-ui/icons/People';
+import VideocamIcon from '@material-ui/icons/Videocam';
+import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';
 import StepConnector from '@material-ui/core/StepConnector';
 
 const useQontoStepIconStyles = makeStyles({
@@ -47,8 +48,8 @@ function QontoStepIcon(props) {
       {completed ? (
         <Check className={classes.completed} />
       ) : (
-        <div className={classes.circle} />
-      )}
+          <div className={classes.circle} />
+        )}
     </div>
   );
 }
@@ -116,10 +117,12 @@ function ColorlibStepIcon(props) {
   const { active, completed } = props;
 
   const icons = {
-    1: <SettingsIcon />,
-    2: <GroupAddIcon />,
-    3: <VideoLabelIcon />,
-    4: <VideoLabelIcon />
+    1: <ListAltIcon />,
+
+    // 1: <SettingsIcon />,
+    2: <AssignmentTurnedInIcon />,
+    3: <VideocamIcon />,
+    4: <PeopleIcon />
   };
 
   return (