Implement new Workshop Design: final

Author: Abhishek-kumar09

package-lock.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@date-io/core": "^2.5.0",
+    "@date-io/date-fns": "^1.3.13",
     "@date-io/moment": "^1.3.13",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
@@ -59,6 +60,7 @@
     "change-case": "^4.1.1",
     "chart.js": "^2.9.3",
     "clsx": "^1.1.0",
+    "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "firebase": "^7.21.1",
     "formik": "^2.1.4",

package.json

@@ -16,6 +16,7 @@ import Error404View from 'src/views/pages/Error404View';
 import StudentDashboardView from 'src/views/pages/StudentDashboardView';
 import EditProfileView from 'src/views/pages/StudentDashboardView/EditProfile';
 import CoursePage from 'src/views/pages/Course/CoursePage';
+import WorkshopView from 'src/views/pages/WorkshopView';
 import TermsView from './views/pages/documents/termsView';
 import DocsLayout from './layouts/DocsLayout';
 import PrivacyView from './views/pages/documents/privacyView';
@@ -137,6 +138,15 @@ const renderRoutes = () => (
           </MainLayout>
         )}
       />
+      <Route
+        path="/workshops"
+        exact
+        render={props => (
+          <MainLayout>
+            <WorkshopView {...props} />
+          </MainLayout>
+        )}
+      />
 
       <Route
         path={`/machine-learning-using-python`}

public/static/images/backs/course.png

@@ -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"

public/static/images/backs/ws.png

@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Projects({ projects, flat }) {
+function Projects({ title, projects, flat }) {
   const classes = useStyles();
 
   return (
@@ -39,7 +39,7 @@ function Projects({ projects, flat }) {
               margin: '12px 0px 12px 8px'
             }}
           >
-            Learn To Make From this Course
+            {title}
           </Typography>
           {projects.map((project, index) => {
             return <Project project={project} />;

src/Routes.js

@@ -9,4 +9,4 @@ export const horizontalGradient =
   'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 export const verticalGradient =
-  'linear-gradient(180.72deg, #180255 0.25%, #000000 97.54%)';
+  'linear-gradient(180.72deg, #180255 0.25%, #000000 85.54%)';

src/views/pages/CoursesView/CTA.js renamed to src/components/CTA/CTA.js

@@ -145,6 +145,7 @@ function CTA({ className, ...rest }) {
                       target="_blank"
                       size="large"
                       variant="outlined"
+                      focusRipple={false}
                     >
                       Submit Request
                     </Button>
@@ -203,10 +204,11 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="outlined"
+                      focusRipple={false}
                     >
                       Submit Request
                     </Button>

src/views/pages/Course/partials/Projects.js renamed to src/components/SidePanel/Projects.js

@@ -4,7 +4,7 @@ import { Grid, Box, Hidden } from '@material-ui/core';
 import Details from './partials/Details';
 import Overview from './partials/Overview';
 import Topics from './partials/Topics';
-import Projects from './partials/Projects';
+import Projects from '../../../components/SidePanel/Projects';
 
 const useStyles = makeStyles(theme => ({
   icon: {
@@ -106,7 +106,10 @@ export default function Major({ course }) {
 
         <Hidden smDown>
           <Box display="flex" flexDirection="column" mb={3} ml={2}>
-            <Projects projects={course.projects} />
+            <Projects
+              title="Learn To Make From This Course"
+              projects={course.projects}
+            />
           </Box>
         </Hidden>
       </Box>