From 7ec90258d5a11f3688bec3f4776a01fe6dfce12a Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 10:47:20 +0530
Subject: [PATCH] Modified stepper based on material design specs.

---
 .../src/components/UIComponents/StepprHeader/Step.jsx     | 8 ++++----
 .../src/components/UIComponents/StepprHeader/Stepper.jsx  | 2 +-
 .../src/components/UIComponents/StepprHeader/stepper.css  | 6 ++----
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
index 6ca41e42b9..5ddc195449 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
+++ b/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> : <div/>}
                     </div>
-
+                    {!finalStep ? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
                 </div>
             </div>
         )
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
index 75b619907f..aed929eb7d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
+++ b/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
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
index 3e35918e7c..1b116bd822 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
+++ b/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;
 }