ONOS-4359: New UI look and feel : table views - base table. (WIP)

Change-Id: I22142b1723a88a89e91d1557b87a36e7c8767909
(cherry picked from commit 1d82123)
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
index d4f0d6d..eee3713 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon-theme.css
@@ -35,10 +35,20 @@
 }
 
 .light svg.embeddedIcon .icon.active .glyph {
-    fill: green;
+    fill: #04bf34;
 }
 .dark svg.embeddedIcon .icon.active .glyph {
-    fill: #308C10;
+    /* TODO: dark theme */
+    fill: #04bf34;
+}
+
+.light svg.embeddedIcon .icon.inactive .glyph {
+    /* TODO: */
+    fill: darkred;
+}
+.dark svg.embeddedIcon .icon.inactive .glyph {
+    /* TODO: dark theme */
+    fill: darkred;
 }
 
 .light table svg.embeddedIcon {
@@ -54,16 +64,4 @@
     fill: #ccc;
 }
 
-.light svg.embeddedIcon .icon.active .glyph {
-    fill: green;
-}
-.light svg.embeddedIcon .icon.inactive .glyph {
-    fill: darkred;
-}
-.dark svg.embeddedIcon .icon.active .glyph {
-    fill: #308C10;
-}
-.dark svg.embeddedIcon .icon.inactive .glyph {
-    fill: #AD2D2D;
-}
 
diff --git a/web/gui/src/main/webapp/app/fw/widget/table-theme.css b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
index d2ab63f..d314c9e 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table-theme.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table-theme.css
@@ -17,24 +17,27 @@
 /* ------ for summary-list tables (theme) ------ */
 
 .light div.summary-list tr:nth-child(even) {
-    background-color: #ddd;
+    background-color: #f4f4f4;
 }
 .light div.summary-list tr:nth-child(odd) {
-    background-color: #eee;
+    background-color: #fbfbfb;
 }
 .dark div.summary-list tr:nth-child(even) {
-    background-color: #333;
+    /* TODO: dark theme */
+    background-color: #f4f4f4;
 }
 .dark div.summary-list tr:nth-child(odd) {
-    background-color: #444;
+    /* TODO: dark theme */
+    background-color: #fbfbfb;
 }
 
 .light div.summary-list tr.selected {
-    background-color: deepskyblue !important;
+    background-color: #dbeffc !important;
 }
 
 .dark div.summary-list tr.selected {
-    background-color: #304860;
+    /* TODO: dark theme */
+    background-color: #dbeffc;
 }
 
 /* highlighting */
@@ -46,15 +49,21 @@
 }
 
 .light div.summary-list .table-header td {
-    background-color: #bbb;
+    background-color: #e5e5e6;
+    color: #3c3a3a;
 }
 .dark div.summary-list .table-header td {
-    background-color: #222;
-    color: #ccc;
+    /* TODO: dark theme */
+    background-color: #e5e5e6;
+    color: #3c3a3a;
 }
 
+.light div.summary-list td {
+    color: #3c3a3a;
+}
 .dark div.summary-list td {
-    color: #ccc;
+    /* TODO: dark theme */
+    color: #3c3a3a;
 }
 
 /* Inactive */
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index b7f8b9e..03d9e88 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -49,21 +49,26 @@
 }
 
 div.summary-list td {
-    padding: 6px;
+    padding: 4px;
     text-align: left;
     word-wrap: break-word;
+    font-size: 12pt;
+}
+
+div.summary-list td.table-icon {
+    padding-left: 4px;
 }
 
 div.summary-list .table-header td {
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 11pt;
+    padding-top: 14px;
+    padding-bottom: 14px;
+
     letter-spacing: 0.02em;
     cursor: pointer;
-    font-weight: bold;
-}
-div.summary-list .table-header td:first-child {
-    border-radius: 8px 0 0 0;
-}
-div.summary-list .table-header td:last-child {
-    border-radius: 0 8px 0 0;
 }
 
 /* rows are selectable */
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 13b223b..343f9ba 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -24,7 +24,7 @@
     var $log, $window, fs, mast, is;
 
     // constants
-    var tableIconTdSize = 33,
+    var tableIconTdSize = 40,
         pdg = 22,
         flashTime = 1500,
         colWidth = 'col-width',