Created custom components for image button, notification view and notification item.

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

@@ -24,7 +24,8 @@ 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/Create/ApplicationCreate';
-import {Button, Input, InputGroup,} from 'reactstrap';
+import {Button, Input, InputGroup, Popover, PopoverContent, PopoverTitle,} from 'reactstrap';
+import NotificationItem from '../UIComponents/Notifications/NotificationItem';
 
 
 /**
@@ -76,8 +77,8 @@ class BaseLayout extends Component {
                             WSO2 IoT App Publisher
                         </span>
                         <div id="header-btn">
-                            <Button id="btn"><NotificationsIcon/></Button>
+                            <Button className="btn-notification" id="btn"><NotificationsIcon/></Button>
-                            <Button id="btn"><ActionAccountCircle/></Button>
+                            <Button className="btn-account" id="btn"><ActionAccountCircle/></Button>
                         </div>
                     </div>
                     <div id="search-box">
@@ -106,6 +107,12 @@ class BaseLayout extends Component {
                     {this.props.children}
                 </div>
                 <ApplicationCreate open={this.state.openModal}/>
+                {/*<Popover style={{right: '20px'}} target="btn" isOpen={true} placement="bottom">*/}
+                    {/*<PopoverTitle>Dismiss All</PopoverTitle>*/}
+                    {/*<PopoverContent>*/}
+                        {/*<NotificationItem/>*/}
+                    {/*</PopoverContent>*/}
+                {/*</Popover>*/}
             </div>
         );
     }

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

@@ -21,9 +21,11 @@ import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import AuthHandler from "../../api/authHandler";
 import ApplicationMgtApi from '../../api/applicationMgtApi';
-import {Button, Table} from 'reactstrap';
+import {Button, Row, Table} from 'reactstrap';
 import Drawer from '../UIComponents/Drawer/Drawer';
 import ApplicationView from './View/ApplicationView';
+import NotificationView from "../UIComponents/Notifications/NotificationView";
+import AppImage from "../UIComponents/AppImage/AppImage";
 
 /**
  * The App Create Component.
@@ -49,7 +51,9 @@ class ApplicationListing extends Component {
             open: false,
             application: {},
             drawer: {},
-            appListStyle: {}
+            appListStyle: {},
+            image: [{id: "1", src: "https://www.greenfoot.org/images/logos/macos.png"},
+                {id: "2", src:"http://dl1.cbsistatic.com/i/r/2016/08/08/0e67e43a-5a45-41ab-b81d-acfba8708044/resize/736x552/0c0ee669677b5060a0fa1bfb0c7873b4/android-logo-promo-470.png"}]
         };
         this.scriptId = "application-listing";
     }
@@ -212,7 +216,7 @@ class ApplicationListing extends Component {
 
         let appListStyle = {
             marginRight: '500px',
-        }
+        };
 
         this.setState({drawer: style, appListStyle: appListStyle});
 
@@ -232,6 +236,32 @@ class ApplicationListing extends Component {
         this.props.history.push("apps/edit/fdsfdsf343");
     }
 
+        remove(imageId) {
+        let tmp = this.state.image;
+
+        console.log(imageId);
+
+        let rem = tmp.filter((image) => {
+            return image.id !== imageId
+
+        });
+        console.log(rem);
+
+        this.setState({image: rem});
+    }
+
+    closeDrawer() {
+        let style = {
+            width: '0',
+            marginLeft: '0'
+        };
+
+        let appListStyle = {
+            marginRight: '0',
+        };
+        this.setState({drawer: style, appListStyle: appListStyle});
+    }
+
     render() {
         return (
 
@@ -260,7 +290,8 @@ class ApplicationListing extends Component {
                                             height='50px'
                                             width='50px'
                                             style={{border: 'solid 1px black', borderRadius: "100%"}}
-                                        /></td>
+                                        />
+                                    </td>
                                     <td>{application.applicationName}</td>
                                     <td>{application.category}</td>
                                     <td>{application.platform}</td>
@@ -273,10 +304,7 @@ class ApplicationListing extends Component {
                     </tbody>
                 </Table>
 
-                {/*<ApplicationEdit/>*/}
+                <Drawer onClose={this.closeDrawer.bind(this)} style={this.state.drawer}>
-
-
-                <Drawer style={this.state.drawer}>
                     <ApplicationView/>
                 </Drawer>
             </div>

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

@@ -23,6 +23,7 @@ import React, {Component} from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import SelectField from 'material-ui/SelectField';
 import {FormGroup, Label} from 'reactstrap';
+import AppImage from "../../../UIComponents/AppImage/AppImage";
 
 
 /**
@@ -303,13 +304,9 @@ class Step3 extends Component {
                                 <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
                                 <div id="screenshot-container">
                                     {this.state.screenshots.map((tile) => (
-                                        <button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
+                                        <div id="app-image-screenshot">
-                                                onMouseEnter={() => {
+                                            <AppImage image={tile[0].preview}/>
-                                                    console.log("Mouse Entered")
+                                        </div>
-                                                }}>
-                                            {console.log(tile[0].preview)}
-                                            <img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
-                                        </button>
                                     ))}
                                     {this.state.screenshots.length < 3 ?
                                         <Dropzone
@@ -336,13 +333,10 @@ class Step3 extends Component {
                                     <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
                                     <div id="app-icon-container">
                                         {this.state.icon.map((tile) => (
-                                            <button onMouseEnter={() => {
+                                            <div id="app-image-icon">
-                                                console.log("Mouse Entered")
+                                                <AppImage image={tile.preview}/>
-                                            }}>
-                                                <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
-                                            </button>
-                                        ))}
                                             </div>
+                                        ))}
 
                                     {this.state.icon.length === 0 ?
                                         <Dropzone
@@ -354,6 +348,7 @@ class Step3 extends Component {
                                         >
                                             <p className="applicationCreateIconp">+</p>
                                         </Dropzone> : <div/>}
+                                    </div>
                                 </FormGroup>
                             </div>
                             <div style={{marginLeft: '15px'}}>
@@ -362,11 +357,9 @@ class Step3 extends Component {
                                     <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
                                     <div id="app-banner-container">
                                         {this.state.banner.map((tile) => (
-                                            <button onMouseEnter={() => {
+                                            <div id="app-image-banner">
-                                                console.log("Mouse Entered")
+                                                <AppImage image={tile.preview}/>
-                                            }}>
+                                            </div>
-                                                <img style={{height: '200px', width: '400px'}} src={tile.preview}/>
-                                            </button>
                                         ))}
                                         {this.state.banner.length === 0 ?
                                             <Dropzone

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

@@ -16,9 +16,8 @@
  * under the License.
  */
 
-import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {FormGroup, Input, Label, Badge, Button} from 'reactstrap';
+import {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
 import Dropzone from 'react-dropzone';
 import './generalInfo.css';
 
@@ -36,7 +35,7 @@ class GeneralInfo extends Component {
     }
 
     render() {
-        return(
+        return (
             <div className="app-edit-general-info">
                 <form>
                     <FormGroup>
@@ -151,8 +150,6 @@ class GeneralInfo extends Component {
                                             <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
                                         </button>
                                     ))}
-                                </div>
-
                                     {this.state.icon.length === 0 ?
                                         <Dropzone
                                             className="applicationCreateIconDropZone"
@@ -163,6 +160,7 @@ class GeneralInfo extends Component {
                                         >
                                             <p className="applicationCreateIconp">+</p>
                                         </Dropzone> : <div/>}
+                                </div>
                             </FormGroup>
                         </div>
                         <div style={{marginLeft: '15px'}}>

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

@@ -0,0 +1,63 @@
+/*
+ * 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 './appImage.css';
+
+/**
+ * Component for holding uploaded image.
+ * This component has the feature to remove selected image from the array.
+ * */
+class AppImage extends Component {
+
+    constructor() {
+        super();
+        this.removeImage = this.removeImage.bind(this);
+    }
+
+    /**
+     * Triggers the parent method to remove the selected image.
+     * @param event: The click event of the component.
+     * */
+    removeImage(event) {
+        event.preventDefault();
+        this.props.onRemove(event.target.id);
+    }
+
+    render() {
+        const {image, imageId} = this.props;
+        return (
+            <div className="image-container" style={this.props.imageStyles}>
+                <img src={image} style={{width: '100%'}} className="image" id={imageId}/>
+                <div className="btn-content">
+                    <i className="close-btn" id={imageId} onClick={this.removeImage}>X</i>
+                </div>
+            </div>
+        )
+    }
+}
+
+AppImage.propTypes = {
+    image: PropTypes.string,
+    imageId: PropTypes.string,
+    onRemove: PropTypes.func,
+    imageStyles: PropTypes.object
+};
+
+export default AppImage;

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

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+.image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 5px;
+}
+
+.image {
+    opacity: 1;
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    transition: .5s ease;
+    backface-visibility: hidden;
+}
+
+.btn-content {
+    transition: .5s ease;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background-color: rgba(243, 243, 243, 0.43);
+    border-radius: 50%;
+    border: solid 1px #ffffff;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%)
+}
+
+.image-container:hover .image {
+    opacity: 0.3;
+}
+
+.image-container:hover .btn-content {
+    opacity: 1;
+}
+
+.close-btn {
+    color: #000000;
+    font-size: 16px;
+    padding: 20px 30px;
+}
+
+.close-btn:hover {
+    cursor: pointer;
+}

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

@@ -19,16 +19,30 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './drawer.css';
+import {Row} from "reactstrap";
 
 /**
  * Custom React component for Application View.
  * */
 class Drawer extends Component {
 
+    constructor() {
+        super();
+        this.closeDrawer = this.closeDrawer.bind(this);
+    }
+
+    /**
+     * Closes the drawer.
+     * */
+    closeDrawer() {
+        this.props.onClose();
+    }
+
     render() {
         return (
             <div>
                 <div id="app-view" className="app-view-drawer" style={this.props.style}>
+                    <a onClick={this.closeDrawer} className="drawer-close-btn">&times;</a>
                     {this.props.children}
                 </div>
             </div>
@@ -38,7 +52,8 @@ class Drawer extends Component {
 
 Drawer.propTypes = {
     style: PropTypes.object,
-    children: PropTypes.node
+    children: PropTypes.node,
+    onClose: PropTypes.func
 };
 
 export default Drawer;

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: 10%;
+    top: 5%;
     right: 0%;
     background-color: #b5b5b5;
     overflow-x: hidden; /* Disable horizontal scroll */
@@ -50,6 +50,16 @@
     margin-left: 50px;
 }
 
+.drawer-close-btn {
+    height: 40px;
+    width: 30px;
+}
+
+.drawer-close-btn:hover {
+    cursor: pointer;
+    color: #818181;
+}
+
 /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
 #main {
     transition: margin-left .5s;

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

@@ -0,0 +1,76 @@
+/*
+ * 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 './imageUploader.css';
+import Dropzone from "react-dropzone";
+import {Row} from "reactstrap";
+
+
+class ImageUploader extends Component {
+    constructor() {
+        super();
+        this.setImages = this.setImages.bind(this);
+        this.state = {
+            images: []
+        }
+    }
+
+    setImages(images) {
+        this.props.setImages(images);
+    }
+
+    render() {
+        let {images, height, width, accepted, multiple, maxAmount} = this.props;
+        return (
+            <div id="screenshot-container">
+                <Row>
+                    {images.map((tile) => (
+                            <input type="image" src={tile[0].preview} onClick=""/>
+                        )
+                    )}
+                </Row>
+
+                {this.state.screenshots.length < maxAmount ?
+                    <Dropzone
+                        className="add-image"
+                        accept="image/jpeg, image/png"
+                        onDrop={(accepted, rejected) => {
+                            this.setImages(accepted);
+                        }}
+                    >
+                        <p className="add-image-symbol">+</p>
+                    </Dropzone> : <div/>}
+            </div>
+        );
+    }
+
+}
+
+ImageUploader.prototypes = {
+    height: PropTypes.string,
+    width: PropTypes.string,
+    accepted: PropTypes.array,
+    multiple: PropTypes.bool,
+    maxAmount: PropTypes.number,
+    setImages: PropTypes.func
+};
+
+
+export default ImageUploader;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+

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

@@ -1,3 +1,21 @@
+/*
+ * 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 './input.css';
 

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

@@ -0,0 +1,46 @@
+/*
+ * 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 {Col, Row} from "reactstrap";
+import './notification.css';
+
+class NotificationItem extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div>
+                <Row>
+                    <Col>
+                        <div className="notification-app-icon small">
+                            <img/>
+                        </div>
+                    </Col>
+                    <Col>
+                        <p>Your application, Facebook has been published.</p>
+                    </Col>
+                </Row>
+            </div>
+        );
+    }
+}
+
+export default NotificationItem;

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

@@ -0,0 +1,71 @@
+/*
+ * 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 {Col, Row} from "reactstrap";
+import './notification.css';
+
+class NotificationView extends Component {
+    constructor() {
+        super();
+    }
+
+    render() {
+        return (
+            <div id="notification-view-content">
+                <div>
+                    <Row id="notification-content">
+                        <Col xs="3">
+                            <div className="notification-app-icon medium">
+
+                            </div>
+                        </Col>
+                        <Col xs="9">
+                            <Row>
+                                <span><strong>Application Name</strong></span>
+                            </Row>
+                            <Row>
+                                <span>Version 1.0</span>
+                            </Row>
+                            <Row>
+                                <p id="app-reject-msg">Your Application was rejected</p>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <hr/>
+                    <Row id="notification-content">
+                        <Col xs="12">
+                            <p>Following validations were detected in your review submission.
+                               Please attend to them and re-submit</p>
+                            <ul>
+                                <li>sdjjfsdfsdfkjs shdfjhlkds hflkhfdslkd </li>
+                                <li>sdfkds jfdsljfklsdfjksdjlksdjdlkf</li>
+                                <li>sfksdf slkjskd jfjds lkfjdsfdsfdslkf sjf lkdsf</li>
+                                <li>skfjslkdjfsdjfjksldjf sdkl jflkds jfkslfjs</li>
+                                <li>ksdf jks;kshflk hlkjhds lkjhdsklhsd lkf</li>
+                                <li> jsdljflksd jfklsdfskljfkjshf;ks ldj</li>
+                            </ul>
+                        </Col>
+                    </Row>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default NotificationView;

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

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+.notification-app-icon {
+    border-radius: 50%;
+    border: solid 1px black;
+}
+
+.small {
+    height: 50px;
+    width: 50px;
+}
+
+.medium {
+    height: 100px;
+    width: 100px;
+}
+
+#notification-view-content {
+    width: 50%;
+    border: solid 1px black;
+    margin: 0 auto;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+#notification-content {
+    margin: 20px 10px 20px 10px;
+}
+
+#app-reject-msg {
+    width: 100%;
+    height: 30px;
+    background-color: #888888;
+}

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

@@ -48,11 +48,13 @@ body {
 #header-content {
     height: 100px;
     width: 100%;
+    margin: 0 10px 0 0;
     background-color: #BDBDBD;
     border-bottom: solid 2px;
     position: fixed; /* Set the navbar to fixed position */
     top: 0; /* Position the navbar at the top of the page */
     z-index: 2;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 #application-content {
@@ -70,6 +72,7 @@ body {
     cursor: pointer;
     height: 50px;
     width: 50px;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .add-btn.div {
@@ -117,6 +120,21 @@ body {
     transition: margin-right .5s;
 }
 
+#app-image-screenshot {
+    width: 300px;
+    height: 300px;
+}
+
+#app-image-icon {
+    width: 300px;
+    height: 300px;
+}
+
+#app-image-banner {
+    width: 400px;
+    height: 300px;
+}
+
 .applicationCreateBannerDropZone {
     width: 300px;
     height: 150px;
@@ -158,11 +176,11 @@ body {
 #screenshot-container {
     display: flex;
     overflow-x: auto;
-    height: 170px;
+    height: 200px;
 }
 
 #app-icon-container {
-    max-width: 200px;
+    height: 300px;
     overflow-x: auto;
 }