ONOS-4359: continued work on theming UI (app control buttons).

Change-Id: I87c510caee499a2ecaa51241785e300cb06c1f61
(cherry picked from commit a705605f)

@@ -23,6 +23,10 @@
     padding: 0;
     padding: 0;
 }
 }
 
 
+#mast a:hover {
+    text-decoration: none;
+}
+
 html[data-platform='iPad'] #mast {
 html[data-platform='iPad'] #mast {
     padding-top: 16px;
     padding-top: 16px;
 }
 }

@@ -6,7 +6,7 @@
 
 
     <nav>
     <nav>
         <div class="dropdown-parent">
         <div class="dropdown-parent">
-            <a class="user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
+            <a class="clickable user-menu__name">{{user}} <i class="dropdown-icon"></i></a>
 
 
             <div class="dropdown">
             <div class="dropdown">
                 <a href="rs/logout">logout</a>
                 <a href="rs/logout">logout</a>

@@ -256,25 +256,25 @@
             '76.3z M31.1,85.1v-4.9l32.8-26.4c0.3,0.3,0.8,0.5,1.3,0.5h10.5l' +
             '76.3z M31.1,85.1v-4.9l32.8-26.4c0.3,0.3,0.8,0.5,1.3,0.5h10.5l' +
             '7.7,21.9h-3c-1,0-1.9,0.8-1.9,1.9v6.9H31.1z',
             '7.7,21.9h-3c-1,0-1.9,0.8-1.9,1.9v6.9H31.1z',
 
 
-            refresh: 'M102.6,40.8L88.4,70.5L69.8,43.4L80,42.6c-0.7-2.3-1.7-' +
-            '5.1-3.4-7.8C71.8,27,64,23.1,53.5,23.1c-19.5,0-24.8,11.2-24.8,' +
-            '11.3l-10.1-4.3c0.3-0.7,7.9-18,35-18c24.8,0,35,17.3,37.7,29.6L' +
-            '102.6,40.8z M81.5,74.5c-0.2,0.5-5.5,11.4-24.9,11.4c-10.5,0-18.3' +
-            '-3.9-23.1-11.7c-1.7-2.8-2.8-5.6-3.4-7.8l10.2-0.8L21.7,38.5L7.5,' +
-            '68.2l11.4-0.9c2.7,12.3,12.9,29.6,37.7,29.6c26.9,0,34.6-17.2,34.9' +
-            '-18L81.5,74.5z',
-
-            garbage: 'M94.6,20.2c0,2.7-2.1,4.8-4.8,4.8H19.2c-2.7,0-4.8-2.1-' +
-            '4.8-4.8s2.1-4.8,4.8-4.8h27.6c-0.8-0.7-1.4-1.7-1.4-2.9c0-2.1,1.7-' +
-            '3.9,3.9-3.9h10.4c2.1,0,3.9,1.7,3.9,3.9c0,1.2-0.5,2.2-1.4,2.9h' +
-            '27.6C92.5,15.4,94.6,17.6,94.6,20.2z M91,33.4v64.8c0,2-1.7,3.6-' +
-            '3.8,3.6h-65c-2.1,0-3.8-1.6-3.8-3.6V33.4c0-2,1.7-3.6,3.8-3.6h65C' +
-            '89.3,29.8,91,31.4,91,33.4z M31.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7' +
-            'c-1.5,0-2.7,1.7-2.7,3.8v55.9c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7' +
-            '-1.7,2.7-3.8V37.7z M58.5,37.7c0-2.1-1.8-3.8-4-3.8h-1c-2.2,0-4,' +
-            '1.7-4,3.8v55.9c0,2.1,1.8,3.8,4,3.8h1c2.2,0,4-1.7,4-3.8V37.7z M' +
-            '83.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7c-1.5,0-2.7,1.7-2.7,3.8v55.9' +
-            'c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7-1.7,2.7-3.8V37.7z',
+            refresh:
+           'M99.7,53.8l-10,13.3L85,73.5,78,64,70.4,53.7h9' +
+           'A28.5,28.5,0,1,0,68.3,77.6l10.6,6.9A40.7,40.7,0,1,1,91.6,53.8h8.2Z',
+
+            garbage: 'M55.1,31.1c9.4,0,18.7.1,28.1-.1,3.2-.1,4.2,1,3.7,4.1' +
+            'q-4.1,28.6-8,57.3c-0.3,2.3-1.3,3.4-3.5,3.4h-41' +
+            'c-2.2,0-2.9-1.2-3.2-3.2Q27,63.5,22.7,34.4c-0.4-2.8.6-3.4,3.1-3.4' +
+            'H55.1Z' +
+            'M44.3,81.9c0.4-1.1-2.5-27.4-3.8-40.5a3.2,3.2,0,0,0-3.7-3.2' +
+            'c-2.5.1-2.5,1.9-2.4,3.7,0.5,4.9,1,9.8,1.5,14.7,0.8,8.1,1.6,16.2,' +
+            '2.4,24.2,0.2,2.2,1.1,4.1,3.6,3.4A3.6,3.6,0,0,0,44.3,81.9Z' +
+            'm21.2,0a2.8,2.8,0,0,0,2.2,2.3' +
+            'c2.3,0.8,3.7-.7,4-3.1,1.3-12.9,2.6-25.7,3.8-38.6,0.2-2,.3-4.1-2.6-4.4' +
+            's-3.3,1.7-3.5,3.7C68.1,54.8,65.5,81.1,65.5,81.9Z' +
+            'M57.9,61.3q0-9.8,0-19.6c0-2.2-.8-3.6-3.2-3.5s-2.6,1.7-2.6,3.6' +
+            'q0,19.4,0,38.8c0,1.9,0,3.8,2.8,3.9s3-1.8,3-3.9Q57.9,70.9,57.9,61.3Z' +
+            'M19,24.7c0.3-2,.5-5.7,1.5-8a5.1,5.1,0,0,1,3.6-2.3' +
+            'c5.5-.5,17.3-0.8,17.3-0.8l4.3-3.3H62.9l5.6,3.5S84.5,14.6,87,15' +
+            's2.5,0.7,3.2,1.9,0.9,7.4.9,7.4Z',
 
 
             cog: "M100.2,46.4L87.1,44.8l-2.1-5L93.1,29a2.3,2.3,0,0,0-.2-3" +
             cog: "M100.2,46.4L87.1,44.8l-2.1-5L93.1,29a2.3,2.3,0,0,0-.2-3" +
             "l-8.7-8.8a2.4,2.4,0,0,0-3.1-.2l-11,7.9L66,23.1,63.1,9.5" +
             "l-8.7-8.8a2.4,2.4,0,0,0-3.1-.2l-11,7.9L66,23.1,63.1,9.5" +
@@ -527,10 +527,7 @@
             ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
             ".3-.3h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,.3h-4.4" +
             "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
             "a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z",
 
 
-            checkMark: "M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0," +
-            "1.8c0,0,2.7-5.4,2.8-5.7c0,0,0.5-0.9,1.4-0.1c0," +
-            "0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4," +
-            "0.5-1.2,0.1S2.2,5.4,2.2,5.4S2.2,4.7,2.6,4.5z",
+            checkMark: 'M8.6,3.4L4.4,7.7L1.4,4.7L2.5,3.6L4.4,5.5L7.5,2.3L8.6,3.4Z',
 
 
             xMark: "M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5," +
             xMark: "M9.0,7.2C8.2,6.9,7.4,6.1,6.7,5.2c0.4-0.5," +
             "0.7-0.8,0.8-1.0C7.8,3.5,9.4,1.6,8.1,1.1" +
             "0.7-0.8,0.8-1.0C7.8,3.5,9.4,1.6,8.1,1.1" +

@@ -41,5 +41,5 @@ svg.embeddedIcon g.icon .glyph {
 }
 }
 
 
 svg.embeddedIcon .icon.appInactive .glyph {
 svg.embeddedIcon .icon.appInactive .glyph {
-    fill: none;
+    fill: none !important;
 }
 }

@@ -16,6 +16,24 @@
 
 
 /* ------ for summary-list tables (theme) ------ */
 /* ------ for summary-list tables (theme) ------ */
 
 
+.light div.summary-list .table-header td {
+    background-color: #e5e5e6;
+    color: #3c3a3a;
+}
+.dark div.summary-list .table-header td {
+    /* TODO: dark theme */
+    background-color: #e5e5e6;
+    color: #3c3a3a;
+}
+
+.light div.summary-list td {
+    color: #3c3a3a;
+}
+.dark div.summary-list td {
+    /* TODO: dark theme */
+    color: #3c3a3a;
+}
+
 .light div.summary-list tr:nth-child(even) {
 .light div.summary-list tr:nth-child(even) {
     background-color: #f4f4f4;
     background-color: #f4f4f4;
 }
 }
@@ -40,86 +58,42 @@
     background-color: #dbeffc;
     background-color: #dbeffc;
 }
 }
 
 
-/* highlighting */
 .light div.summary-list tr.data-change {
 .light div.summary-list tr.data-change {
+    /* todo - theme color */
     background-color: #FDFFDC;
     background-color: #FDFFDC;
 }
 }
 .dark div.summary-list tr.data-change {
 .dark div.summary-list tr.data-change {
-    background-color: #5A5600;
-}
-
-.light div.summary-list .table-header td {
-    background-color: #e5e5e6;
-    color: #3c3a3a;
-}
-.dark div.summary-list .table-header td {
-    /* TODO: dark theme */
-    background-color: #e5e5e6;
-    color: #3c3a3a;
-}
-
-.light div.summary-list td {
-    color: #3c3a3a;
-}
-.dark div.summary-list td {
     /* TODO: dark theme */
     /* TODO: dark theme */
-    color: #3c3a3a;
-}
-
-/* Inactive */
-.light .ctrl-btns div g.icon rect,
-.light .ctrl-btns div:hover g.icon rect {
-    fill: #eee;
-}
-.dark .ctrl-btns div g.icon rect,
-.dark .ctrl-btns div:hover g.icon rect {
-    fill: #222;
+    background-color: #FDFFDC;
 }
 }
 
 
-.light .ctrl-btns div g.icon use {
-    fill: #ddd;
-}
-.dark .ctrl-btns div g.icon use {
-    fill: #333;
-}
 
 
-/* Active hover */
-.light .ctrl-btns div.active:hover g.icon rect {
-    fill: #800;
-}
+/* --- Control Buttons --- */
 
 
-.dark .ctrl-btns div.active:hover g.icon rect {
-    fill: #CE5650;
-}
+/* TODO: dark theme */
 
 
-/* Active */
-.light .ctrl-btns div.active g.icon use {
-    fill: #fff;
-}
-.dark .ctrl-btns div.active g.icon use {
-    fill: #eee;
+.light .ctrl-btns div svg.embeddedIcon g.icon use {
+    fill: #e4eef2;
 }
 }
+/* note: no change for inactive buttons when hovered */
 
 
-.light .ctrl-btns div.active g.icon rect {
-    fill: #bbb;
+.light .ctrl-btns div.active svg.embeddedIcon g.icon use {
+    fill: #939598;
 }
 }
-.dark .ctrl-btns div.active g.icon rect {
-    fill: #444;
+.light .ctrl-btns div.active:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
 }
 }
 
 
 /* Refresh button specific */
 /* Refresh button specific */
-.light .ctrl-btns div.refresh.active g.icon rect {
-    fill: #964949;
+.light .ctrl-btns div.refresh svg.embeddedIcon g.icon use {
+    fill: #cdeff2;
 }
 }
-
-.dark .ctrl-btns div.refresh.active g.icon rect {
-    fill: #9B4641;
+.light .ctrl-btns div.refresh:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
 }
 }
-.light .ctrl-btns div.refresh:hover g.icon rect {
-    fill: #964949;
+.light .ctrl-btns div.refresh.active svg.embeddedIcon g.icon use {
+    fill: #009fdb;
 }
 }
-
-.dark .ctrl-btns div.refresh:hover g.icon rect {
-    fill: #9B4641;
+.light .ctrl-btns div.refresh.active:hover svg.embeddedIcon g.icon use {
+    fill: #ce5b58;
 }
 }
-

@@ -57,6 +57,7 @@ div.summary-list td {
 
 
 div.summary-list td.table-icon {
 div.summary-list td.table-icon {
     padding-left: 4px;
     padding-left: 4px;
+    text-align: center;
 }
 }
 
 
 div.summary-list .table-header td {
 div.summary-list .table-header td {
@@ -93,7 +94,8 @@ div.ctrl-btns div {
 }
 }
 
 
 div.ctrl-btns div.separator  {
 div.ctrl-btns div.separator  {
-    cursor: auto;
-    width: 24px;
-    border: none;
+    width: 0;
+    height: 32px;
+    padding: 0;
+    border-right: 1px solid #c7c7c0;
 }
 }

@@ -23,7 +23,7 @@
 }
 }
 
 
 #ov-app div.ctrl-btns {
 #ov-app div.ctrl-btns {
-    width: 290px;
+    width: 260px;
 }
 }
 
 
 #ov-app form#inputFileForm,
 #ov-app form#inputFileForm,

@@ -7,6 +7,7 @@
                  icon icon-size="36" icon-id="refresh"
                  icon icon-size="36" icon-id="refresh"
                  tooltip tt-msg="autoRefreshTip"
                  tooltip tt-msg="autoRefreshTip"
                  ng-click="toggleRefresh()"></div>
                  ng-click="toggleRefresh()"></div>
+
             <div class="separator"></div>
             <div class="separator"></div>
 
 
             <form id="inputFileForm">
             <form id="inputFileForm">

@@ -72,7 +72,7 @@ describe('factory: fw/svg/glyph.js', function() {
 
 
             // badges
             // badges
             uiAttached: 'M2,2.5a.5,.5',
             uiAttached: 'M2,2.5a.5,.5',
-            checkMark: 'M2.6,4.5c0',
+            checkMark: 'M8.6,3.4L4',
             xMark: 'M9.0,7.2C8.2',
             xMark: 'M9.0,7.2C8.2',
             triangleUp: 'M0.5,6.2c0',
             triangleUp: 'M0.5,6.2c0',
             triangleDown: 'M9.5,4.2c0',
             triangleDown: 'M9.5,4.2c0',