From c750aed454c99a5cd33bd14c42fbe5f073392772 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:12:10 +0530
Subject: [PATCH 01/14] Added application management apis.

---
 .../publisher/src/api/applicationMgtApi.js    | 13 ++++++++---
 .../publisher/src/common/constants.js         | 23 +++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
index 8787f4190a9..fa92d21c0d4 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/api/applicationMgtApi.js
@@ -61,8 +61,12 @@ export default class ApplicationMgtApi {
     /**
      * Method to handle application release process.
      * */
-    static releaseApplication(appId) {
-
+    static releaseApplication(appId, applicationRelease, file) {
+        let release = new FormData();
+        release.append('applicationRelease', applicationRelease);
+        release.append('binaryFile', file);
+        const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
+        return Axios.post(Constants.appManagerEndpoints.APP_RELEASE + appId, release, {headers: headers});
     }
 
     /**
@@ -73,7 +77,8 @@ export default class ApplicationMgtApi {
      * URL Pattern : /application/1.0/
      * */
     static updateLifeCycleState(appId, nextState) {
-
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.put(Constants.appManagerEndpoints.GET_ALL_APPS + appId + "/lifecycle?state=" + nextState, {headers: headers});
     }
 
     /**
@@ -81,6 +86,8 @@ export default class ApplicationMgtApi {
      * @param appId: The application uuid.
      */
     static getNextLifeCycleState(appId) {
+        const headers = AuthHandler.createAuthenticationHeaders("application/json");
+        return Axios.get(Constants.appManagerEndpoints.GET_ALL_APPS + appId + "/lifecycle", {headers: headers});
 
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
index 27091a166c2..d458ada5999 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/common/constants.js
@@ -32,20 +32,29 @@ class Constants {
     }
 
     load() {
+        let applicationApiContext = '/api/application-mgt/v1.0/applications/1.0.0/';
+        let platformApiContext = '/api/application-mgt/v1.0/platforms/1.0.0';
+
         let apiBaseUrl = 'https://' + Configuration.serverConfig.hostname + ':' + Configuration.serverConfig.apiPort;
         let httpBaseUrl = 'https://' + Configuration.serverConfig.hostname + ':' + Configuration.serverConfig.httpsPort;
 
         this.appManagerEndpoints = {
-            GET_ALL_APPS: apiBaseUrl + '/api/application-mgt/v1.0/applications/1.0.0/',
-            CREATE_APP: apiBaseUrl + '/api/application-mgt/v1.0/applications/1.0.0/',
-            UPLOAD_IMAGE_ARTIFACTS: apiBaseUrl + '/api/application-mgt/v1.0/applications/1.0.0/upload-image-artifacts/', //+appId
-            GET_IMAGE_ARTIFACTS: apiBaseUrl + '/api/application-mgt/v1.0/applications/1.0.0/image-artifacts/'
+            GET_ALL_APPS: apiBaseUrl + applicationApiContext,
+            CREATE_APP: apiBaseUrl + applicationApiContext,
+            UPLOAD_IMAGE_ARTIFACTS: apiBaseUrl + applicationApiContext + 'upload-image-artifacts/', //+appId
+            GET_IMAGE_ARTIFACTS: apiBaseUrl + applicationApiContext + 'image-artifacts/',
+            APP_RELEASE: apiBaseUrl + applicationApiContext + "release/", //+uuid
+            GET_APP_RELEASE_ARTIFACTS: apiBaseUrl + applicationApiContext + "/release-artifacts/", //+AppId/version
+            GET_NEXT_LIFECYCLE_STATE: apiBaseUrl + applicationApiContext //+ [uuid]/lifecycle
         };
 
         this.platformManagerEndpoints = {
-            CREATE_PLATFORM: apiBaseUrl + '/api/application-mgt/v1.0/platforms/1.0.0',
-            GET_ENABLED_PLATFORMS: apiBaseUrl + '/api/application-mgt/v1.0/platforms/1.0.0?status=ENABLED',
-            GET_PLATFORM: apiBaseUrl + '/api/application-mgt/v1.0/platforms/1.0.0/'
+            CREATE_PLATFORM: apiBaseUrl + platformApiContext,
+            GET_ENABLED_PLATFORMS: apiBaseUrl + platformApiContext + '?status=ENABLED',
+            GET_PLATFORM: apiBaseUrl + platformApiContext, //+platformId
+            GET_PLATFORMS: apiBaseUrl + platformApiContext,
+            UPDATE_STATUS: apiBaseUrl + platformApiContext + "update-status/", // + platformId + ?status=
+            EDIT_PLATFORM: apiBaseUrl + platformApiContext //+platformId
         };
 
         this.userConstants = {

From 34b35158fb27c1852ffe4dade00757c4d3d391d3 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:12:48 +0530
Subject: [PATCH 02/14] Added i18n definition.

---
 .../src/components/Application/Create/CreateSteps/Step1.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index 447c32780e2..bd7de1e981c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -254,7 +254,7 @@ class Step1 extends Component {
                         </FormGroup>
                         <FormGroup>
                             <Label for="app-short-description">
-                                <FormattedMessage id="shortDescription" defaultMessage="shortDescription"/>*
+                                <FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
                             </Label>
                             <Input
                                 required

From 672833c58399ea38b514043a91498a20e7d2aef6 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:13:33 +0530
Subject: [PATCH 03/14] Modified application edit url pattern.

---
 .../src/main/resources/publisher/src/App.jsx                    | 2 +-
 .../publisher/src/components/Application/ApplicationListing.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 3128bc9d233..4a3d606eff1 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -78,7 +78,7 @@ class Base extends Component {
                             <Route exact path={"/assets/platforms"} component={PlatformListing}/>
                             <Route exact path={"/assets/platforms/create"} component={PlatformCreate}/>
                             {/*<Route exact path={"/assets/apps/:app"}/>*/}
-                            <Route exact path={"/assets/apps/edit/:app"} component={ApplicationEdit}/>
+                            <Route exact path={"/assets/apps/:app/edit"} component={ApplicationEdit}/>
                             <Route exact path={"/assets/platforms/:platform"}/>
                             <Route exact path={"/assets/platforms/:platform/edit"}/>
                             <Route exact path={"/assets/reviews"}/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 6ce6d1ad78d..fbd74aefa36 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -194,7 +194,7 @@ class ApplicationListing extends Component {
     }
 
     onAppEditClick(uuid) {
-        this.props.history.push("apps/edit/" + uuid);
+        this.props.history.push("apps/" + uuid + "/edit");
     }
 
     closeDrawer() {

From ba5c7eb66b7965a5c195567f2dba97cef8e1681e Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:14:09 +0530
Subject: [PATCH 04/14] Added button styling in platform cards.

---
 .../publisher/src/components/Platform/Platform.jsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
index 44479434ae5..ad40ff20943 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
@@ -58,11 +58,15 @@ class Platform extends Component {
                 </Row>
                 <Row>
                     <div className="platform-content-footer">
-                        <Button className="custom-flat grey">{platform.enabled ?
-                            <FormattedMessage id="Disable" defaultMessage="Disable"/> :
-                            <FormattedMessage id="Activate" defaultMessage="Activate"/>}
-                        </Button>
-                        <Button className="custom-flat grey">
+                        {platform.enabled?
+                            <Button className="custom-flat danger-flat">
+                            <FormattedMessage id="Disable" defaultMessage="Disable"/>
+                            </Button> :
+                            <Button className="custom-flat primary-flat">
+                                <FormattedMessage id="Activate" defaultMessage="Activate"/>
+                            </Button>}
+
+                        <Button className="custom-flat primary-flat">
                             <FormattedMessage id="Share.With.Tenants" defaultMessage="Share.With.Tenants"/>
                         </Button>
                         <Button className="custom-flat grey circle-button" onClick={this.unFold}>

From bd9a54f1b71e75b90944ebd7e858f89d4dddd0be Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:15:30 +0530
Subject: [PATCH 05/14] Removed style loader for wso2 fonts from
 webpack.config.js

---
 .../src/main/resources/publisher/webpack.config.js               | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
index d90703b72bf..00f2d7dc437 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/webpack.config.js
@@ -16,7 +16,6 @@
  * under the License.
  */
 var path = require('path');
-import '!!style-loader!css-loader!src/css/font-wso2.css';
 
 const config = {
     entry: {

From 0e0f6b9ff622ae21e5f3bea4e35523553233d7b9 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 6 Oct 2017 19:18:03 +0530
Subject: [PATCH 06/14] Fixed styling.

---
 .../resources/publisher/src/components/Platform/Platform.jsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
index ad40ff20943..7afa9784bca 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Platform.jsx
@@ -58,14 +58,13 @@ class Platform extends Component {
                 </Row>
                 <Row>
                     <div className="platform-content-footer">
-                        {platform.enabled?
+                        {platform.enabled ?
                             <Button className="custom-flat danger-flat">
-                            <FormattedMessage id="Disable" defaultMessage="Disable"/>
+                                <FormattedMessage id="Disable" defaultMessage="Disable"/>
                             </Button> :
                             <Button className="custom-flat primary-flat">
                                 <FormattedMessage id="Activate" defaultMessage="Activate"/>
                             </Button>}
-
                         <Button className="custom-flat primary-flat">
                             <FormattedMessage id="Share.With.Tenants" defaultMessage="Share.With.Tenants"/>
                         </Button>

From b630410698f690c8ecc24930ce4e3a826d114acd Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sat, 7 Oct 2017 01:31:52 +0530
Subject: [PATCH 07/14] Changed element class names.

---
 .../public/themes/default/default-theme.css   |  9 ++-----
 .../Application/ApplicationListing.jsx        | 16 ++++++-----
 .../Edit/Base/ApplicationEditBaseLayout.jsx   | 27 ++++++++++++++++---
 .../components/Platform/PlatformListing.jsx   |  2 +-
 4 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index f2594edf9ad..5713e6779a5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -316,10 +316,6 @@ body {
     background-color: #E64A19;
 }
 
-#app-main-content {
-    margin: 0 auto;
-}
-
 #sub-title-container {
     height: 100px;
     padding: 50px 0 20px 0;
@@ -332,10 +328,9 @@ body {
 }
 
 /* Holds the app publisher pages. */
-#application-content {
+.publisher-card {
     height: auto;
     background-color: white;
-    width: 100%;
     box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     padding: 24px;
 }
@@ -368,7 +363,7 @@ body {
     margin-right: 4px;
 }
 
-#application-list {
+.application-list {
     transition: margin-right .5s;
 }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index fbd74aefa36..6effa9b7ea7 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -182,12 +182,11 @@ class ApplicationListing extends Component {
     onRowClick(uuid) {
         let selectedApp = this.getSelectedApplication(uuid);
         let style = {
-            width: '550px',
-            marginLeft: '550px'
+            width: '35%'
         };
 
         let appListStyle = {
-            marginRight: '550px',
+            marginRight: '35%',
         };
 
         this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
@@ -217,15 +216,18 @@ class ApplicationListing extends Component {
 
     render() {
         //TODO: Move this to a data table component.
+        console.log(this.state.appListStyle);
         return (
-            <div id="application-list" style={this.state.appListStyle}>
+            <div className="publisher-card application-list" style={this.state.appListStyle}>
                 <Row className="app-list-table-header">
                     {this.headers.map(header => {
                         if (header.data_id === "applicationName") {
                             return (
-                                <Col xs="5">{header.label}</Col>)
+                                <Col xs="4">{header.label}</Col>)
                         } else if (header.data_id === "image") {
                             return (<Col xs="1">{header.label}</Col>)
+                        } else if (header.data_id === "edit") {
+                            return <Col xs="1"></Col>
                         }
                         return (<Col>{header.label}</Col>)
                     })}
@@ -242,13 +244,13 @@ class ApplicationListing extends Component {
                                     src={application.icon}
                                 />
                             </Col>
-                            <Col xs="5" className="data-table-row-cell"><strong>{application.name}</strong></Col>
+                            <Col xs="4" className="data-table-row-cell"><strong>{application.name}</strong></Col>
                             <Col className="data-table-row-cell">{application.platform.name}</Col>
                             <Col className="data-table-row-cell">{application.category.name}</Col>
                             <Col
                                 className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
                             </Col>
-                            <Col>
+                            <Col xs="1">
                                 <Button className="custom-flat grey rounded"
                                         onClick={() => this.onAppEditClick(application.uuid)}>
                                     <i className="fw fw-edit"></i>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
index 308ad5b2718..1239d9b0686 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
@@ -21,6 +21,7 @@ import React, {Component} from 'react';
 import GeneralInfo from "../GenenralInfo/GeneralInfo";
 import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
 import {FormattedMessage} from 'react-intl';
+import ApplicationMgtApi from "../../../../api/applicationMgtApi";
 
 class ApplicationEdit extends Component {
 
@@ -28,6 +29,7 @@ class ApplicationEdit extends Component {
         super();
         this.getTabContent = this.getTabContent.bind(this);
         this.state = {
+            application: {},
             general: "active",
             release: "",
             pkgmgt: "",
@@ -35,6 +37,22 @@ class ApplicationEdit extends Component {
         }
     }
 
+    componentWillMount() {
+
+        let appId = window.location.pathname.split("/")[4];
+        let response = ApplicationMgtApi.getApplication(appId);
+
+        response.then(res => {
+            let data = res.data.applications;
+            let application = data.filter(app => {
+                return app.uuid === appId;
+            });
+
+            this.setState({application: application[0]});
+        })
+    }
+
+
     handleTabClick(event) {
         event.stopPropagation();
         const key = event.target.value;
@@ -61,7 +79,10 @@ class ApplicationEdit extends Component {
     getTabContent(tab) {
         switch (tab) {
             case 1: {
-                return <GeneralInfo/>
+                {
+                    console.log(this.state.application)
+                }
+                return <GeneralInfo application={this.state.application}/>
             }
             case 2: {
                 return <ReleaseManager/>
@@ -78,7 +99,7 @@ class ApplicationEdit extends Component {
 
     render() {
         return (
-            <div id="application-edit-base">
+            <div className="publisher-card">
                 <Row id="application-edit-header">
                     <Col xs="3">
                         <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}>
@@ -86,7 +107,7 @@ class ApplicationEdit extends Component {
                         </a>
                     </Col>
                     <Col>
-                        <FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
+                        {this.state.application.name}
                     </Col>
                 </Row>
                 <hr/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
index 94f4c106198..e016f002ad5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx
@@ -51,7 +51,7 @@ class PlatformListing extends Component {
 
     render() {
         return (
-            <div id="platform-listing">
+            <div className="publisher-card">
                 <Row>
                     <div className="create-platform">
                         <Button className="custom-flat grey" onClick={this.onPlatformCreateClick}>

From fc4432277601acb6dc44b3a4fdc850043fc93d9e Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sat, 7 Oct 2017 01:32:53 +0530
Subject: [PATCH 08/14] Styled 'Not found' error page.

---
 .../public/themes/default/default-theme.css   | 20 +++++++++++++++++++
 .../src/components/Error/NotFound.jsx         | 19 ++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index 5713e6779a5..a1e6296243a 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -833,3 +833,23 @@ div.tab button.active {
 .data-table-row-cell {
     padding-top: 14px;
 }
+
+.error-code {
+    text-align: center;
+    font-family: Roboto-Medium;
+    font-weight: 800;
+    font-size: 15em;
+    color: #BaBaBa;
+}
+
+.error-code p {
+
+}
+
+.error-text {
+    text-align: center;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+    font-weight: 500;
+    color: #9e9e9e;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Error/NotFound.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Error/NotFound.jsx
index 81a1b0320b2..520c92d05df 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Error/NotFound.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Error/NotFound.jsx
@@ -16,6 +16,7 @@
  * under the License.
  */
 import React, {Component} from 'react';
+import {Col, Row} from "reactstrap";
 
 /**
  * Error page.
@@ -28,8 +29,22 @@ class Error extends Component {
 
     render() {
         return (
-            <div>
-                404 not found
+            <div className="error-page">
+                <Row>
+                    <Col>
+                        <div className="error-code">
+                            <p>404</p>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <div className="error-text">
+                            <p>The page you are looking for doesn't exist or error occurred.</p>
+                            <p>Please click <a href="/publisher">here</a> to go to App publisher home page.</p>
+                        </div>
+                    </Col>
+                </Row>
             </div>
         );
     }

From 99af739f15e45ce46fb0b0c17cb843512f89944a Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 02:08:05 +0530
Subject: [PATCH 09/14] Stepper component created and added it to the
 application creation modal.

---
 .../publisher/public/locales/en.json          |   3 +-
 .../public/themes/default/default-theme.css   |  53 ++---
 .../Application/Create/ApplicationCreate.jsx  |  67 ++----
 .../Application/Create/CreateSteps/Step1.jsx  | 215 +++++++++---------
 .../Application/Create/CreateSteps/Step2.jsx  |  59 ++---
 .../Application/Create/CreateSteps/Step3.jsx  | 146 ++++++------
 .../Application/Create/CreateSteps/Step4.jsx  |   6 +-
 .../UIComponents/StepprHeader/Step.jsx        |  74 ++++++
 .../UIComponents/StepprHeader/Stepper.jsx     |  52 +++++
 .../UIComponents/StepprHeader/stepper.css     |  97 ++++++++
 10 files changed, 490 insertions(+), 282 deletions(-)
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
 create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
index 3bc7a828d77..99cad4fbb59 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json
@@ -57,5 +57,6 @@
   "Yes" : "Yes",
   "No" : "No",
   "No.Platform.Tags" : "No Platform Tags",
-  "Create.Platform" : "Create Platform"
+  "Create.Platform" : "Create Platform",
+  "Optional": "Optional"
 }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index a1e6296243a..ded54adbd79 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -335,24 +335,6 @@ body {
     padding: 24px;
 }
 
-.stepper-header {
-    width: 100%;
-    color: #BaBaBa;
-    padding-bottom: 5px;
-    margin-bottom: 10px;
-}
-
-#application-tag {
-    margin: 0 2px 0 2px;
-    background-color: blue;
-    height: 20px;
-}
-
-#application-tag:hover {
-    cursor: pointer;
-    background-color: #007bff;
-}
-
 .platform-link-placeholder {
     color: #888888;
     float: right;
@@ -484,26 +466,29 @@ body {
 
 #modal-body-content {
     max-height: 700px;
+    padding-left: 24px;
     overflow-y: auto;
 }
 
-.step-index {
-    height: 20px;
-    width: 20px;
-    background-color: #2196F3;
-    border-radius: 50%;
-}
-
 #img-btn-screenshot {
     margin: 0 5px 0 5px;
 }
 
 #app-create-modal {
     max-width: 700px;
-    overflow-x: auto;
     border-radius: 0% !important;
 }
 
+.app-create-modal-header {
+    background-color: #4353bd;
+    color: white;
+    padding: 24px !important;
+}
+
+.app-create-modal-content {
+    padding: 0 !important;
+}
+
 #store {
     border: none;
     border-bottom: solid #BDBDBD 1px;
@@ -853,3 +838,19 @@ div.tab button.active {
     font-weight: 500;
     color: #9e9e9e;
 }
+
+/**
+    If you need to change the color of active steps in stepper,
+    uncomment the following and set the background color and font color as needed.
+*/
+/*
+.stepper-active-index {
+    background-color: #0a6eff !important;
+    color: white !important;
+}
+
+.stepper-passed-index {
+    background-color: #0a6eff !important;
+    color: green !important;
+}
+*/
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
index 4d03280ff19..ffcee5be92d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
@@ -21,8 +21,9 @@ import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../../api/authHandler";
 import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
 import ApplicationMgtApi from '../../../api/applicationMgtApi';
-import {Col, Modal, ModalBody, ModalHeader, Row} from 'reactstrap';
+import {Modal, ModalHeader} from 'reactstrap';
 import {FormattedMessage} from 'react-intl';
+import Stepper from "../../UIComponents/StepprHeader/Stepper";
 
 
 /**
@@ -148,6 +149,18 @@ class ApplicationCreate extends Component {
         }
     };
 
+    /**
+     * Defines the application creation stepper.
+     * */
+    getStepperHeaders() {
+        return [
+            {index: 1, text: <FormattedMessage id="General.Info" defaultMessage="General.Info"/>},
+            {index: 2, text: <FormattedMessage id="Select.Platform" defaultMessage="Select.Platform"/>},
+            {index: 3, text: <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>},
+            {index: 4, text: <FormattedMessage id="Release" defaultMessage="Release"/>, optional: true}
+        ];
+    }
+
     /**
      * Remove the last data point
      * */
@@ -239,51 +252,17 @@ class ApplicationCreate extends Component {
             <div id="create-application-modal">
                 <Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
                        backdrop={'static'}>
-                    <ModalHeader toggle={this.toggle}>
+                    <ModalHeader toggle={this.toggle} className="app-create-modal-header">
                         <FormattedMessage id="Create.Application" defaultMessage="Create Application"/>
                     </ModalHeader>
-                    <ModalBody id="modal-body-content">
-                        <Row>
-                            <Col>
-                                <div className="stepper-header">
-                                    <Row>
-                                        <Col>
-                                            <div className="stepper-header-content">
-                                                <div className="step-index">1</div>
-                                                <div className="step-header">
-                                                    <FormattedMessage id="General.Info" defaultMessage="General.Info"/>
-                                                </div>
-                                            </div>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">2</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Select.Platform"
-                                                                  defaultMessage="Select.Platform"/>
-                                            </span>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">3</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Screenshots" defaultMessage="Screenshots"/>
-                                            </span>
-                                        </Col>
-                                        <Col>
-                                            <span className="step-index">4</span>
-                                            <span className="step-header">
-                                                <FormattedMessage id="Release" defaultMessage="Release"/>
-                                            </span>
-                                        </Col>
-                                    </Row>
-                                </div>
-                            </Col>
-                        </Row>
-                        <Row>
-                            <Col>
-                                {this.getStepContent(stepIndex)}
-                            </Col>
-                        </Row>
-                    </ModalBody>
+                    <div className="container app-create-modal-content">
+                        <Stepper
+                            activeStep={stepIndex + 1}
+                            previousStep={stepIndex}
+                            stepContent={this.getStepperHeaders()}
+                        />
+                        {this.getStepContent(stepIndex)}
+                    </div>
                 </Modal>
             </div>);
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index bd7de1e981c..e0e477f77ab 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter, ModalBody} from 'reactstrap';
 import * as validator from '../../../../common/validator';
 import Chip from "../../../UIComponents/Chip/Chip";
 
@@ -166,6 +166,7 @@ class Step1 extends Component {
      * Set text field values to state.
      * */
     onTextFieldChange(event) {
+        console.log(event.target.value);
         let field = event.target.name;
         switch (field) {
             case "appName": {
@@ -236,114 +237,112 @@ class Step1 extends Component {
 
         return (
             <div>
-                <div>
-                    <div>
-                        <FormGroup>
-                            <Label for="app-title">
-                                <FormattedMessage id='Title' defaultMessage='Title'/>*
-                            </Label>
-                            <Input
-                                required
-                                type="text"
-                                name="appName"
-                                id="app-title"
-                                value={this.state.name}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-short-description">
-                                <FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
-                            </Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appShortDescription"
-                                id="app-short-description"
-                                value={this.state.shortDescription}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.shortDescription}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-description">
-                                <FormattedMessage id='Description' defaultMessage='Description'/>*
-                            </Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appDescription"
-                                id="app-description"
-                                value={this.state.description}
-                                onChange={this.onTextFieldChange}
-                            />
-                            <FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-category">
-                                <FormattedMessage id='Category' defaultMessage='Category'/>
-                            </Label>
-                            <Input
-                                type="select"
-                                name="category"
-                                id="app-category"
-                            >
-                                <option key={0} value={{id: 0, name: "business"}}>Business</option>
-                            </Input>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-visibility">
-                                <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
-                            </Label>
-                            <Form inline>
-                                <FormGroup>
-                                    <Input
-                                        type="select"
-                                        name="visibility"
-                                        id="app-visibility"
-                                        onChange={this.onVisibilityChange}
-                                    >
-                                        <option id="app-visibility-default" disabled selected>Select the App Visibility
-                                                                                              Option.
-                                        </option>
-                                        <option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
-                                        </option>
-                                        <option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
-                                        <option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
-                                    </Input>
-                                </FormGroup>
-                                {visibilityItem()}
-                            </Form>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
-                            <Input
-                                required
-                                type="text"
-                                value={this.state.defValue}
-                                name="app-tags"
-                                id="app-tags"
-                                onChange={this.handleTagChange.bind(this)}
-                                onKeyPress={this.addTags.bind(this)}
-                            />
+                <ModalBody id="modal-body-content">
+                    <FormGroup>
+                        <Label for="app-title">
+                            <FormattedMessage id='Title' defaultMessage='Title'/>*
+                        </Label>
+                        <Input
+                            required
+                            type="text"
+                            name="appName"
+                            id="app-title"
+                            value={this.state.name}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-short-description">
+                            <FormattedMessage id="ShortDescription" defaultMessage="ShortDescription"/>*
+                        </Label>
+                        <Input
+                            required
+                            type="textarea"
+                            name="appShortDescription"
+                            id="app-short-description"
+                            value={this.state.shortDescription}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.shortDescription}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-description">
+                            <FormattedMessage id='Description' defaultMessage='Description'/>*
+                        </Label>
+                        <Input
+                            required
+                            type="textarea"
+                            name="appDescription"
+                            id="app-description"
+                            value={this.state.description}
+                            onChange={this.onTextFieldChange}
+                        />
+                        <FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-category">
+                            <FormattedMessage id='Category' defaultMessage='Category'/>
+                        </Label>
+                        <Input
+                            type="select"
+                            name="category"
+                            id="app-category"
+                        >
+                            <option key={0} value={{id: 0, name: "business"}}>Business</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-visibility">
+                            <FormattedMessage id='Visibility' defaultMessage='Visibility'/>
+                        </Label>
+                        <Form inline>
+                            <FormGroup>
+                                <Input
+                                    type="select"
+                                    name="visibility"
+                                    id="app-visibility"
+                                    onChange={this.onVisibilityChange}
+                                >
+                                    <option id="app-visibility-default" disabled selected>Select the App Visibility
+                                                                                          Option.
+                                    </option>
+                                    <option key={1}><FormattedMessage id='Devices' defaultMessage='Devices'/>
+                                    </option>
+                                    <option key={2}><FormattedMessage id='Roles' defaultMessage='Roles'/></option>
+                                    <option key={3}><FormattedMessage id='Groups' defaultMessage='Groups'/></option>
+                                </Input>
+                            </FormGroup>
+                            {visibilityItem()}
+                        </Form>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='Tags'/>*</Label>
+                        <Input
+                            required
+                            type="text"
+                            value={this.state.defValue}
+                            name="app-tags"
+                            id="app-tags"
+                            onChange={this.handleTagChange.bind(this)}
+                            onKeyPress={this.addTags.bind(this)}
+                        />
 
-                            <div id="batch-content">
-                                {this.state.tags.map(tag => {
-                                        return (
-                                            <Chip
-                                                key={tag.key}
-                                                content={tag}
-                                                onDelete={this.handleRequestDelete}
-                                            />
-                                        )
-                                    }
-                                )}
-                            </div>
-                            <FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
-                        </FormGroup>
-                    </div>
-                </div>
+                        <div id="batch-content">
+                            {this.state.tags.map(tag => {
+                                    return (
+                                        <Chip
+                                            key={tag.key}
+                                            content={tag}
+                                            onDelete={this.handleRequestDelete}
+                                        />
+                                    )
+                                }
+                            )}
+                        </div>
+                        <FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
+                    </FormGroup>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
                         <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
index f40ca3c6306..af8017d1bba 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import AuthHandler from "../../../../api/authHandler";
 import PlatformMgtApi from "../../../../api/platformMgtApi";
-import {Button, FormFeedback, FormGroup, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
 import {FormattedMessage} from 'react-intl';
 import * as validator from '../../../../common/validator';
 
@@ -145,33 +145,36 @@ class Step2 extends Component {
     render() {
         return (
             <div>
-
-                <FormGroup>
-                    <Label for="store">Store Type</Label>
-                    <Input type="select" name="store" className="input-custom" onChange={this.onChangeStore.bind(this)}>
-                        <option>Enterprise</option>
-                        <option>Public</option>
-                    </Input>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
-                    <Input
-                        required
-                        type="select"
-                        name="store"
-                        onChange={this.onChangePlatform.bind(this)}
-                    >
-                        <option id="app-visibility-default" disabled selected>Select the Application Platform</option>
-                        {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
-                            return (
-                                <option value={platform.identifier} key={platform.identifier}>
-                                    {platform.name}
-                                </option>
-                            )
-                        }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
-                    </Input>
-                    <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
-                </FormGroup>
+                <ModalBody id="modal-body-content">
+                    <FormGroup>
+                        <Label for="store">Store Type</Label>
+                        <Input type="select" name="store" className="input-custom"
+                               onChange={this.onChangeStore.bind(this)}>
+                            <option>Enterprise</option>
+                            <option>Public</option>
+                        </Input>
+                    </FormGroup>
+                    <FormGroup>
+                        <Label for="store"><FormattedMessage id='Platform' defaultMessage='Platform'/></Label>
+                        <Input
+                            required
+                            type="select"
+                            name="store"
+                            onChange={this.onChangePlatform.bind(this)}
+                        >
+                            <option id="app-visibility-default" disabled selected>Select the Application Platform
+                            </option>
+                            {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
+                                return (
+                                    <option value={platform.identifier} key={platform.identifier}>
+                                        {platform.name}
+                                    </option>
+                                )
+                            }) : <option><FormattedMessage id='No.Platform' defaultMessage='No Platforms'/></option>}
+                        </Input>
+                        <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
+                    </FormGroup>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index 27c9b6fb1e9..74b68eb5526 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
 import * as validator from '../../../../common/validator';
-import {Button, FormFeedback, FormGroup, Label, ModalFooter} from 'reactstrap';
+import {Button, FormFeedback, FormGroup, Label, ModalBody, ModalFooter} from 'reactstrap';
 import AppImage from "../../../UIComponents/AppImage/AppImage";
 import {FormattedMessage} from 'react-intl';
 
@@ -138,92 +138,94 @@ class Step3 extends Component {
     render() {
         return (
             <div className="createStep2Content">
-                <div>
-                    <FormGroup>
-                        <Label for="app-screenshots">
-                            <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
-                        </Label>
-                        <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
-                        <div id="screenshot-container">
-                            {this.state.screenshots.map((tile) => (
-                                <div id="app-image-screenshot">
-                                    <AppImage image={tile[0].preview}/>
-                                </div>
-                            ))}
-                            {this.state.screenshots.length < 3 ?
-                                <Dropzone
-                                    className="application-create-screenshot-dropzone"
-                                    accept="image/jpeg, image/png"
-                                    onDrop={(screenshots, rejected) => {
-                                        let tmpScreenshots = this.state.screenshots;
-                                        tmpScreenshots.push(screenshots);
-                                        this.setState({
-                                            screenshots: tmpScreenshots
-                                        });
-                                    }}
-                                >
-                                    <i className="fw fw-add"></i>
-                                </Dropzone> : <div/>}
-                        </div>
-                        <FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
-                    </FormGroup>
-                </div>
-                <div style={{display: 'flex'}}>
-                    <div style={{float: 'left', marginRight: '15px'}}>
+                <ModalBody id="modal-body-content">
+                    <div>
                         <FormGroup>
-                            <Label for="app-icon">
+                            <Label for="app-screenshots">
                                 <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
                             </Label>
-                            <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
-                            <div id="app-icon-container">
-                                {this.state.icon.map((tile) => (
-                                    <div id="app-image-icon">
-                                        <AppImage image={tile.preview}/>
+                            <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                            <div id="screenshot-container">
+                                {this.state.screenshots.map((tile) => (
+                                    <div id="app-image-screenshot">
+                                        <AppImage image={tile[0].preview}/>
                                     </div>
                                 ))}
-
-                                {this.state.icon.length === 0 ?
+                                {this.state.screenshots.length < 3 ?
                                     <Dropzone
-                                        className="application-create-icon-dropzone"
+                                        className="application-create-screenshot-dropzone"
                                         accept="image/jpeg, image/png"
-                                        onDrop={(icon, rejected) => {
-                                            this.setState({icon, rejected});
+                                        onDrop={(screenshots, rejected) => {
+                                            let tmpScreenshots = this.state.screenshots;
+                                            tmpScreenshots.push(screenshots);
+                                            this.setState({
+                                                screenshots: tmpScreenshots
+                                            });
                                         }}
                                     >
                                         <i className="fw fw-add"></i>
                                     </Dropzone> : <div/>}
                             </div>
-                            <FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
+                            <FormFeedback id="form-error">{this.state.errors.screenshots}</FormFeedback>
                         </FormGroup>
                     </div>
-                    <div style={{marginLeft: '15px'}}>
-                        <FormGroup>
-                            <Label for="app-banner">
-                                <FormattedMessage id='Icon' defaultMessage='Icon'/>*
-                            </Label>
-                            <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
-                            <div id="app-banner-container">
-                                {this.state.banner.map((tile) => (
-                                    <div id="app-image-banner">
-                                        <AppImage image={tile.preview}/>
-                                    </div>
-                                ))}
-                                {this.state.banner.length === 0 ?
-                                    <Dropzone
-                                        className="application-create-banner-dropzone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(banner, rejected) => {
-                                            this.setState({banner, rejected});
-                                        }}
-                                    >
-                                        <i className="fw fw-add"></i>
-                                    </Dropzone> : <div/>
-                                }
-                            </div>
-                            <FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
-                        </FormGroup>
+                    <div style={{display: 'flex'}}>
+                        <div style={{float: 'left', marginRight: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-icon">
+                                    <FormattedMessage id='Screenshots' defaultMessage='Screenshots'/>*
+                                </Label>
+                                <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                <div id="app-icon-container">
+                                    {this.state.icon.map((tile) => (
+                                        <div id="app-image-icon">
+                                            <AppImage image={tile.preview}/>
+                                        </div>
+                                    ))}
+
+                                    {this.state.icon.length === 0 ?
+                                        <Dropzone
+                                            className="application-create-icon-dropzone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(icon, rejected) => {
+                                                this.setState({icon, rejected});
+                                            }}
+                                        >
+                                            <i className="fw fw-add"></i>
+                                        </Dropzone> : <div/>}
+                                </div>
+                                <FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
+                            </FormGroup>
+                        </div>
+                        <div style={{marginLeft: '15px'}}>
+                            <FormGroup>
+                                <Label for="app-banner">
+                                    <FormattedMessage id='Icon' defaultMessage='Icon'/>*
+                                </Label>
+                                <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                <div id="app-banner-container">
+                                    {this.state.banner.map((tile) => (
+                                        <div id="app-image-banner">
+                                            <AppImage image={tile.preview}/>
+                                        </div>
+                                    ))}
+                                    {this.state.banner.length === 0 ?
+                                        <Dropzone
+                                            className="application-create-banner-dropzone"
+                                            accept="image/jpeg, image/png"
+                                            onDrop={(banner, rejected) => {
+                                                this.setState({banner, rejected});
+                                            }}
+                                        >
+                                            <i className="fw fw-add"></i>
+                                        </Dropzone> : <div/>
+                                    }
+                                </div>
+                                <FormFeedback id="form-error">{this.state.errors.banner}</FormFeedback>
+                            </FormGroup>
+                        </div>
                     </div>
-                </div>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
index 9cb1b3432cf..392441878d6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {Button, Collapse, FormGroup, FormText, Input, Label, ModalFooter} from 'reactstrap';
+import {Button, Collapse, FormGroup, FormText, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
 import Switch from '../../../UIComponents/Switch/Switch'
 import {FormattedMessage} from 'react-intl';
 
@@ -91,7 +91,7 @@ class Step4 extends Component {
     render() {
         return (
             <div className="applicationCreateStepMiddle">
-                <div>
+                <ModalBody id="modal-body-content">
                     <FormGroup>
                         <div id="app-release-switch-content">
                             <div id="app-release-switch-label">
@@ -150,7 +150,7 @@ class Step4 extends Component {
                             />
                         </FormGroup>
                     </Collapse>
-                </div>
+                </ModalBody>
                 <ModalFooter>
                     <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
                         <FormattedMessage id="Back" defaultMessage="Back"/>
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
new file mode 100644
index 00000000000..2a61ff7c168
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './stepper.css';
+import {FormattedMessage} from "react-intl";
+
+class Step extends Component {
+
+    render() {
+        const {index, text, active, passed, finalStep, optional} = this.props;
+
+        let activeStep = active ? "stepper-active-index" : "stepper-inactive-index";
+        let activeStepText = active ? " stepper-active-step-text" : "";
+        let stepPassed = index === passed || index < passed ? " stepper-passed-index" : "";
+        let stepPassedText = index === passed || index < passed ? " stepper-passed-step-text" : "";
+
+        let indexClassNames = "step-index " + activeStep + stepPassed;
+        let indexTextClassNames = "step-text " + activeStepText + stepPassedText;
+
+        let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
+
+        return (
+
+
+            <div className="step">
+                <div className="step-content">
+                    <div className={indexClassNames}>
+                            <span>
+                                {stepIndexContent}
+                             </span>
+                    </div>
+                    <div className={indexTextClassNames}>
+                        <div>
+                            {text} {!finalStep? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
+                        </div>
+                        {optional ?
+                            <div className="stepper-optional-text">
+                                (<FormattedMessage id="Optional" defaultMessage="Optional"/>)
+                            </div>: <div/>}
+                    </div>
+
+                </div>
+            </div>
+        )
+    }
+}
+
+Step.propTypes = {
+    index: PropTypes.number,
+    text: PropTypes.node,
+    active: PropTypes.bool,
+    passed: PropTypes.number,
+    finalStep: PropTypes.bool,
+    optional: PropTypes.bool
+}
+
+export default Step;
\ No newline at end of file
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
new file mode 100644
index 00000000000..75b619907f0
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import './stepper.css';
+import Step from "./Step";
+
+class Stepper extends Component {
+
+    render() {
+        const {stepContent, activeStep, previousStep} = this.props;
+        return (
+            <div className="stepper-header">
+                {stepContent.map(content => {
+                    return (
+                        <Step
+                            passed={previousStep}
+                            text={content.text}
+                            index={content.index}
+                            optional={content.optional}
+                            active={activeStep === content.index}
+                            finalStep={content.index === stepContent.length}
+                        />
+                    )
+                })}
+            </div>
+        )
+    }
+}
+
+Stepper.propTypes = {
+    stepContent: PropTypes.array,
+    activeStep: PropTypes.number
+};
+
+export default Stepper;
\ No newline at end of file
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
new file mode 100644
index 00000000000..3e35918e7c1
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.stepper-header {
+    width: 100%;
+    padding: 24px;
+    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;
+}
+
+.step {
+    display: table-cell;
+    flex-direction: row;
+    align-items: baseline;
+}
+
+.step-content {
+    display: flex;
+    width: auto;
+}
+
+
+.step-index {
+    padding-top: 3px;
+    height: 24px;
+    width: 24px;
+    font-size: 12px;
+    border-radius: 50%;
+    text-align: center;
+    margin-right: 8px;
+}
+
+.stepper-inactive-index {
+    background-color: rgba(0, 0, 0, 0.38);
+}
+
+.stepper-active-index {
+    background-color: #0a6eff;
+    color: white;
+}
+
+.stepper-passed-index {
+    background-color: #0a6eff;
+    color: white;
+}
+
+.step-text {
+    padding-top: 3px;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+}
+
+.inactive-text {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.stepper-active-step-text {
+    font-family: Roboto-Medium;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 300;
+}
+
+.stepper-passed-step-text {
+    font-family: Roboto-Medium;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.stepper-next-arrow {
+    margin-left: 15px;
+}
+
+.stepper-optional-text {
+    font-family: Roboto-Regular;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.39)
+}

From 71875904d3a719d5a122b64cfaacddca0778d170 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 02:14:06 +0530
Subject: [PATCH 10/14] Fixed malformed code.

---
 .../src/components/Application/Create/CreateSteps/Step1.jsx     | 1 -
 .../publisher/src/components/UIComponents/StepprHeader/Step.jsx | 2 --
 2 files changed, 3 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index e0e477f77ab..99afe1f0f23 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -166,7 +166,6 @@ class Step1 extends Component {
      * Set text field values to state.
      * */
     onTextFieldChange(event) {
-        console.log(event.target.value);
         let field = event.target.name;
         switch (field) {
             case "appName": {
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 2a61ff7c168..6ca41e42b96 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,8 +37,6 @@ class Step extends Component {
         let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
 
         return (
-
-
             <div className="step">
                 <div className="step-content">
                     <div className={indexClassNames}>

From bde1f80697691f21fe09db8035897253f001db3d Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 10:46:35 +0530
Subject: [PATCH 11/14] Modified the Stepper footer button layout.

---
 .../Application/Create/CreateSteps/Step1.jsx  | 18 +++++++-------
 .../Application/Create/CreateSteps/Step2.jsx  | 24 +++++++++++--------
 .../Application/Create/CreateSteps/Step3.jsx  | 24 +++++++++++--------
 .../Application/Create/CreateSteps/Step4.jsx  | 24 +++++++++++--------
 4 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index 99afe1f0f23..c273a784772 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -19,7 +19,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {FormattedMessage} from 'react-intl';
-import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalFooter, ModalBody} from 'reactstrap';
+import {Button, Form, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from 'reactstrap';
 import * as validator from '../../../../common/validator';
 import Chip from "../../../UIComponents/Chip/Chip";
 
@@ -342,13 +342,15 @@ class Step1 extends Component {
                         <FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
                     </FormGroup>
                 </ModalBody>
-                <ModalFooter>
-                    <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
-                        <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
-                    </Button>
-                    <Button className="custom-raised primary" onClick={this.setStepData}>
-                        <FormattedMessage id="Continue" defaultMessage="Continue"/>
-                    </Button>
+                <ModalFooter className="custom-footer row">
+                    <div className="footer-main-btn col">
+                        <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
+                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
+                        </Button>
+                        <Button className="custom-flat primary-flat" onClick={this.setStepData}>
+                            <FormattedMessage id="Continue" defaultMessage="Continue"/>
+                        </Button>
+                    </div>
                 </ModalFooter>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
index af8017d1bba..382f7f30265 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
@@ -175,16 +175,20 @@ class Step2 extends Component {
                         <FormFeedback id="form-error">{this.state.errors.platform}</FormFeedback>
                     </FormGroup>
                 </ModalBody>
-                <ModalFooter>
-                    <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
-                        <FormattedMessage id="Back" defaultMessage="Back"/>
-                    </Button>
-                    <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
-                        <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
-                    </Button>
-                    <Button className="custom-raised primary" onClick={this.setStepData}>
-                        <FormattedMessage id="Continue" defaultMessage="Continue"/>
-                    </Button>
+                <ModalFooter className="custom-footer row">
+                    <div className="footer-back-btn col">
+                        <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
+                            <FormattedMessage id="Back" defaultMessage="Back"/>
+                        </Button>
+                    </div>
+                    <div className="footer-main-btn col">
+                        <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
+                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
+                        </Button>
+                        <Button className="custom-flat primary-flat" onClick={this.setStepData}>
+                            <FormattedMessage id="Continue" defaultMessage="Continue"/>
+                        </Button>
+                    </div>
                 </ModalFooter>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index 74b68eb5526..dc6b7028755 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -226,16 +226,20 @@ class Step3 extends Component {
                         </div>
                     </div>
                 </ModalBody>
-                <ModalFooter>
-                    <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
-                        <FormattedMessage id="Back" defaultMessage="Back"/>
-                    </Button>
-                    <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
-                        <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
-                    </Button>
-                    <Button className="custom-raised primary" onClick={this.setStepData}>
-                        <FormattedMessage id="Continue" defaultMessage="Continue"/>
-                    </Button>
+                <ModalFooter className="custom-footer row">
+                    <div className="footer-back-btn col">
+                        <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
+                            <FormattedMessage id="Back" defaultMessage="Back"/>
+                        </Button>
+                    </div>
+                    <div className="footer-main-btn col">
+                        <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
+                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
+                        </Button>
+                        <Button className="custom-flat primary-flat" onClick={this.setStepData}>
+                            <FormattedMessage id="Continue" defaultMessage="Continue"/>
+                        </Button>
+                    </div>
                 </ModalFooter>
             </div>
         );
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
index 392441878d6..77bff62b924 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
@@ -151,16 +151,20 @@ class Step4 extends Component {
                         </FormGroup>
                     </Collapse>
                 </ModalBody>
-                <ModalFooter>
-                    <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
-                        <FormattedMessage id="Back" defaultMessage="Back"/>
-                    </Button>
-                    <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
-                        <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
-                    </Button>
-                    <Button className="custom-raised primary" onClick={this.onSubmit}>
-                        <FormattedMessage id="Finish" defaultMessage="Finish"/>
-                    </Button>
+                <ModalFooter className="custom-footer row">
+                    <div className="footer-back-btn col">
+                        <Button className="custom-flat primary-flat" onClick={this.onBackClick}>
+                            <FormattedMessage id="Back" defaultMessage="Back"/>
+                        </Button>
+                    </div>
+                    <div className="footer-main-btn col">
+                        <Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
+                            <FormattedMessage id="Cancel" defaultMessage="Cancel"/>
+                        </Button>
+                        <Button className="custom-flat primary-flat" onClick={this.onSubmit}>
+                            <FormattedMessage id="Finish" defaultMessage="Finish"/>
+                        </Button>
+                    </div>
                 </ModalFooter>
             </div>
         );

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 12/14] 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 6ca41e42b96..5ddc1954498 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 75b619907f0..aed929eb7d2 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 3e35918e7c1..1b116bd8222 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;
 }
 

From ead3c74fe44d06c6e939145de7b788c406f77dca Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 10:54:26 +0530
Subject: [PATCH 13/14] Added key field to data table columns and rows.

---
 .../Application/ApplicationListing.jsx        | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
index 6effa9b7ea7..9ec06153c71 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx
@@ -223,34 +223,46 @@ class ApplicationListing extends Component {
                     {this.headers.map(header => {
                         if (header.data_id === "applicationName") {
                             return (
-                                <Col xs="4">{header.label}</Col>)
+                                <Col key={Math.random()} xs="4">{header.label}</Col>)
                         } else if (header.data_id === "image") {
-                            return (<Col xs="1">{header.label}</Col>)
+                            return (<Col key={Math.random()} xs="1">{header.label}</Col>)
                         } else if (header.data_id === "edit") {
-                            return <Col xs="1"></Col>
+                            return <Col key={Math.random()} xs="1"></Col>
                         }
-                        return (<Col>{header.label}</Col>)
+                        return (<Col key={Math.random()}>{header.label}</Col>)
                     })}
                 </Row>
                 <hr/>
                 {this.state.searchedApplications.map(application => {
                     return (
-                        <Row className="app-table-row" onClick={() => {
+                        <Row key={application.uuid} className="app-table-row" onClick={() => {
                             this.onRowClick(application.uuid)
                         }}>
-                            <Col xs="1">
+                            <Col key={Math.random()} xs="1">
                                 <img
                                     className="app-list-icon"
                                     src={application.icon}
                                 />
                             </Col>
-                            <Col xs="4" className="data-table-row-cell"><strong>{application.name}</strong></Col>
-                            <Col className="data-table-row-cell">{application.platform.name}</Col>
-                            <Col className="data-table-row-cell">{application.category.name}</Col>
                             <Col
-                                className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
+                                key={Math.random()}
+                                xs="4"
+                                className="data-table-row-cell"
+                            >
+                                <strong>{application.name}</strong>
                             </Col>
-                            <Col xs="1">
+                            <Col key={Math.random()} className="data-table-row-cell">{application.platform.name}</Col>
+                            <Col key={Math.random()} className="data-table-row-cell">{application.category.name}</Col>
+                            <Col
+                                key={Math.random()}
+                                className="data-table-row-cell"
+                            >
+                                {application.currentLifecycle.lifecycleState.name}
+                            </Col>
+                            <Col
+                                xs="1"
+                                key={Math.random()}
+                            >
                                 <Button className="custom-flat grey rounded"
                                         onClick={() => this.onAppEditClick(application.uuid)}>
                                     <i className="fw fw-edit"></i>

From 97afd6386cc6ddd2e24be6c521905ca681fe5251 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Sun, 8 Oct 2017 14:40:55 +0530
Subject: [PATCH 14/14] Modal footer button layout styles.

---
 .../public/themes/default/default-theme.css        | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index ded54adbd79..8fd1ebfd71b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -470,12 +470,22 @@ body {
     overflow-y: auto;
 }
 
+.custom-footer {
+    justify-content: inherit !important;
+    margin: 0 !important;
+}
+
+.footer-main-btn {
+    display: flex;
+    justify-content: flex-end;
+}
+
 #img-btn-screenshot {
     margin: 0 5px 0 5px;
 }
 
 #app-create-modal {
-    max-width: 700px;
+    max-width: 850px;
     border-radius: 0% !important;
 }
 
@@ -512,7 +522,7 @@ body {
     float: left;
 }
 
-#app-release-switch-switch {
+#app-release-switch {
     position: absolute;
     right: 10px;
 }