Modified stepper based on material design specs.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx

@@ -37,7 +37,7 @@ class Step extends Component {
         let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
 
         return (
-            <div className="step">
+            <div className="step col-3">
                 <div className="step-content">
                     <div className={indexClassNames}>
                             <span>
@@ -46,14 +46,14 @@ class Step extends Component {
                     </div>
                     <div className={indexTextClassNames}>
                         <div>
-                            {text} {!finalStep? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
+                            {text}
                         </div>
                         {optional ?
                             <div className="stepper-optional-text">
                                 (<FormattedMessage id="Optional" defaultMessage="Optional"/>)
                             </div> : <div/>}
                     </div>
-
+                    {!finalStep ? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
                 </div>
             </div>
         )

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx

@@ -26,7 +26,7 @@ class Stepper extends Component {
     render() {
         const {stepContent, activeStep, previousStep} = this.props;
         return (
-            <div className="stepper-header">
+            <div className="stepper-header row">
                 {stepContent.map(content => {
                     return (
                         <Step

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css

@@ -22,9 +22,6 @@
     height: 72px;
     color: rgba(0, 0, 0, 0.38);
     box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
-    display: table;
-    align-items: baseline;
-    justify-content: space-between;
     margin: 0 !important;
 }
 
@@ -65,7 +62,7 @@
 }
 
 .step-text {
-    padding-top: 3px;
+    /*padding-top: 3px;*/
     font-family: Roboto-Regular;
     font-size: 14px;
 }
@@ -87,6 +84,7 @@
 }
 
 .stepper-next-arrow {
+    padding-top: 3px;
     margin-left: 15px;
 }