LnF updates to navigation menu.

Change-Id: I8dce2d5feebcf65143b1c0b4eee8b298a68995e0

@@ -53,6 +53,8 @@ public class MainNavResource extends AbstractInjectionResource {
             "<div class=\"nav-hdr\">%s</div>%n";
     private static final String NAV_FORMAT =
             "<a ng-click=\"navCtrl.hideNav()\" href=\"#/%s\">%s %s</a>%n";
+    private static final String ICON_FORMAT =
+            "<div icon icon-id=\"%s\"></div>";
 
     private static final String BLANK_GLYPH = "unknown";
 
@@ -119,6 +121,6 @@ public class MainNavResource extends AbstractInjectionResource {
 
     private String icon(UiView view) {
         String gid = view.iconId() == null ? BLANK_GLYPH : view.iconId();
-        return "<div icon icon-id=\"" + gid + "\"></div>";
+        return String.format(ICON_FORMAT, gid);
     }
 }

@@ -19,42 +19,46 @@
  */
 
 .light #nav {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
+    background-color: #231f20;
 }
 .dark #nav {
-    background-color: #444;
-    box-shadow: 0 2px 8px #111;
+    /* TODO: dark theme */
+    background-color: #231f20;
 }
 
 .light #nav .nav-hdr {
-    color: #ddd;
-    border-bottom: solid 1px #999;
-    background-color: #aaa;
+    color: #716b6a;
+    background-color: #3c3a3a;
 }
 .dark #nav .nav-hdr {
-    color: #888;
-    border-bottom: solid 1px #444;
-    background-color: #555;
+    /* TODO: dark theme */
+    color: #716b6a;
+    background-color: #3c3a3a;
 }
 
 .light #nav a {
-    color: #369;
-    border-bottom: solid #ccc 1px;
+    color: #c7c7c0;
+    border-bottom: solid #3c3a3a 1px;
 }
 .dark #nav a {
-    color: #eee;
-    border-bottom: solid #333 1px;
+    /* TODO: dark theme */
+    color: #c7c7c0;
+    border-bottom: solid #3c3a3a 1px;
 }
 
 .light #nav a:hover {
-    background-color: #ddd;
+    color: #ffffff;
 }
 .dark #nav a:hover {
-    background-color: #777;
+    /* TODO: dark theme */
+    color: #ffffff;
 }
 
 #nav a div svg.embeddedIcon g.icon .glyph {
-    fill: #c66;
+    fill: #007dc4;
+}
+
+#nav a:hover div svg.embeddedIcon g.icon .glyph {
+    fill: #20b2ff;
 }
 

@@ -20,27 +20,32 @@
 
 #nav {
     position: absolute;
-    top: 45px;
-    left: 1px;
+    top: 48px;
+    left: 0;
     padding: 0;
     z-index: 3000;
     visibility: hidden;
 }
 
 html[data-platform='iPad'] #nav {
-    top: 57px;
+    top: 60px;
 }
 
 #nav .nav-hdr {
-    font-style: italic;
-    padding: 6px 8px 6px 8px;
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 12pt;
+    padding: 8px 15px;
 }
 
 #nav a {
     text-decoration: none;
-    font-size: 14pt;
+    font-size: 13pt;
+    font-weight: lighter;
     display: block;
-    padding: 8px 16px 6px 12px;
+    padding: 6px 10px;
+    margin: 0 7px;
 }
 
 #nav a div {

@@ -24,6 +24,9 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
+          rel='stylesheet' type='text/css'>
+
     <title>ONOS</title>
 
     <!-- Third party library code included here -->