ONOS-4359: continued work on theming UI
- adjusted app detail panel spacing of elements
- fixed bug in topo.css

Change-Id: I59c659dc1ccd908be2b3d7bcf2b5feeee6a2eabd
(cherry picked from commit 403b577)
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index bd2d0c8..1b6069e 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -49,7 +49,8 @@
 }
 
 #application-details-panel .container {
-    padding: 0 10px;
+    padding: 0 30px;
+    overflow-y: scroll;
 }
 
 #application-details-panel .close-btn {
@@ -67,12 +68,13 @@
 
 #application-details-panel h2 {
     display: inline-block;
-    margin: 8px 0;
+    margin: 12px 0 6px 0;
     font-size: 15pt;
     font-variant: small-caps;
     text-transform: uppercase;
 }
 
+
 #application-details-panel .top .app-title {
     width: 90%;
     height: 62px;
@@ -80,12 +82,14 @@
     font-weight: lighter;
     overflow: hidden;
     white-space: nowrap;
-    padding: 0 12px 0 0;
+    padding: 0 12px 0 2px;
+    margin-top: 19px;
+    margin-bottom: 5px;
 }
 
 #application-details-panel .top div.left {
     float: left;
-    padding: 12px 12px 0 4px;
+    padding: 12px 12px 0 3px;
 }
 #application-details-panel .top div.right {
     display: inline-block;
@@ -112,11 +116,15 @@
 
 #application-details-panel hr {
     width: 100%;
-    margin: 6px auto;
+    margin: 12px auto;
 }
 
-#application-details-panel .container {
-    overflow-y: scroll;
+#application-details-panel .middle {
+    padding: 7px 0 7px 6px;
+}
+
+#application-details-panel .bottom {
+    padding: 12px 0 0 6px;
 }
 
 #application-details-panel .bottom table {
@@ -125,7 +133,8 @@
 }
 
 #application-details-panel .bottom td {
-    padding: 6px 12px;
+    margin-left: -6px;
+    padding: 6px 6px;
     text-align: left;
 }
 
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index 56b2d98..84aed7c 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -38,8 +38,8 @@
     var INSTALLED = 'INSTALLED',
         ACTIVE = 'ACTIVE',
         appMgmtReq = 'appManagementRequest',
-        topPdg = 70,
-        panelWidth = 500,
+        topPdg = 60,
+        panelWidth = 540,
         pName = 'application-details-panel',
         detailsReq = 'appDetailsRequest',
         detailsResp = 'appDetailsResponse',
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 5233976..5d6e040 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -102,7 +102,8 @@
     left: 50px;
 }
 
-.topo-p p, table {
+.topo-p p,
+.topo-p table {
     padding: 4px;
     margin: 0;
 }