From 426dea0afcb7735e946af0f3275868dd4da30156 Mon Sep 17 00:00:00 2001
From: Menaka Jayawardena <menaka@wso2.com>
Date: Fri, 29 Sep 2017 01:12:19 +0530
Subject: [PATCH] Moved internal CSS files to a single common CSS and imported
 in index.html.

---
 .../resources/publisher/public/index.html     |   2 +-
 .../default/application-create-step1.css      |  25 --
 .../default/application-create-step2.css      | 120 --------
 .../default/application-create-step3.css      |  29 --
 .../themes/default/application-create.css     |  36 ---
 .../themes/default/application-listing.css    |  38 ---
 .../public/themes/default/basic-layout.css    |  25 --
 .../public/themes/default/data-table.css      |  43 ---
 .../themes/default/default-theme.css}         | 289 ++++++++++++++++--
 .../public/themes/default/platform-create.css |  73 -----
 .../themes/default/platform-listing.css       |  39 ---
 .../src/main/resources/publisher/src/App.css  |   5 -
 .../src/main/resources/publisher/src/App.jsx  |   1 -
 .../AppPublisherBase/BaseLayout.jsx           |   2 +-
 .../Application/Create/CreateSteps/Step1.jsx  |   1 -
 .../Application/Create/CreateSteps/Step3.jsx  | 142 +++++----
 .../Edit/Base/ApplicationEditBaseLayout.jsx   |  15 +-
 .../Application/Edit/Base/baseLayout.css      | 112 -------
 .../Edit/GenenralInfo/GeneralInfo.jsx         | 283 ++++++++---------
 .../Edit/GenenralInfo/generalInfo.css         |  26 --
 .../Release/Create/CreateRelease.jsx          |   1 -
 .../Release/Create/UploadPackage.jsx          |   1 -
 .../Release/Create/createRelease.css          |  38 ---
 .../Release/ReleaseMgtBase/ReleaseManager.jsx |   1 -
 .../Release/ReleaseMgtBase/release-mgt.css    |  50 ---
 .../Application/View/ApplicationView.jsx      |   1 -
 .../Application/View/applicationView.css      |  56 ----
 .../FloatingButton/FloatingButton.jsx         |   4 +-
 .../src/main/resources/publisher/src/index.js |   1 -
 29 files changed, 482 insertions(+), 977 deletions(-)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
 rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/{src/index.css => public/themes/default/default-theme.css} (52%)
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
 delete mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
index df784da8da..3d41cf4be5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/index.html
@@ -22,7 +22,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <link rel="stylesheet" type="text/css" href="/css/font-wso2.css">
-    <link rel="stylesheet" type="text/css" href="/themes/index.css">
+    <link rel="stylesheet" type="text/css" href="/themes/default/default-theme.css">
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
deleted file mode 100644
index 0fbc5e2be8..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step1.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-.creatediv {
-    margin: 0 16px;
-}
-
-.nextButton {
-    margin-top: 12px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
deleted file mode 100644
index 00da1e2e10..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step2.css
+++ /dev/null
@@ -1,120 +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.
- */
-
-.applicationCreateChip {
-    margin: 4px;
-}
-
-.createStep2Content {
-    margin: 0 16px;
-}
-
-
-.applicationCreateWrapper {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-
-.platformSpecificPropertyDiv {
-    border: solid #BDBDBD 1px;
-}
-
-.platformSpecificPropertyP {
-    color: #BDBDBD;
-}
-
-.applicationCreateBannerError {
-    color: #f44336;
-}
-
-.applicationCreateBannerTitle {
-    color: #BDBDBD;
-}
-
-.applicationCreateGrid {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-
-.applicationCreateBannerDropZone {
-    width: 300px;
-    height: 150px;
-    border: dashed #BDBDBD 1px
-}
-
-.applicationCreateBannerp {
-    margin: 70px 40px 40px 150px;
-}
-
-.applicationCreateScreenshotError {
-    color: #f44336;
-}
-
-.applicationCreateScreenshotTitle {
-    color: #BDBDBD;
-}
-
-.applicationCreateScreenshotGrid {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-
-.applicationCreateScreenshotDropZone {
-    width: 150px;
-    height: 150px;
-    border: dashed #BDBDBD 1px;
-}
-
-.applicationCreateScreenshotp {
-    margin: 70px 40px 70px 70px;
-}
-
-.applcationCreateIconError {
-    color: #f44336;
-}
-
-.applicationCreateIconTitle {
-    color: #BDBDBD;
-}
-
-.applicationCreateIconGrid {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-
-.applicationCreateIconDropZone {
-    width: 150px;
-    height: 150px;
-    border: dashed #BDBDBD 1px;
-}
-
-.applicationCreateIconp {
-    margin: 70px 40px 70px 70px;
-}
-
-.applicationCreateBackAndNext {
-    margin-top: 12px;
-}
-
-.applicationCreateBack {
-    margin-right: 12px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
deleted file mode 100644
index beca46d5dc..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create-step3.css
+++ /dev/null
@@ -1,29 +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.
- */
-
-.applicationCreateStepMiddle {
-    margin: 0 16px;
-}
-
-.applicationCreateBackAndFinish {
-    margin-top: 12px;
-}
-
-.applicationCreateFinish {
-    margin-right: 12px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
deleted file mode 100644
index 2fc0e368e9..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-create.css
+++ /dev/null
@@ -1,36 +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.
- */
-
-.createapplicationmiddle {
-    width: 95%;
-    height: 100%;
-    margin-top: 1%;
-}
-
-.creataapplicationcard {
-    max-height: 700px;
-    overflow: auto;
-}
-.createapplicationcardaction {
-    width: 100%;
-    margin: auto;
-}
-
-.createapplicationcontent {
-    margin: 0 16px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
deleted file mode 100644
index ff6b17bc79..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/application-listing.css
+++ /dev/null
@@ -1,38 +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.
- */
-
-.applicationListingMiddle {
-    width: 95%;
-    height: 100%;
-    margin-top: 1%;
-}
-
-.applicationListingCard {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.applicationListingSearch {
-    float:right;
-    padding-right: 2px;
-}
-
-.applicationListTitle {
-    display: flex;
-    flex-wrap: wrap;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
deleted file mode 100644
index ccc768c3ca..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/basic-layout.css
+++ /dev/null
@@ -1,25 +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.
- */
-
-.basicLayoutDiv {
-    height: calc(100% - 64px);
-    margin-left: 16%;
-    width: calc(100% - 15%);
-    top: 64px;
-    left: -100px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
deleted file mode 100644
index 849d232eb2..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/data-table.css
+++ /dev/null
@@ -1,43 +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.
- */
-
-.tableRow {
-    display: flex;
-}
-
-.datatableRowColumn {
-    align-items: center;
-}
-
-.sortableHeaderCell {
-    color: #bdbdbd;
-}
-
-.notsortableHeaderCell {
-    position: relative;
-    padding-left: 16px;
-    padding-right: 16px;
-    text-transform: uppercase;
-    font-weight: normal;
-    color: #bdbdbd;
-    font-size: 14px;
-}
-
-.datatableHeaderColumn {
-    padding-left: 0;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
similarity index 52%
rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
index f8673ceb90..0afbb7ba5f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css
@@ -16,11 +16,13 @@
  * under the License.
  */
 
+/* Body Styling */
 body {
     width: 100%;
     font-family: Roboto sans-serif;
 }
 
+/* Login page styles*/
 #userName {
     border-radius: 0;
 }
@@ -46,11 +48,13 @@ body {
     background-color: #BaBaBa;
 }
 
+/* Base layout container */
 #container {
     background-color: #ffffff;
     padding: 0;
 }
 
+/* Base layout header content*/
 #header-content {
     height: 125px;
     width: 100%;
@@ -62,32 +66,13 @@ body {
     box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+/* Contains the header styles.*/
 #header {
     margin: 16px 16px 20px 16px;
     height: 100%;
     position: relative;
 }
 
-#application-content {
-    height: auto;
-    width: 80%;
-    margin: 150px auto;
-    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    padding: 10px 10px 10px 10px;
-}
-
-#add-btn-container {
-    position: absolute;
-    left: 12%;
-    top: 100px;
-}
-
-.btn-header {
-    margin-top: 15px;
-    margin-right: 20px;
-    color: white;
-}
-
 #header-text {
     color: #ffffff;
     font-size: 25px;
@@ -95,10 +80,18 @@ body {
     margin-left: 10px;
 }
 
-#header-btn {
+/* The buttons in the header (User and Notification)*/
+#header-btn-container {
     float: right;
 }
 
+.btn-header {
+    margin-top: 15px;
+    margin-right: 20px;
+    color: white;
+}
+
+/* Search box styles */
 .search-icon {
     position: absolute;
     top: 5px;
@@ -127,6 +120,22 @@ body {
     border-radius: 0%;
 }
 
+/* Application Add button */
+#add-btn-container {
+    position: absolute;
+    left: 12%;
+    top: 100px;
+}
+
+/* Holds the app publisher pages. */
+#application-content {
+    height: auto;
+    width: 80%;
+    margin: 150px auto;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 10px 10px 10px 10px;
+}
+
 .stepper-header {
     width: 100%;
     border-bottom: solid 1px cornflowerblue;
@@ -161,41 +170,50 @@ body {
     height: 300px;
 }
 
-.applicationCreateBannerDropZone {
+.application-create-banner-dropzone {
     width: 300px;
     height: 150px;
     border-radius: 5%;
+    position: relative;
     background-color: rgba(157, 159, 157, 0.53);
     border: dashed #888888 2px;
 }
 
-.applicationCreateBannerp {
-    margin: 70px 40px 40px 150px;
+.application-create-banner-dropzone i {
+    position: absolute;
+    top: 65px;
+    left: 145px;
 }
 
-.applicationCreateScreenshotDropZone {
+.application-create-screenshot-dropzone {
     width: 150px;
     height: 150px;
     margin: 0 5px 0 5px;
     border-radius: 10%;
+    position: relative;
     background-color: rgba(157, 159, 157, 0.53);
     border: dashed #888888 2px;
 }
 
-.applicationCreateIconDropZone {
+.application-create-screenshot-dropzone i {
+    position: absolute;
+    top: 65px;
+    left: 65px;
+}
+
+.application-create-icon-dropzone {
     width: 150px;
     height: 150px;
     border-radius: 10%;
+    position: relative;
     background-color: rgba(157, 159, 157, 0.53);
     border: dashed #888888 2px;
 }
 
-.applicationCreateIconp {
-    margin: 70px 40px 70px 70px;
-}
-
-.applicationCreateScreenshotp {
-    margin: 70px 40px 70px 70px;
+.application-create-icon-dropzone i {
+    position: absolute;
+    top: 65px;
+    left: 65px;
 }
 
 #screenshot-container {
@@ -256,3 +274,210 @@ body {
     font-size: 12px;
     color: #818181;
 }
+
+/* Application View */
+#application-view-content {
+    width: 100%;
+}
+
+#application-view-row {
+    margin: 10px 10px 20px 20px;
+}
+
+#app-icon {
+    height: 100px;
+    width: 100px;
+    border: solid 1px black;
+    border-radius: 50%;
+}
+
+.app-updated-date {
+    color: #888888;
+    font-style: italic;
+}
+
+.app-install-count {
+    font-style: italic;
+}
+
+.app-details-tbl {
+    outline: none;
+    border-color: #2196F3;
+}
+
+.app-details-tbl tr {
+    margin: 20px 0 0 0;
+}
+
+.app-details-tbl td {
+    margin-left: 10px;
+    max-width: 400px;
+}
+
+/* Application Edit Base Layout */
+#application-edit-header {
+    height: 50px;
+    width: 100%;
+    margin: 0;
+    font-size: 20px;
+    border-bottom: solid 1px #d8d8d8;
+}
+
+.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-right: 1px solid #d8d8d8;
+    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: #ddd6d7;
+    cursor: pointer;
+}
+
+/* Create an active/current "tab button" class */
+div.tab button.active {
+    background-color: #1b3bcc;
+    color: white;
+}
+
+
+#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;
+}
+
+.back-to-app {
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+}
+
+.back-to-app i {
+    padding: 10px 10px 10px 10px;
+}
+
+.back-to-app:hover {
+    cursor: pointer;
+    background-color: #dedede;
+    transition: .5s;
+}
+
+/* Create Release and Release management */
+.release-header {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.release-create {
+    height: 150px;
+    margin-bottom: 20px;
+}
+
+.release-detail-content {
+    width: 100%;
+    margin-top: 20%;
+    height: 300px;
+}
+
+.form-btn {
+    float: right;
+    margin-bottom: 10px;
+}
+
+.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%;
+}
+
+/* Application Edit General Info */
+.app-edit-general-info {
+    margin-top: 20px;
+    max-width: 100%;
+}
+
+.save-info {
+    float: right;
+    margin-bottom: 10px;
+}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
deleted file mode 100644
index 36993707e2..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-create.css
+++ /dev/null
@@ -1,73 +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.
- */
-
-.createplatformmiddle {
-    width: 95%;
-    height: 100%;
-    margin-top: 1%
-}
-
-.createplatformcardaction {
-    width: 100%;
-    margin: auto;
-    padding-left: 10px;
-}
-
-.createplatformproperties {
-    color: #BaBaBa;
-}
-
-.createplatformpropertyclose {
-    height: 10px;
-    width: 10px;
-}
-
-
-.createplatformproperty {
-    display: flex;
-}
-
-.createplatformpropertyselect {
-    flex: 1 1 23% 1;
-    margin: 0 1%
-}
-
-.createplatformicon {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-
-.createplatformiconp {
-    color: #BDBDBD;
-}
-
-.createplatformdropzone {
-    width: 150px;
-    height: 150px;
-    border: dashed #BDBDBD 1px;
-}
-
-.createplatformdropzonep {
-    margin: 70px 40px 70px 70px
-}
-
-.createPlatformTagWrapper {
-    display: flex;
-    flex-wrap: wrap;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
deleted file mode 100644
index d9d9d594c3..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/platform-listing.css
+++ /dev/null
@@ -1,39 +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.
- */
-
-
-.listingplatformmiddle {
-    width: 95%;
-    height: 100%;
-    margin-top: 1%;
-}
-
-.listingplatformcard {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.listingplatformsearch {
-    float:right;
-    padding-right: 2px;
-}
-
-.listingplatformTitle {
-    display: flex;
-    flex-wrap: wrap;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css
deleted file mode 100644
index 3f4bc89fef..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.middle-content {
-    width: 95%;
-    height: 100%;
-    margin: 1% 0 0 0;
-}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
index 044ca4d8cd..e7b314daee 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/App.jsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import './App.css';
 import Theme from './theme';
 import React, {Component} from 'react';
 import AuthHandler from './api/authHandler';
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
index 998b409da1..665208d16e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
@@ -77,7 +77,7 @@ class BaseLayout extends Component {
                         <span id="header-text">
                             WSO2 IoT App Publisher
                         </span>
-                        <div id="header-btn">
+                        <div id="header-btn-container">
                             <i className="fw fw-notification btn-header"></i>
                             <i className="fw fw-user btn-header"></i>
                         </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
index f46c280a13..7f8ef66e10 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
@@ -230,7 +230,6 @@ class Step1 extends Component {
     };
 
     render() {
-        console.log(this.state.visibilityComponent);
         return (
             <div className="createStep2Content">
                 <div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
index 124844c739..4fab3bbd78 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
@@ -296,85 +296,81 @@ class Step3 extends Component {
         return (
             <div className="createStep2Content">
                 <div>
-                    <div>
-                        <div>
-                            <FormGroup>
-                                <Label for="app-screenshots">Screenshots*</Label>
-                                <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
-                                <div id="screenshot-container">
-                                    {this.state.screenshots.map((tile) => (
-                                        <div id="app-image-screenshot">
-                                            <AppImage image={tile[0].preview}/>
-                                        </div>
-                                    ))}
-                                    {this.state.screenshots.length < 3 ?
-                                        <Dropzone
-                                            className="applicationCreateScreenshotDropZone"
-                                            accept="image/jpeg, image/png"
-                                            onDrop={(screenshots, rejected) => {
-                                                let tmpScreenshots = this.state.screenshots;
-                                                tmpScreenshots.push(screenshots);
-                                                console.log(screenshots);
-                                                this.setState({
-                                                    screenshots: tmpScreenshots
-                                                });
-                                            }}
-                                        >
-                                            <p className="applicationCreateScreenshotp">+</p>
-                                        </Dropzone> : <div/>}
+                    <FormGroup>
+                        <Label for="app-screenshots">Screenshots*</Label>
+                        <span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
+                        <div id="screenshot-container">
+                            {this.state.screenshots.map((tile) => (
+                                <div id="app-image-screenshot">
+                                    <AppImage image={tile[0].preview}/>
                                 </div>
-                            </FormGroup>
+                            ))}
+                            {this.state.screenshots.length < 3 ?
+                                <Dropzone
+                                    className="application-create-screenshot-dropzone"
+                                    accept="image/jpeg, image/png"
+                                    onDrop={(screenshots, rejected) => {
+                                        let tmpScreenshots = this.state.screenshots;
+                                        tmpScreenshots.push(screenshots);
+                                        console.log(screenshots);
+                                        this.setState({
+                                            screenshots: tmpScreenshots
+                                        });
+                                    }}
+                                >
+                                    <i className="fw fw-add"></i>
+                                </Dropzone> : <div/>}
                         </div>
-                        <div style={{display: 'flex'}}>
-                            <div style={{float: 'left', marginRight: '15px'}}>
-                                <FormGroup>
-                                    <Label for="app-icon">Icon*</Label>
-                                    <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
-                                    <div id="app-icon-container">
-                                        {this.state.icon.map((tile) => (
-                                            <div id="app-image-icon">
-                                                <AppImage image={tile.preview}/>
-                                            </div>
-                                        ))}
-
-                                    {this.state.icon.length === 0 ?
-                                        <Dropzone
-                                            className="applicationCreateIconDropZone"
-                                            accept="image/jpeg, image/png"
-                                            onDrop={(icon, rejected) => {
-                                                this.setState({icon, rejected});
-                                            }}
-                                        >
-                                            <p className="applicationCreateIconp">+</p>
-                                        </Dropzone> : <div/>}
+                    </FormGroup>
+                </div>
+                <div style={{display: 'flex'}}>
+                    <div style={{float: 'left', marginRight: '15px'}}>
+                        <FormGroup>
+                            <Label for="app-icon">Icon*</Label>
+                            <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                            <div id="app-icon-container">
+                                {this.state.icon.map((tile) => (
+                                    <div id="app-image-icon">
+                                        <AppImage image={tile.preview}/>
                                     </div>
-                                </FormGroup>
+                                ))}
+
+                                {this.state.icon.length === 0 ?
+                                    <Dropzone
+                                        className="application-create-icon-dropzone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(icon, rejected) => {
+                                            this.setState({icon, rejected});
+                                        }}
+                                    >
+                                        <i className="fw fw-add"></i>
+                                    </Dropzone> : <div/>}
                             </div>
-                            <div style={{marginLeft: '15px'}}>
-                                <FormGroup>
-                                    <Label for="app-banner">Banner*</Label>
-                                    <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
-                                    <div id="app-banner-container">
-                                        {this.state.banner.map((tile) => (
-                                            <div id="app-image-banner">
-                                                <AppImage image={tile.preview}/>
-                                            </div>
-                                        ))}
-                                        {this.state.banner.length === 0 ?
-                                            <Dropzone
-                                                className="applicationCreateBannerDropZone"
-                                                accept="image/jpeg, image/png"
-                                                onDrop={(banner, rejected) => {
-                                                    this.setState({banner, rejected});
-                                                }}
-                                            >
-                                                <p className="applicationCreateBannerp">+</p>
-                                            </Dropzone> : <div/>
-                                        }
+                        </FormGroup>
+                    </div>
+                    <div style={{marginLeft: '15px'}}>
+                        <FormGroup>
+                            <Label for="app-banner">Banner*</Label>
+                            <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                            <div id="app-banner-container">
+                                {this.state.banner.map((tile) => (
+                                    <div id="app-image-banner">
+                                        <AppImage image={tile.preview}/>
                                     </div>
-                                </FormGroup>
+                                ))}
+                                {this.state.banner.length === 0 ?
+                                    <Dropzone
+                                        className="application-create-banner-dropzone"
+                                        accept="image/jpeg, image/png"
+                                        onDrop={(banner, rejected) => {
+                                            this.setState({banner, rejected});
+                                        }}
+                                    >
+                                        <i className="fw fw-add"></i>
+                                    </Dropzone> : <div/>
+                                }
                             </div>
-                        </div>
+                        </FormGroup>
                     </div>
                 </div>
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
index aba70453be..0e099e6126 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import './baseLayout.css';
 import {Col, Row} from "reactstrap";
 import React, {Component} from 'react';
 import GeneralInfo from "../GenenralInfo/GeneralInfo";
@@ -35,7 +34,7 @@ class ApplicationEdit extends Component {
         }
     }
 
-    handleClick(event) {
+    handleTabClick(event) {
         event.stopPropagation();
         console.log(typeof event.target.value);
         const key = event.target.value;
@@ -74,13 +73,17 @@ class ApplicationEdit extends Component {
         }
     }
 
+    handleOnBackClick() {
+        window.location.href = "/publisher/assets/apps"
+    }
+
     render() {
         console.log(this.state);
         return (
             <div id="application-edit-base">
                 <Row id="application-edit-header">
                     <Col xs="3">
-                        <a className="back-to-app"><i className="fw fw-left"></i></a>
+                        <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}><i className="fw fw-left-arrow"></i></a>
                     </Col>
                     <Col>
                         Application Name
@@ -89,14 +92,14 @@ class ApplicationEdit extends Component {
                 <Row id="application-edit-main-container">
                     <Col xs="3">
                         <div className="tab">
-                            <button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
+                            <button className={this.state.general} value={1} onClick={this.handleTabClick.bind(this)}>
                                 General
                             </button>
-                            <button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
+                            <button className={this.state.release} value={2} onClick={this.handleTabClick.bind(this)}>
                                 App
                                 Releases
                             </button>
-                            <button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
+                            <button className={this.state.pkgmgt} value={3} onClick={this.handleTabClick.bind(this)}>
                                 Package Manager
                             </button>
                         </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
deleted file mode 100644
index a93f84a9b2..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/baseLayout.css
+++ /dev/null
@@ -1,112 +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.
- */
-
-
-#application-edit-header {
-    height: 50px;
-    width: 100%;
-    margin: 0;
-    font-size: 20px;
-    border-bottom: solid 1px #d8d8d8;
-}
-
-.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-right: 1px solid #d8d8d8;
-    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: #ddd6d7;
-    cursor: pointer;
-}
-
-/* Create an active/current "tab button" class */
-div.tab button.active {
-    background-color: #1b3bcc;
-    color: white;
-}
-
-
-#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;
-}
-
-.back-to-app {
-    position: absolute;
-}
-
-.back-to-app:hover {
-    cursor: pointer;
-    background-color: #888888;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
index da9af33bee..bef2e708b5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/GeneralInfo.jsx
@@ -17,9 +17,8 @@
  */
 
 import React, {Component} from 'react';
-import {Badge, Button, FormGroup, Input, Label} from 'reactstrap';
+import {Badge, Button, FormGroup, Input, Label, Row} from 'reactstrap';
 import Dropzone from 'react-dropzone';
-import './generalInfo.css';
 
 class GeneralInfo extends Component {
 
@@ -37,160 +36,162 @@ class GeneralInfo extends Component {
     render() {
         return (
             <div className="app-edit-general-info">
-                <form>
-                    <FormGroup>
-                        <Label for="app-title">Title*</Label>
-                        <Input
-                            required
-                            type="text"
-                            name="appName"
-                            id="app-title"
-                        />
-                    </FormGroup>
-                    <FormGroup>
-                        <Label for="app-title">Description*</Label>
-                        <Input
-                            required
-                            type="textarea"
-                            multiline
-                            name="appName"
-                            id="app-title"
-                        />
-                    </FormGroup>
-                    <FormGroup>
-                        <Label for="app-category">Category</Label>
-                        <Input
-                            type="select"
-                            name="category"
-                            id="app-category"
-                        >
-                            <option>Business</option>
-                        </Input>
-                    </FormGroup>
-                    <FormGroup>
-                        <Label for="app-visibility">Visibility</Label>
-                        <Input
-                            type="select"
-                            name="visibility"
-                            id="app-visibility"
-                        >
-                            <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"
-                        />
-                        <div id="batch-content">
-                            {this.state.tags.map(tag => {
-                                    return (
-                                        <Badge
-                                            style={{margin: '0 2px 0 2px'}}
-                                            value={tag.value}
-                                        >
-                                            {tag.value}
-                                        </Badge>
-                                    )
-                                }
-                            )}
-                        </div>
-                    </FormGroup>
-                    <div>
+                <Row>
+                    <form>
                         <FormGroup>
-                            <Label for="app-screenshots">Screenshots*</Label>
-                            <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'}}
-                                            onMouseEnter={() => {
-                                                console.log("Mouse Entered")
-                                            }}>
-                                        {console.log(tile[0].preview)}
-                                        <img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
-                                    </button>
-                                ))}
-                                {this.state.screenshots.length < 3 ?
-                                    <Dropzone
-                                        className="applicationCreateScreenshotDropZone"
-                                        accept="image/jpeg, image/png"
-                                        onDrop={(screenshots, rejected) => {
-                                            let tmpScreenshots = this.state.screenshots;
-                                            tmpScreenshots.push(screenshots);
-                                            console.log(screenshots);
-                                            this.setState({
-                                                screenshots: tmpScreenshots
-                                            });
-                                        }}
-                                    >
-                                        <p className="applicationCreateScreenshotp">+</p>
-                                    </Dropzone> : <div/>}
+                            <Label for="app-title">Title*</Label>
+                            <Input
+                                required
+                                type="text"
+                                name="appName"
+                                id="app-title"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-title">Description*</Label>
+                            <Input
+                                required
+                                type="textarea"
+                                multiline
+                                name="appName"
+                                id="app-title"
+                            />
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-category">Category</Label>
+                            <Input
+                                type="select"
+                                name="category"
+                                id="app-category"
+                            >
+                                <option>Business</option>
+                            </Input>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="app-visibility">Visibility</Label>
+                            <Input
+                                type="select"
+                                name="visibility"
+                                id="app-visibility"
+                            >
+                                <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"
+                            />
+                            <div id="batch-content">
+                                {this.state.tags.map(tag => {
+                                        return (
+                                            <Badge
+                                                style={{margin: '0 2px 0 2px'}}
+                                                value={tag.value}
+                                            >
+                                                {tag.value}
+                                            </Badge>
+                                        )
+                                    }
+                                )}
                             </div>
                         </FormGroup>
-                    </div>
-                    <div style={{display: 'flex'}}>
-                        <div style={{float: 'left', marginRight: '15px'}}>
+                        <div>
                             <FormGroup>
-                                <Label for="app-icon">Icon*</Label>
-                                <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
-                                <div id="app-icon-container">
-                                    {this.state.icon.map((tile) => (
-                                        <button onMouseEnter={() => {
-                                            console.log("Mouse Entered")
-                                        }}>
-                                            <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
+                                <Label for="app-screenshots">Screenshots*</Label>
+                                <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'}}
+                                                onMouseEnter={() => {
+                                                    console.log("Mouse Entered")
+                                                }}>
+                                            {console.log(tile[0].preview)}
+                                            <img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
                                         </button>
                                     ))}
-                                    {this.state.icon.length === 0 ?
+                                    {this.state.screenshots.length < 3 ?
                                         <Dropzone
-                                            className="applicationCreateIconDropZone"
+                                            className="application-create-screenshot-dropzone"
                                             accept="image/jpeg, image/png"
-                                            onDrop={(icon, rejected) => {
-                                                this.setState({icon, rejected});
+                                            onDrop={(screenshots, rejected) => {
+                                                let tmpScreenshots = this.state.screenshots;
+                                                tmpScreenshots.push(screenshots);
+                                                console.log(screenshots);
+                                                this.setState({
+                                                    screenshots: tmpScreenshots
+                                                });
                                             }}
                                         >
-                                            <p className="applicationCreateIconp">+</p>
+                                            <i className="fw fw-add"></i>
                                         </Dropzone> : <div/>}
                                 </div>
                             </FormGroup>
                         </div>
-                        <div style={{marginLeft: '15px'}}>
-                            <FormGroup>
-                                <Label for="app-banner">Banner*</Label>
-                                <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
-                                <div id="app-banner-container">
-                                    {this.state.banner.map((tile) => (
-                                        <button onMouseEnter={() => {
-                                            console.log("Mouse Entered")
-                                        }}>
-                                            <img style={{height: '200px', width: '400px'}} src={tile.preview}/>
-                                        </button>
-                                    ))}
-                                    {this.state.banner.length === 0 ?
-                                        <Dropzone
-                                            className="applicationCreateBannerDropZone"
-                                            accept="image/jpeg, image/png"
-                                            onDrop={(banner, rejected) => {
-                                                this.setState({banner, rejected});
-                                            }}
-                                        >
-                                            <p className="applicationCreateBannerp">+</p>
-                                        </Dropzone> : <div/>
-                                    }
-                                </div>
-                            </FormGroup>
+                        <div style={{display: 'flex'}}>
+                            <div style={{float: 'left', marginRight: '15px'}}>
+                                <FormGroup>
+                                    <Label for="app-icon">Icon*</Label>
+                                    <span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
+                                    <div id="app-icon-container">
+                                        {this.state.icon.map((tile) => (
+                                            <button onMouseEnter={() => {
+                                                console.log("Mouse Entered")
+                                            }}>
+                                                <img style={{height: '200px', width: '200px'}} src={tile.preview}/>
+                                            </button>
+                                        ))}
+                                        {this.state.icon.length === 0 ?
+                                            <Dropzone
+                                                className="application-create-icon-dropzone"
+                                                accept="image/jpeg, image/png"
+                                                onDrop={(icon, rejected) => {
+                                                    this.setState({icon, rejected});
+                                                }}
+                                            >
+                                                <i className="fw fw-add"></i>
+                                            </Dropzone> : <div/>}
+                                    </div>
+                                </FormGroup>
+                            </div>
+                            <div style={{marginLeft: '15px'}}>
+                                <FormGroup>
+                                    <Label for="app-banner">Banner*</Label>
+                                    <span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
+                                    <div id="app-banner-container">
+                                        {this.state.banner.map((tile) => (
+                                            <button onMouseEnter={() => {
+                                                console.log("Mouse Entered")
+                                            }}>
+                                                <img style={{height: '200px', width: '400px'}} src={tile.preview}/>
+                                            </button>
+                                        ))}
+                                        {this.state.banner.length === 0 ?
+                                            <Dropzone
+                                                className="application-create-banner-dropzone"
+                                                accept="image/jpeg, image/png"
+                                                onDrop={(banner, rejected) => {
+                                                    this.setState({banner, rejected});
+                                                }}
+                                            >
+                                                <i className="fw fw-add"></i>
+                                            </Dropzone> : <div/>
+                                        }
+                                    </div>
+                                </FormGroup>
+                            </div>
+                        </div>
+                        <div className="save-info">
+                            <Button>Save</Button>
                         </div>
-                    </div>
-                    <div className="save-info">
-                        <Button>Save</Button>
-                    </div>
-                </form>
+                    </form>
+                </Row>
             </div>
         )
     }
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css
deleted file mode 100644
index fb0471eddc..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/GenenralInfo/generalInfo.css
+++ /dev/null
@@ -1,26 +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.
- */
-
-.app-edit-general-info {
-    margin-top: 20px;
-}
-
-.save-info {
-    float: right;
-    margin-bottom: 10px;
-}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
index b737680c92..295b2818d9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/CreateRelease.jsx
@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './createRelease.css';
 import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
 import UploadPackage from "./UploadPackage";
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
index 8eb017fa59..b3d97d26a3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/UploadPackage.jsx
@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './createRelease.css';
 import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
 
 class UploadPackage extends Component {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css
deleted file mode 100644
index 1cd6694597..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/Create/createRelease.css
+++ /dev/null
@@ -1,38 +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.
- */
-
-.release-header {
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
-.release-create {
-    height: 150px;
-    margin-bottom: 20px;
-}
-
-.release-detail-content {
-    width: 100%;
-    margin-top: 20%;
-    height: 300px;
-}
-
-.form-btn {
-    float: right;
-    margin-bottom: 10px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
index 0501f6b2d6..9136ad5e38 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/ReleaseManager.jsx
@@ -18,7 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import './release-mgt.css';
 import {Button, Col, Row} from "reactstrap";
 import CreateRelease from "../Create/CreateRelease";
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
deleted file mode 100644
index 7fd6831f24..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseMgtBase/release-mgt.css
+++ /dev/null
@@ -1,50 +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.
- */
-
-.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%;
-}
-
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
index 22503fdf8c..e76991b10b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/ApplicationView.jsx
@@ -19,7 +19,6 @@
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
 import {Col, Row} from "reactstrap";
-import './applicationView.css';
 
 /**
  * Application view component.
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css
deleted file mode 100644
index 8d5dfd100c..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/View/applicationView.css
+++ /dev/null
@@ -1,56 +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.
- */
-
-
-#application-view-content {
-    width: 100%;
-}
-
-#application-view-row {
-    margin: 10px 10px 20px 20px;
-}
-
-#app-icon {
-    height: 100px;
-    width: 100px;
-    border: solid 1px black;
-    border-radius: 50%;
-}
-
-.app-updated-date {
-    color: #888888;
-    font-style: italic;
-}
-
-.app-install-count {
-    font-style: italic;
-}
-
-.app-details-tbl {
-    outline: none;
-    border-color: #2196F3;
-}
-
-.app-details-tbl tr {
-    margin: 20px 0 0 0;
-}
-
-.app-details-tbl td {
-    margin-left: 10px;
-    max-width: 400px;
-}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
index 59d9a50b56..08d73aca4d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/FloatingButton/FloatingButton.jsx
@@ -20,10 +20,12 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './floatingButton.css';
 
+/**
+ * Floating Action button.
+ * */
 class FloatingButton extends Component {
 
     handleClick(event) {
-        console.log("click");
         this.props.onClick(event);
     }
 
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
index 6493e44847..07157102cb 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/index.js
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import './index.css';
 import React from 'react';
 import Publisher from './App';
 import ReactDOM from 'react-dom';