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] 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>
         );