Layout modifications.

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

@@ -21,7 +21,7 @@ import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../api/authHandler";
 import ApplicationCreate from '../Application/Create/ApplicationCreate';
-import {Button, Col, Input, Row,} from 'reactstrap';
+import {Col, Container, Input, Row,} from 'reactstrap';
 import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
 
 /**
@@ -48,7 +48,6 @@ class BaseLayout extends Component {
     }
 
     handleApplicationCreateClick(event) {
-        console.log("dsfds");
         event.preventDefault();
         event.stopPropagation();
         this.setState({openModal: true});
@@ -72,7 +71,7 @@ class BaseLayout extends Component {
 
     render() {
         return (
-            <div id="container">
+            <Container noGutters fluid id="container">
                 <div id="header-content">
                     <div id="header">
                         <span id="header-text">
@@ -82,7 +81,6 @@ class BaseLayout extends Component {
                             <i className="fw fw-notification btn-header"></i>
                             <i className="fw fw-user btn-header"></i>
                         </div>
-                    </div>
                         <div id="search-box">
                             <i className="fw fw-search search-icon">
                             </i>
@@ -93,22 +91,23 @@ class BaseLayout extends Component {
                                 onChange={(event) => console.log(event.target.value)}
                             />
                         </div>
+                    </div>
                     <div id="add-btn-container">
-                        <FloatingButton className="add-btn small" onClick={this.handleApplicationCreateClick.bind(this)}/>
+                        <FloatingButton
+                            className="add-btn small"
+                            onClick={this.handleApplicationCreateClick.bind(this)}
+                        />
                     </div>
                 </div>
-
-
                 <div id="application-content" style={this.state.style}>
                     <Row>
                         <Col>
                             {this.props.children}
                         </Col>
                     </Row>
-
                 </div>
                 <ApplicationCreate open={this.state.openModal} close={this.closeModal}/>
-            </div>
+            </Container>
         );
     }
 }

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

@@ -18,148 +18,299 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import AuthHandler from "../../../../api/authHandler";
+import {Badge, FormGroup, Input, Label} from 'reactstrap';
-import PlatformMgtApi from "../../../../api/platformMgtApi";
-import {FormGroup, Input, Label} from 'reactstrap';
 
 /**
- * The first step of the application creation wizard.
+ * The Second step of application create wizard.
- * This contains following components:
+ * This contains following components.
- *      * Application Title
+ *      * App Title
- *      * Store Type
+ *      * Short Description
- *      * Application Platform
+ *      * Application Description
+ *      * Application Visibility
+ *      * Application Tags : {Used Material UI Chip component}
+ *      * Application Category.
+ *      * Platform Specific properties.
  *
  * Parent Component: Create
  * Props:
- *      1. handleNext: {type: function, Invokes handleNext function of parent component}
+ *      * handleNext : {type: function, Invokes handleNext function in Parent.}
- *      2. setData : {type: function, Sets current form data to the state of the parent component}
+ *      * handlePrev : {type: function, Invokes handlePrev function in Parent}
- *      3. removeData: {type: function, Invokes the removeStepData function click of parent}
+ *      * setData : {type: function, Invokes setStepData function in Parent}
+ *      * removeData : {type: Invokes removeStepData function in Parent}
  * */
 class Step1 extends Component {
     constructor() {
         super();
-        this.setPlatforms = this.setPlatforms.bind(this);
-        this.setStepData = this.setStepData.bind(this);
-        this.cancel = this.cancel.bind(this);
-        this.platforms = [];
         this.state = {
-            finished: false,
+            tags: [],
-            stepIndex: 0,
+            icon: [],
-            store: 1,
-            platformSelectedIndex: 0,
-            platform: "",
-            platforms: [],
-            stepData: [],
             title: "",
-            titleError: ""
+            errors: {},
+            banner: [],
+            defValue: "",
+            category: 0,
+            visibility: 0,
+            description: "",
+            screenshots: [],
+            identifier: "",
+            shortDescription: ""
         };
-        this.scriptId = "application-create-step1";
+        this.scriptId = "application-create-step2";
     }
 
-    componentDidMount() {
+    /**
-        //Get the list of available platforms and set to the state.
+     * Create a tag on Enter key press and set it to the state.
-        PlatformMgtApi.getPlatforms().then(response => {
+     * Clears the tags text field.
-            console.log(response);
+     * Chip gets two parameters: Key and value.
-            this.setPlatforms(response.data);
+     * */
-        }).catch(err => {
+    addTags(event) {
-            AuthHandler.unauthorizedErrorHandler(err);
+        let tags = this.state.tags;
-        })
+        if (event.charCode === 13) {
+            event.preventDefault();
+            tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
+            this.setState({tags, defValue: ""}, console.log(tags));
+        }
     }
 
     /**
-     * Extract the platforms from the response data and populate the state.
+     * Set the value for tag.
-     * @param platforms: The array returned as the response.
      * */
-    setPlatforms(platforms) {
+    handleTagChange(event) {
-        let tmpPlatforms = [];
+        let defaultValue = this.state.defValue;
-        for (let index in platforms) {
+        defaultValue = event.target.value;
-            let platform = {};
+        this.setState({defValue: defaultValue})
-            platform = platforms[index];
-            tmpPlatforms.push(platform);
     }
-        this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
+
+    /**
+     * Invokes the handleNext function in Create component.
+     * */
+    handleNext() {
+        let fields = [{name: "Title", value: this.state.title},
+            {name: "Short Description", value: this.state.shortDescription},
+            {name: "Description", value: this.state.description},
+            {name: "Banner", value: this.state.banner},
+            {name: "Screenshots", value: this.state.screenshots},
+            {name: "Identifier", value: this.state.identifier},
+            {name: "Icon", value: this.state.icon}];
+        this.validate(fields);
     }
 
     /**
-     * Persist the current form data to the state.
+     * Invokes the handlePrev function in Create component.
      * */
-    setStepData() {
+    handlePrev() {
-        console.log("Platforms", this.state.platforms);
+        this.props.handlePrev();
-        let step = {
-            store: this.state.store,
-            platform: this.state.platforms[this.state.platformSelectedIndex]
-        };
-        console.log(step);
-        this.props.setData("step1", {step: step});
     }
 
-    cancel() {
+    /**
+     * Handles Chip delete function.
+     * Removes the tag from state.tags
+     * */
+    handleRequestDelete(event) {
+        this.chipData = this.state.tags;
+        console.log(event.target);
+        const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
+        this.chipData.splice(chipToDelete, 1);
+        this.setState({tags: this.chipData});
+    };
+
+    /**
+     * Validate the form.
+     * */
+    validate(fields) {
+        let errors = {};
+        let errorsPresent = false;
+        fields.forEach(function (field) {
+            switch (field.name) {
+                case 'Title': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Identifier': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Short Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Description': {
+                    if (field.value === "") {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Banner': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Icon': {
+                    if (field.value.length === 0) {
+                        errors[field.name] = field.name + " is required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+                case 'Screenshots': {
+                    if (field.value.length < 3) {
+                        errors[field.name] = "3 " + field.name + " are required!";
+                        errorsPresent = true;
+                    } else {
+                        errorsPresent = false;
+                    }
+                    break;
+                }
+            }
+        });
 
+        if (!errorsPresent) {
+            this.setStepData();
+        } else {
+            this.setState({errors: errors}, console.log(errors));
+        }
     }
 
     /**
-     * Triggers when changing the Platform selection.
+     * Creates an object with the current step data and persist in the parent.
      * */
-    onChangePlatform(event) {
+    setStepData() {
-        console.log(event.target.value, this.state.platforms);
+        let stepData = {};
-        let id = event.target.value;
-        let selectedPlatform = this.state.platforms.filter((platform) => {
-            return platform.identifier === id;
-        });
-        console.log(selectedPlatform);
 
-        this.setState({platform: selectedPlatform});
+        this.props.setData("step2", {step: stepData});
     };
 
     /**
-     * Triggers when changing the Store selection.
+     * Set text field values to state.
      * */
-    onChangeStore(event) {
+    onTextFieldChange(event, value) {
-        console.log(event.target.value);
+        let field = event.target.id;
-        this.setState({store: event.target.value});
+        switch (field) {
+            case "name": {
+                this.setState({name: value});
+                break;
+            }
+            case "shortDescription": {
+                this.setState({shortDescription: value});
+                break;
+            }
+            case "description": {
+                this.setState({description: value});
+                break;
+            }
+            case "identifier": {
+                this.setState({identifier: value});
+                break;
+            }
+        }
     };
 
     render() {
+        console.log(this.state.visibilityComponent);
         return (
+            <div className="createStep2Content">
                 <div>
-
+                    <div>
+                        <FormGroup>
+                            <Label for="app-title">Title*</Label>
+                            <Input
+                                required
+                                type="text"
+                                name="appName"
+                                id="app-title"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-description">Description*</Label>
+                            <Input
+                                required
+                                type="textarea"
+                                name="appDescription"
+                                id="app-description"
+                            />
+                        </FormGroup>
                         <FormGroup>
-                    <Label for="store">Store Type</Label>
+                            <Label for="app-category">Category</Label>
                             <Input
                                 type="select"
-                        name="store"
+                                name="category"
-                        id="store"
+                                id="app-category"
-                        className="input-custom"
-                        onChange={this.onChangeStore.bind(this)}
                             >
-                        <option>Enterprise</option>
+                                <option>Business</option>
-                        <option>Public</option>
                             </Input>
                         </FormGroup>
                         <FormGroup>
-                    <Label for="store">Platform</Label>
+                            <Label for="app-visibility">Visibility</Label>
                             <Input
                                 type="select"
-                        name="store"
+                                name="visibility"
-                        id="store"
+                                id="app-visibility"
-                        onChange={this.onChangePlatform.bind(this)}
                             >
-                        {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
+                                <option>Devices</option>
+                                <option>Roles</option>
+                                <option>Groups</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-tags">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 (
-                                <option value={platform.identifier}>
+                                            <Badge
-                                    {platform.name}
+                                                style={{margin: '0 2px 0 2px'}}
-                                </option>
+                                                value={tag.value}
+                                                onClick={this.handleRequestDelete.bind(this)}
+                                            >
+                                                {tag.value}
+                                            </Badge>
                                         )
-                        }) : <option>No Platforms</option>}
+                                    }
-                    </Input>
+                                )}
+                            </div>
                         </FormGroup>
                     </div>
+                </div>
+            </div>
         );
     }
 }
 
-Step1.propTypes = {
+Step1.prototypes = {
     handleNext: PropTypes.func,
+    handlePrev: PropTypes.func,
     setData: PropTypes.func,
     removeData: PropTypes.func
 };

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

@@ -18,299 +18,148 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {Badge, FormGroup, Input, Label} from 'reactstrap';
+import AuthHandler from "../../../../api/authHandler";
+import PlatformMgtApi from "../../../../api/platformMgtApi";
+import {FormGroup, Input, Label} from 'reactstrap';
 
 /**
- * The Second step of application create wizard.
+ * The first step of the application creation wizard.
- * This contains following components.
+ * This contains following components:
- *      * App Title
+ *      * Application Title
- *      * Short Description
+ *      * Store Type
- *      * Application Description
+ *      * Application Platform
- *      * Application Visibility
- *      * Application Tags : {Used Material UI Chip component}
- *      * Application Category.
- *      * Platform Specific properties.
  *
  * Parent Component: Create
  * Props:
- *      * handleNext : {type: function, Invokes handleNext function in Parent.}
+ *      1. handleNext: {type: function, Invokes handleNext function of parent component}
- *      * handlePrev : {type: function, Invokes handlePrev function in Parent}
+ *      2. setData : {type: function, Sets current form data to the state of the parent component}
- *      * setData : {type: function, Invokes setStepData function in Parent}
+ *      3. removeData: {type: function, Invokes the removeStepData function click of parent}
- *      * removeData : {type: Invokes removeStepData function in Parent}
  * */
 class Step2 extends Component {
     constructor() {
         super();
+        this.setPlatforms = this.setPlatforms.bind(this);
+        this.setStepData = this.setStepData.bind(this);
+        this.cancel = this.cancel.bind(this);
+        this.platforms = [];
         this.state = {
-            tags: [],
+            finished: false,
-            icon: [],
+            stepIndex: 0,
+            store: 1,
+            platformSelectedIndex: 0,
+            platform: "",
+            platforms: [],
+            stepData: [],
             title: "",
-            errors: {},
+            titleError: ""
-            banner: [],
-            defValue: "",
-            category: 0,
-            visibility: 0,
-            description: "",
-            screenshots: [],
-            identifier: "",
-            shortDescription: ""
         };
-        this.scriptId = "application-create-step2";
+        this.scriptId = "application-create-step1";
     }
 
-    /**
+    componentDidMount() {
-     * Create a tag on Enter key press and set it to the state.
+        //Get the list of available platforms and set to the state.
-     * Clears the tags text field.
+        PlatformMgtApi.getPlatforms().then(response => {
-     * Chip gets two parameters: Key and value.
+            console.log(response);
-     * */
+            this.setPlatforms(response.data);
-    addTags(event) {
+        }).catch(err => {
-        let tags = this.state.tags;
+            AuthHandler.unauthorizedErrorHandler(err);
-        if (event.charCode === 13) {
+        })
-            event.preventDefault();
-            tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
-            this.setState({tags, defValue: ""}, console.log(tags));
-        }
-    }
-
-    /**
-     * Set the value for tag.
-     * */
-    handleTagChange(event) {
-        let defaultValue = this.state.defValue;
-        defaultValue = event.target.value;
-        this.setState({defValue: defaultValue})
     }
 
     /**
-     * Invokes the handleNext function in Create component.
+     * Extract the platforms from the response data and populate the state.
+     * @param platforms: The array returned as the response.
      * */
-    handleNext() {
+    setPlatforms(platforms) {
-        let fields = [{name: "Title", value: this.state.title},
+        let tmpPlatforms = [];
-            {name: "Short Description", value: this.state.shortDescription},
+        for (let index in platforms) {
-            {name: "Description", value: this.state.description},
+            let platform = {};
-            {name: "Banner", value: this.state.banner},
+            platform = platforms[index];
-            {name: "Screenshots", value: this.state.screenshots},
+            tmpPlatforms.push(platform);
-            {name: "Identifier", value: this.state.identifier},
-            {name: "Icon", value: this.state.icon}];
-        this.validate(fields);
         }
-
+        this.setState({platforms: tmpPlatforms, platformSelectedIndex: 0, platform: tmpPlatforms[0].name})
-    /**
-     * Invokes the handlePrev function in Create component.
-     * */
-    handlePrev() {
-        this.props.handlePrev();
     }
 
     /**
-     * Handles Chip delete function.
+     * Persist the current form data to the state.
-     * Removes the tag from state.tags
      * */
-    handleRequestDelete(event) {
+    setStepData() {
-        this.chipData = this.state.tags;
+        console.log("Platforms", this.state.platforms);
-        console.log(event.target);
+        let step = {
-        const chipToDelete = this.chipData.map((chip) => chip.value).indexOf(event.target.value);
+            store: this.state.store,
-        this.chipData.splice(chipToDelete, 1);
+            platform: this.state.platforms[this.state.platformSelectedIndex]
-        this.setState({tags: this.chipData});
         };
-
+        console.log(step);
-    /**
+        this.props.setData("step1", {step: step});
-     * Validate the form.
-     * */
-    validate(fields) {
-        let errors = {};
-        let errorsPresent = false;
-        fields.forEach(function (field) {
-            switch (field.name) {
-                case 'Title': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Identifier': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Short Description': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Description': {
-                    if (field.value === "") {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Banner': {
-                    if (field.value.length === 0) {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Icon': {
-                    if (field.value.length === 0) {
-                        errors[field.name] = field.name + " is required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
-                case 'Screenshots': {
-                    if (field.value.length < 3) {
-                        errors[field.name] = "3 " + field.name + " are required!";
-                        errorsPresent = true;
-                    } else {
-                        errorsPresent = false;
-                    }
-                    break;
-                }
     }
-        });
 
-        if (!errorsPresent) {
+    cancel() {
-            this.setStepData();
+
-        } else {
-            this.setState({errors: errors}, console.log(errors));
-        }
     }
 
     /**
-     * Creates an object with the current step data and persist in the parent.
+     * Triggers when changing the Platform selection.
      * */
-    setStepData() {
+    onChangePlatform(event) {
-        let stepData = {};
+        console.log(event.target.value, this.state.platforms);
+        let id = event.target.value;
+        let selectedPlatform = this.state.platforms.filter((platform) => {
+            return platform.identifier === id;
+        });
+        console.log(selectedPlatform);
 
-        this.props.setData("step2", {step: stepData});
+        this.setState({platform: selectedPlatform});
     };
 
     /**
-     * Set text field values to state.
+     * Triggers when changing the Store selection.
      * */
-    onTextFieldChange(event, value) {
+    onChangeStore(event) {
-        let field = event.target.id;
+        console.log(event.target.value);
-        switch (field) {
+        this.setState({store: event.target.value});
-            case "name": {
-                this.setState({name: value});
-                break;
-            }
-            case "shortDescription": {
-                this.setState({shortDescription: value});
-                break;
-            }
-            case "description": {
-                this.setState({description: value});
-                break;
-            }
-            case "identifier": {
-                this.setState({identifier: value});
-                break;
-            }
-        }
     };
 
     render() {
-        console.log(this.state.visibilityComponent);
         return (
-            <div className="createStep2Content">
-                <div>
             <div>
+
                 <FormGroup>
-                            <Label for="app-title">Title*</Label>
+                    <Label for="store">Store Type</Label>
-                            <Input
-                                required
-                                type="text"
-                                name="appName"
-                                id="app-title"
-                            />
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-description">Description*</Label>
-                            <Input
-                                required
-                                type="textarea"
-                                name="appDescription"
-                                id="app-description"
-                            />
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-category">Category</Label>
                     <Input
                         type="select"
-                                name="category"
+                        name="store"
-                                id="app-category"
+                        id="store"
+                        className="input-custom"
+                        onChange={this.onChangeStore.bind(this)}
                     >
-                                <option>Business</option>
+                        <option>Enterprise</option>
+                        <option>Public</option>
                     </Input>
                 </FormGroup>
                 <FormGroup>
-                            <Label for="app-visibility">Visibility</Label>
+                    <Label for="store">Platform</Label>
                     <Input
                         type="select"
-                                name="visibility"
+                        name="store"
-                                id="app-visibility"
+                        id="store"
+                        onChange={this.onChangePlatform.bind(this)}
                     >
-                                <option>Devices</option>
+                        {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
-                                <option>Roles</option>
-                                <option>Groups</option>
-                            </Input>
-                        </FormGroup>
-                        <FormGroup>
-                            <Label for="app-tags">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 (
-                                            <Badge
+                                <option value={platform.identifier}>
-                                                style={{margin: '0 2px 0 2px'}}
+                                    {platform.name}
-                                                value={tag.value}
+                                </option>
-                                                onClick={this.handleRequestDelete.bind(this)}
-                                            >
-                                                {tag.value}
-                                            </Badge>
                             )
-                                    }
+                        }) : <option>No Platforms</option>}
-                                )}
+                    </Input>
-                            </div>
                 </FormGroup>
             </div>
-                </div>
-            </div>
         );
     }
 }
 
-Step2.prototypes = {
+Step2.propTypes = {
     handleNext: PropTypes.func,
-    handlePrev: PropTypes.func,
     setData: PropTypes.func,
     removeData: PropTypes.func
 };

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

@@ -25,7 +25,6 @@ import SelectField from 'material-ui/SelectField';
 import {FormGroup, Label} from 'reactstrap';
 import AppImage from "../../../UIComponents/AppImage/AppImage";
 
-
 /**
  * The Third step of application create wizard.
  * This contains following components.

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

@@ -19,7 +19,7 @@
 import './baseLayout.css';
 import {Col, Row} from "reactstrap";
 import React, {Component} from 'react';
-import GeneralInfo from "../GeneralInfo";
+import GeneralInfo from "../GenenralInfo/GeneralInfo";
 import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
 
 class ApplicationEdit extends Component {

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

@@ -22,6 +22,7 @@
     width: 100%;
     margin: 0;
     font-size: 20px;
+    border-bottom: solid 1px #d8d8d8;
 }
 
 .application-header-text {

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

@@ -21,7 +21,7 @@
     width: 0; /* 0 width - change this with JavaScript */
     position: fixed; /* Stay in place */
     z-index: 1; /* Stay on top */
-    top: 5%;
+    top: 8%;
     right: 0%;
     background-color: #ffffff;
     overflow-x: hidden; /* Disable horizontal scroll */

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

@@ -42,6 +42,7 @@
 
 .btn-circle:hover {
     cursor: pointer;
+    background-color: rgb(255, 93, 2);
 }
 
 .primary {

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

@@ -18,7 +18,7 @@
 
 body {
     width: 100%;
-    font-family: sans-serif;
+    font-family: Roboto sans-serif;
 }
 
 #userName {
@@ -48,10 +48,11 @@ body {
 
 #container {
     background-color: #ffffff;
+    padding: 0;
 }
 
 #header-content {
-    height: 100px;
+    height: 125px;
     width: 100%;
     margin: 0 10px 0 0;
     background-color: #3b33bd;
@@ -61,6 +62,12 @@ body {
     box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+#header {
+    margin: 16px 16px 20px 16px;
+    height: 100%;
+    position: relative;
+}
+
 #application-content {
     height: auto;
     width: 80%;
@@ -69,24 +76,14 @@ body {
     padding: 10px 10px 10px 10px;
 }
 
-.add-btn {
+#add-btn-container {
     position: absolute;
-    left:12%;
+    left: 12%;
-    top: 35px;
+    top: 100px;
-}
-
-.add-btn.div {
-    position: relative;
-    margin-top: 20px;
-    margin-left: 20px;
-}
-
-#fw-api:before {
-    content: '\e601';
 }
 
 .btn-header {
-    margin-top: 10px;
+    margin-top: 15px;
     margin-right: 20px;
     color: white;
 }
@@ -113,8 +110,9 @@ body {
     color: #a8a8a8;
     position: relative;
     float: right;
-    top: 35px;
+    top: 75px;
-    margin-right: 10px;
+    left: 80px;
+    margin-right: 16px;
 }
 
 #search {
@@ -175,7 +173,6 @@ body {
     margin: 70px 40px 40px 150px;
 }
 
-
 .applicationCreateScreenshotDropZone {
     width: 150px;
     height: 150px;

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

@@ -48,6 +48,10 @@ const config = {
                 test: /\.css$/,
                 use: [ 'style-loader', 'css-loader' ]
             },
+            {
+                test: /\.scss$/,
+                use: [ 'style-loader', 'scss-loader' ]
+            },
             {
                 test: /\.less$/,
                 use: [{