added new stepper - stepper with icons

src/components/layout/Main.js

@@ -1,11 +1,11 @@
 import React from "react";
-import Stepper from "./Stepper";
+import ApplicationStepper from "./stepper/ApplicationStepper";
 import Switcher from "./Switcher";
 
 const Main = () => {
   return (
     <>
-      <Stepper />
+      <ApplicationStepper />
       <header className="App-header">
         <Switcher />
       </header>

src/components/layout/stepper/ApplicationStepper.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
-import steps from "../../constants/steps";
+import steps from "../../../constants/steps";
 import {
   Card,
-  Grid,
   Stepper,
   Step,
   StepButton,
@@ -10,10 +9,12 @@ import {
   makeStyles
 } from "@material-ui/core";
 import { useLocation, useHistory } from "react-router-dom";
+import ColorlibConnector from "./ColorlibConnector";
+import ColorlibStepIcon from "./ColorlibStepIcon";
 
 const styles = () => ({
   stepperCard: {
-    padding: "2px",
+    padding: "0px",
     margin: "15px"
   }
 });
@@ -43,9 +44,11 @@ const ApplicationStepper = () => {
 
   return (
     <Card className={classes.stepperCard}>
-      <Grid container alignItems="center" spacing={3}>
+      <Stepper
-        <Grid item xs={12}>
+        activeStep={activeStep.id}
-          <Stepper activeStep={activeStep.id} orientation="horizontal">
+        orientation="horizontal"
+        connector={<ColorlibConnector />}
+      >
         {steps.map((step) => (
           <Step key={step.id}>
             <StepButton
@@ -53,13 +56,13 @@ const ApplicationStepper = () => {
               disabled={step.disabled}
               onClick={() => handleStepClick(step)}
             >
-                  <StepLabel>{step.title}</StepLabel>
+              <StepLabel StepIconComponent={ColorlibStepIcon}>
+                {step.title}
+              </StepLabel>
             </StepButton>
           </Step>
         ))}
       </Stepper>
-        </Grid>
-      </Grid>
     </Card>
   );
 };

src/components/layout/stepper/ColorlibConnector.js

@@ -0,0 +1,28 @@
+import { withStyles } from "@material-ui/core/styles";
+import StepConnector from "@material-ui/core/StepConnector";
+
+const ColorlibConnector = withStyles({
+  alternativeLabel: {
+    top: 22
+  },
+  active: {
+    "& $line": {
+      backgroundImage:
+        "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"
+    }
+  },
+  completed: {
+    "& $line": {
+      backgroundImage:
+        "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)"
+    }
+  },
+  line: {
+    height: 3,
+    border: 0,
+    backgroundColor: "#eaeaf0",
+    borderRadius: 1
+  }
+})(StepConnector);
+
+export default ColorlibConnector;

src/components/layout/stepper/ColorlibStepIcon.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+import SettingsIcon from "@material-ui/icons/Settings";
+import GroupAddIcon from "@material-ui/icons/GroupAdd";
+import VideoLabelIcon from "@material-ui/icons/VideoLabel";
+
+const useColorlibStepIconStyles = makeStyles({
+  root: {
+    backgroundColor: "#ccc",
+    zIndex: 1,
+    color: "#fff",
+    width: 50,
+    height: 50,
+    display: "flex",
+    borderRadius: "50%",
+    justifyContent: "center",
+    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)"
+  },
+  completed: {
+    backgroundImage:
+      "linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)"
+  }
+});
+
+function ColorlibStepIcon(props) {
+  const classes = useColorlibStepIconStyles();
+  const { active, completed } = props;
+
+  const icons = {
+    1: <SettingsIcon />,
+    2: <GroupAddIcon />,
+    3: <VideoLabelIcon />
+  };
+
+  const getIcon = (icon) => {
+    return icons[String(icon)];
+  };
+
+  return (
+    <div
+      className={clsx(classes.root, {
+        [classes.active]: active,
+        [classes.completed]: completed
+      })}
+    >
+      {getIcon(props.icon)}
+    </div>
+  );
+}
+
+ColorlibStepIcon.propTypes = {
+  /**
+   * Whether this step is active.
+   */
+  active: PropTypes.bool,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: PropTypes.bool,
+  /**
+   * The label displayed in the step icon.
+   */
+  icon: PropTypes.node
+};
+
+export default ColorlibStepIcon;