Package refactoring and adding release app component.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx

@@ -23,7 +23,7 @@ import AuthHandler from "../../api/authHandler";
 import '../../css/font-wso2.css';
 import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
 import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
-import ApplicationCreate from '../Application/ApplicationCreate';
+import ApplicationCreate from '../Application/Create/ApplicationCreate';
 import {Button, Input, InputGroup,} from 'reactstrap';
 
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationListing.jsx

@@ -22,7 +22,8 @@ import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../api/authHandler";
 import ApplicationMgtApi from '../../api/applicationMgtApi';
 import {Table} from 'reactstrap';
-import Drawer from '../UIComponents/Drawer/Drawer'
+import Drawer from '../UIComponents/Drawer/Drawer';
+import ApplicationEdit from './Edit/Base/ApplicationEditBaseLayout';
 
 /**
  * The App Create Component.
@@ -236,42 +237,46 @@ class ApplicationListing extends Component {
         return (
 
             <div id="application-list" style={this.state.appListStyle}>
-                <Table striped hover>
+                {/*<Table striped hover>*/}
-                    <thead>
+                    {/*<thead>*/}
-                    <tr>
+                    {/*<tr>*/}
-                        <th></th>
+                        {/*<th></th>*/}
-                        {/* TODO: Remove console.log and add sort method. */}
+                        {/*/!* TODO: Remove console.log and add sort method. *!/*/}
-                        <th onClick={() => {console.log("sort")}}>Application Name</th>
+                        {/*<th onClick={() => {console.log("sort")}}>Application Name</th>*/}
-                        <th>Category</th>
+                        {/*<th>Category</th>*/}
-                        <th>Platform</th>
+                        {/*<th>Platform</th>*/}
-                        <th>Status</th>
+                        {/*<th>Status</th>*/}
-                        <th></th>
+                        {/*<th></th>*/}
-                    </tr>
+                    {/*</tr>*/}
-                    </thead>
+                    {/*</thead>*/}
-                    <tbody>
+                    {/*<tbody>*/}
-                    {this.applications.map(
+                    {/*{this.applications.map(*/}
-                        (application) => {
+                        {/*(application) => {*/}
-                            return (
+                            {/*return (*/}
-                                <tr key={application.id} onClick={this.onRowClick}>
+                                {/*<tr key={application.id} onClick={this.onRowClick}>*/}
-                                    <td>
+                                    {/*<td>*/}
-                                        {/* TODO: Move this styles to css. */}
+                                        {/*/!* TODO: Move this styles to css. *!/*/}
-                                        <img
+                                        {/*<img*/}
-                                            src={application.icon}
+                                            {/*src={application.icon}*/}
-                                            height='50px'
+                                            {/*height='50px'*/}
-                                            width='50px'
+                                            {/*width='50px'*/}
-                                            style={{border: 'solid 1px black', borderRadius: "100%"}}
+                                            {/*style={{border: 'solid 1px black', borderRadius: "100%"}}*/}
-                                        /></td>
+                                        {/*/></td>*/}
-                                    <td>{application.applicationName}</td>
+                                    {/*<td>{application.applicationName}</td>*/}
-                                    <td>{application.category}</td>
+                                    {/*<td>{application.category}</td>*/}
-                                    <td>{application.platform}</td>
+                                    {/*<td>{application.platform}</td>*/}
-                                    <td>{application.status}</td>
+                                    {/*<td>{application.status}</td>*/}
-                                    <td><i>Edit</i></td>
+                                    {/*<td><i>Edit</i></td>*/}
-                                </tr>
+                                {/*</tr>*/}
-                            )
+                            {/*)*/}
-                        }
+                        {/*}*/}
-                    )}
+                    {/*)}*/}
-                    </tbody>
+                    {/*</tbody>*/}
-                </Table>
+                {/*</Table>*/}
+
+                <ApplicationEdit/>
+
+
                 <Drawer style={this.state.drawer}>
                     <div id="application-view">
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx

@@ -16,18 +16,12 @@
  * under the License.
  */
 
-import Theme from '../../theme';
 import React, {Component} from 'react';
-import Dialog from 'material-ui/Dialog';
 import {withRouter} from 'react-router-dom';
-import FlatButton from 'material-ui/FlatButton';
+import AuthHandler from "../../../api/authHandler";
-import AuthHandler from "../../api/authHandler";
+import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
-import {Step1, Step2, Step3, Step4} from './CreateSteps';
+import ApplicationMgtApi from '../../../api/applicationMgtApi';
-import RaisedButton from 'material-ui/RaisedButton';
+import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
-import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Card, CardActions, CardTitle} from 'material-ui/Card';
-import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
-import {Button, Modal, InputGroup, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup} from 'reactstrap';
 
 /**
  * The App Create Component.
@@ -221,13 +215,18 @@ 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}><i style={{cursor: 'pointer'}} onClick={this.handlePrev}><strong>{'< '}</strong></i>Create Application</ModalHeader>
+                    <ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
                     <ModalBody id="modal-body-content">
                         {this.getStepContent(this.state.stepIndex)}
                     </ModalBody>
                     <ModalFooter>
+                        {this.state.stepIndex === 0?
+                            <div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>}
                         <Button color="secondary" onClick={this.close}>Cancel</Button>
-                        <Button color="primary" onClick={this.handleNext}>Continue</Button>{' '}
+                        {this.state.finished?
+                            <Button color="primary" onClick={this.handleSubmit}>Finish</Button>
+                            : <Button color="primary" onClick={this.handleNext}>Continue</Button> }
+
                     </ModalFooter>
                 </Modal>
             </div>);

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx

@@ -16,11 +16,10 @@
  * under the License.
  */
 
-import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import AuthHandler from "../../../api/authHandler";
+import AuthHandler from "../../../../api/authHandler";
-import PlatformMgtApi from "../../../api/platformMgtApi";
+import PlatformMgtApi from "../../../../api/platformMgtApi";
 import {FormGroup, Input, Label} from 'reactstrap';
 
 /**
@@ -57,17 +56,6 @@ class Step1 extends Component {
         this.scriptId = "application-create-step1";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
     componentDidMount() {
         //Get the list of available platforms and set to the state.
         PlatformMgtApi.getPlatforms().then(response => {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import Theme from '../../../theme';
 import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
@@ -61,17 +60,6 @@ class Step2 extends Component {
         this.scriptId = "application-create-step2";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
     /**
      * Create a tag on Enter key press and set it to the state.
      * Clears the tags text field.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import Theme from '../../../theme';
 import Chip from 'material-ui/Chip';
 import Dropzone from 'react-dropzone';
 import React, {Component} from 'react';
@@ -60,16 +59,6 @@ class Step3 extends Component {
         this.scriptId = "application-create-step2";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
 
     /**
      * Create a tag on Enter key press and set it to the state.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx

@@ -18,15 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import Toggle from 'material-ui/Toggle';
+import {Collapse, FormGroup, Input, Label} from 'reactstrap';
-import MenuItem from 'material-ui/MenuItem';
+import Switch from '../../../UIComponents/Switch/Switch'
-import TextField from 'material-ui/TextField';
-import FlatButton from 'material-ui/FlatButton';
-import SelectField from 'material-ui/SelectField';
-import RaisedButton from 'material-ui/RaisedButton';
-import Theme from '../../../theme';
-import {Button, Form, FormGroup, Label, Input, FormText, Badge, Collapse} from 'reactstrap';
-import Switch from '../../UIComponents/Switch/Switch'
 
 /**
  * The Third step of application create wizard. {Application Release Step}
@@ -65,17 +58,6 @@ class Step4 extends Component {
         this.scriptId = "application-create-step3";
     }
 
-    componentWillMount() {
-        /**
-         *Loading the theme files based on the the user-preference.
-         */
-        Theme.insertThemingScripts(this.scriptId);
-    }
-
-    componentWillUnmount() {
-        Theme.removeThemingScripts(this.scriptId);
-    }
-
     /**
      * Handles finish button click.
      * This invokes handleNext function in parent component.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/ApplicationEditBaseLayout.jsx

@@ -1,37 +0,0 @@
-/*
- * 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';
-
-class ApplicationEdit extends Component {
-
-    constructor() {
-        super();
-    }
-
-    render() {
-        return(
-            <div id="application-edit-base">
-
-            </div>
-        )
-    }
-}
-
-export default ApplicationEdit;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx

@@ -0,0 +1,169 @@
+/*
+ * 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 React, {Component} from 'react';
+import './baseLayout.css';
+import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
+import {Button, Col, Row} from "reactstrap";
+
+class ApplicationEdit extends Component {
+
+    constructor() {
+        super();
+        this.getTabContent = this.getTabContent.bind(this);
+        this.state = {
+            general: "active",
+            release: "",
+            pkgmgt: "",
+            activeTab: 1
+        }
+    }
+
+    handleClick(event) {
+        event.stopPropagation();
+        console.log(typeof event.target.value);
+        const key = event.target.value;
+
+        switch (key) {
+            case "1": {
+                console.log("Step1");
+                this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
+                break;
+            }
+            case "2": {
+                this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
+                break;
+            }
+            case "3": {
+                this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
+                break;
+            }
+            default: {
+                return "No Content";
+            }
+        }
+
+    }
+
+    getTabContent(tab) {
+
+        switch (tab) {
+            case 1: {
+                return ("Step 1")
+            }
+            case 2: {
+                return <ReleaseManager/>
+            }
+            case 3: {
+                return ("Step3")
+            }
+        }
+
+    }
+
+    render() {
+        console.log(this.state);
+        return (
+            <div id="application-edit-base">
+
+                <Row id="application-edit-header">
+                    <Col>Application Name</Col>
+                </Row>
+                <Row id="application-edit-main-container">
+                    <Col xs="3">
+                        <div className="tab">
+                            <button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
+                                General
+                            </button>
+                            <button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
+                                App
+                                Releases
+                            </button>
+                            <button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
+                                Package Manager
+                            </button>
+                        </div>
+                    </Col>
+                    <Col xs="9">
+                        <div id="app-edit-content">
+                        <Row>
+                            <Col xs="12">
+                                <div id="application-edit-outer-content">
+                                    {/* Application edit content */}
+                                    <div id="application-edit-content">
+                                        {this.getTabContent(this.state.activeTab)}
+                                    </div>
+                                </div>
+                            </Col>
+                        </Row>
+                        <Row >
+                            <Col xs="3 offset-9">
+                                <Button>Save</Button>
+                            </Col>
+                        </Row>
+                        </div>
+                    </Col>
+                </Row>
+
+                {/*<Row>*/}
+                {/*/!* Contains the application Name and Save button*!/*/}
+                {/*<div id="application-edit-header">*/}
+                {/*<Col>*/}
+                {/*<span className="application-header-text">*/}
+                {/*Header*/}
+                {/*</span>*/}
+                {/*</Col>*/}
+                {/*<Col>*/}
+                {/*<Button id="app-save-btn" className="save-btn">Save</Button>*/}
+                {/*</Col>*/}
+                {/*</div>*/}
+                {/*</Row>*/}
+                {/*<div id="application-edit-main-container">*/}
+                {/*<Row>*/}
+                {/*<Col xs="6" sm="4">*/}
+
+                {/*/!* Contains side bar items, General, App Release, Package Manager *!/*/}
+                {/*<div className="tab">*/}
+                {/*<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>*/}
+                {/*General*/}
+                {/*</button>*/}
+                {/*<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>*/}
+                {/*App*/}
+                {/*Releases*/}
+                {/*</button>*/}
+                {/*<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>*/}
+                {/*Package Manager*/}
+                {/*</button>*/}
+                {/*</div>*/}
+                {/*</Col>*/}
+                {/*<Col xs="6" sm="4">*/}
+                {/*<div id="application-edit-outer-content">*/}
+                {/*/!* Application edit content *!/*/}
+                {/*<div id="application-edit-content">*/}
+                {/*{this.getTabContent(this.state.activeTab)}*/}
+                {/*</div>*/}
+                {/*</div>*/}
+                {/*</Col>*/}
+                {/*</Row>*/}
+                {/*</div>*/}
+            </div>
+        )
+    }
+}
+
+export default ApplicationEdit;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css

@@ -0,0 +1,94 @@
+
+#application-edit-base {
+    width: 70%;
+    margin: 0 auto;
+    height: 100%;
+    background-color: #f6f6f6;
+    border: solid 1px #828282;
+}
+
+#application-edit-header {
+    height: 50px;
+    width: 100%;
+    margin: 0;
+    background-color: #9a9a9a;
+    border: solid 1px #a2a2a2;
+    font-size: 20px;
+}
+
+.application-header-text {
+    margin: 10px 0px 0px 10px;
+}
+
+#save-btn-content {
+    float: right;
+
+}
+
+#app-save-btn {
+    border-radius: 0%;
+}
+
+.save-btn {
+    margin: 5px 5px 5px 0px;
+    height: 70%;
+    width: 50%;
+    float: right;
+}
+
+.save-btn:hover {
+    cursor: pointer;
+}
+
+/*Tab styling*/
+div.tab {
+    float: left;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    height: 100%;
+}
+
+/* Style the tab buttons */
+div.tab button {
+    display: block;
+    background-color: inherit;
+    color: black;
+    padding: 15px 16px;
+    width: 100%;
+    border: none;
+    outline: none;
+    text-align: left;
+    cursor: pointer;
+    transition: 0.3s;
+}
+
+/* Change background color of buttons on hover */
+div.tab button:hover {
+    background-color: #ddd;
+    cursor: pointer;
+}
+
+/* Create an active/current "tab button" class */
+div.tab button.active {
+    background-color: #ccc;
+}
+
+
+#application-edit-main-container {
+    display: flex;
+}
+
+#application-edit-outer-content {
+    height: auto;
+    width: 100%;
+}
+
+#application-edit-content {
+    margin: 5px 10px 5px 10px;
+    width: 90%;
+}
+
+#app-edit-content {
+    height: 100%;
+    position: relative;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/PackageManager.jsx

@@ -27,7 +27,7 @@ class PackageManager extends Component {
 
     render() {
         return(
-            <div>
+            <div id="package-mgt-content">
 
             </div>
         )

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx

@@ -16,22 +16,14 @@
  * under the License.
  */
 
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 
-class ReleaseManager extends Component {
+class ReleaseContent extends Component {
+
 
-    constructor() {
-        super();
-    }
 
-    render() {
-        return(
-            <div>
 
-            </div>
-        )
-    }
 }
 
-export default ReleaseManager;
+
+export default ReleaseContent;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx

@@ -0,0 +1,96 @@
+/*
+ * 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 React, {Component} from 'react';
+import './release-mgt.css';
+import {Button, Col, Row} from "reactstrap";
+
+class ReleaseManager extends Component {
+
+    constructor() {
+        super();
+        this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
+    }
+
+    /**
+     * Holds a generic message saying there are no current release in the specified release channel.
+     * */
+    getNoReleaseContent(release) {
+        return (
+            <div>
+                <Row>
+                    <Col sm="12" md={{size: 8, offset: 4}}>
+                        <p>You have no on-going {release} Releases!</p>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col sm="12" md={{size: 8, offset: 5}}>
+                        <Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div id="release-mgt-content">
+                <Row>
+                    <Col sm="12">
+                        <div className="release" id="production">
+                            <span>Production Releases</span>
+                            <div className="release-content">
+                                <div className="release-inner">
+
+                                    {this.getNoReleaseContent("Production")}
+
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col sm="12">
+                        <div className="release" id="beta">
+                            <span>Beta Releases</span>
+                            <div className="release-content">
+                                <div className="release-inner">
+                                    {this.getNoReleaseContent("Beta")}
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col sm="12">
+                        <div className="release" id="alpha">
+                            <span>Alpha Releases</span>
+                            <div className="release-content">
+                                <div className="release-inner">
+                                    {this.getNoReleaseContent("Alpha")}
+                                </div>
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
+}
+
+export default ReleaseManager;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css

@@ -0,0 +1,32 @@
+.release-content {
+    height: 180px;
+    width: 95%;
+    border: dashed 1px #626262;
+    border-radius: 2%;
+    position: relative;
+    background-color: #e8e8e8;
+}
+
+.release-content:after {
+    content: "";
+    letter-spacing: 4px;
+}
+
+.release {
+    margin: 30px 10px 20px 30px;
+}
+
+.no-release-content {
+    position: absolute;
+    margin-top: 10px;
+    left: 40%;
+}
+
+.button-add:hover {
+    cursor: pointer;
+}
+
+.release-inner {
+    margin-top: 5%;
+}
+

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformListing.jsx

@@ -21,7 +21,7 @@ import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import TextField from 'material-ui/TextField';
 import AuthHandler from "../../api/authHandler";
-import DataTable from '../UIComponents/DataTable';
+import DataTable from '../UIComponents/DataTable/DataTable';
 import PlatformMgtApi from "../../api/platformMgtApi";
 import {Card, CardActions, CardTitle} from 'material-ui/Card';
 

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

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import DataTableRow from './DataTableRow';

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

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import FlatButton from 'material-ui/FlatButton';

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

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import Theme from '../../theme';
+import Theme from '../../../theme';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import IconButton from 'material-ui/IconButton';

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Input/Input.js

@@ -0,0 +1,19 @@
+import React, {Component} from 'react';
+import './input.css';
+
+class Input2 extends Component {
+
+    render() {
+        return (
+            <div className="custom-input">
+                <input type="text" required/>
+                <span className="highlight"></span>
+                <span className="under-line"></span>
+                <label>Name</label>
+            </div>
+        )
+    }
+
+}
+
+export default Input2;

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

@@ -0,0 +1,118 @@
+/** {*/
+    /*box-sizing: border-box;*/
+/*}*/
+
+/*.custom-input {*/
+    /*position: relative;*/
+    /*margin-bottom: 45px;*/
+/*}*/
+
+/*input {*/
+    /*font-size: 18px;*/
+    /*padding: 10px 10px 10px 5px;*/
+    /*display: block;*/
+    /*width: 300px;*/
+    /*border: none;*/
+    /*border-bottom: 1px solid #757575;*/
+/*}*/
+
+/*input:focus {*/
+    /*outline: none;*/
+/*}*/
+
+/*label {*/
+    /*color: #999;*/
+    /*font-size: 18px;*/
+    /*font-weight: normal;*/
+    /*position: absolute;*/
+    /*pointer-events: none;*/
+    /*left: 5px;*/
+    /*top: 10px;*/
+    /*transition: 0.2s ease all;*/
+    /*-moz-transition: 0.2s ease all;*/
+    /*-webkit-transition: 0.2s ease all;*/
+/*}*/
+
+/*!* active state *!*/
+/*input:focus ~ label, input:valid ~ label {*/
+    /*top: -20px;*/
+    /*font-size: 14px;*/
+    /*color: #5264AE;*/
+/*}*/
+
+/*.under-line {*/
+    /*position: relative;*/
+    /*display: block;*/
+    /*width: 300px;*/
+/*}*/
+
+/*.under-line:before, .under-line:after {*/
+    /*content: '';*/
+    /*height: 2px;*/
+    /*width: 0;*/
+    /*bottom: 1px;*/
+    /*position: absolute;*/
+    /*background: #5264AE;*/
+    /*transition: 0.2s ease all;*/
+    /*-moz-transition: 0.2s ease all;*/
+    /*-webkit-transition: 0.2s ease all;*/
+/*}*/
+
+/*.under-line:before {*/
+    /*left: 50%;*/
+/*}*/
+
+/*.under-line:after {*/
+    /*right: 50%;*/
+/*}*/
+
+/*!* active state *!*/
+/*input:focus ~ .under-line:before, input:focus ~ .under-line:after {*/
+    /*width: 50%;*/
+/*}*/
+
+/*.highlight {*/
+    /*position: absolute;*/
+    /*height: 60%;*/
+    /*width: 100px;*/
+    /*top: 25%;*/
+    /*left: 0;*/
+    /*pointer-events: none;*/
+    /*opacity: 0.5;*/
+/*}*/
+
+/*input:focus ~ .highlight {*/
+    /*-webkit-animation: inputHighlighter 0.3s ease;*/
+    /*-moz-animation: inputHighlighter 0.3s ease;*/
+    /*animation: inputHighlighter 0.3s ease;*/
+/*}*/
+
+/*@-webkit-keyframes inputHighlighter {*/
+    /*from {*/
+        /*background: #5264AE;*/
+    /*}*/
+    /*to {*/
+        /*width: 0;*/
+        /*background: transparent;*/
+    /*}*/
+/*}*/
+
+/*@-moz-keyframes inputHighlighter {*/
+    /*from {*/
+        /*background: #5264AE;*/
+    /*}*/
+    /*to {*/
+        /*width: 0;*/
+        /*background: transparent;*/
+    /*}*/
+/*}*/
+
+/*@keyframes inputHighlighter {*/
+    /*from {*/
+        /*background: #5264AE;*/
+    /*}*/
+    /*to {*/
+        /*width: 0;*/
+        /*background: transparent;*/
+    /*}*/
+/*}*/

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/index.js

@@ -18,12 +18,12 @@
 
 import Login from './User/Login/Login';
 import NotFound from './Error/NotFound';
-import BaseLayout from './Base/BaseLayout';
+import BaseLayout from './AppPublisherBase/BaseLayout';
 import PlatformCreate from './Platform/PlatformCreate';
 import PlatformListing from './Platform/PlatformListing';
-import ApplicationCreate from './Application/ApplicationCreate';
+import ApplicationCreate from './Application/Create/ApplicationCreate';
 import ApplicationListing from './Application/ApplicationListing';
-import ApplicationEdit from './Application/Edit/ApplicationEditBaseLayout';
+import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
 
 /**
  * Contains all UI components related to Application, Login and Platform

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

@@ -80,7 +80,10 @@ body {
     left: 110px;
     top: 20px;
     height: 25px;
-    border: hidden;
+    outline: none;
+    border: none;
+    border-bottom: solid 1px black;
+    border-radius: 0%;
 }
 
 #application-list {