From 3cd8f55a0fd07995e4bd8c0019f0b3d221bd88cb Mon Sep 17 00:00:00 2001
From: Alex Wilmer <alex.wilmer@oicr.on.ca>
Date: Fri, 13 May 2016 10:09:09 -0400
Subject: [PATCH] feat(header): 2400 change / style nav icons

 - use font awesome icons
 - increase font size
 - increase contrast

Closes #2400
---
 app/fonts/gdc-icons.svg                       |  2 +-
 .../components/header/templates/header.html   | 11 +++++----
 app/styles/app.less                           | 24 -------------------
 app/styles/header.less                        |  5 ++++
 4 files changed, 12 insertions(+), 30 deletions(-)

diff --git a/app/fonts/gdc-icons.svg b/app/fonts/gdc-icons.svg
index 768dd06f2..9a5796ab1 100755
--- a/app/fonts/gdc-icons.svg
+++ b/app/fonts/gdc-icons.svg
@@ -93,4 +93,4 @@
 <glyph unicode="&#xe953;" glyph-name="gdc-cases" horiz-adv-x="1325" d="M862.871 513.924h-9.872c-47.854-47.854-115.284-81.318-189.908-81.318s-142.055 33.464-189.908 81.318h-13.218c-153.935 0-283.106-123.65-283.106-277.082v-83.493c0-115.284 98.217-217.182 213.166-217.182h542.118c115.284 0 216.010 101.898 216.010 217.182v83.493c0.335 153.433-131.848 277.082-285.281 277.082zM891.984 730.269c0-126.877-102.854-229.731-229.731-229.731s-229.731 102.854-229.731 229.731c0 126.877 102.854 229.731 229.731 229.731s229.731-102.854 229.731-229.731z" />
 <glyph unicode="&#xe954;" glyph-name="gdc-projects" horiz-adv-x="818" d="M684.262 687.252v138.766h-133.981v133.981h-550.28v-751.252h133.981v-133.981h138.766v-138.766h545.495v751.252h-133.981zM76.561 285.308v598.131h397.159v-57.421h-339.738v-540.71h-57.421zM210.542 146.542v602.916h397.159v-62.206h-334.953v-540.71h-62.206zM741.682 12.561h-397.159v602.916h397.159v-602.916z" />
 <glyph unicode="&#xe955;" glyph-name="gdc-data" horiz-adv-x="965" d="M959.037 475.527c0-116.148-94.157-210.305-210.305-210.305s-210.305 94.157-210.305 210.305c0 116.148 94.157 210.305 210.305 210.305s210.305-94.157 210.305-210.305zM853.333 40.602c0-54.73-44.367-99.097-99.097-99.097s-99.097 44.367-99.097 99.097c0 54.73 44.367 99.097 99.097 99.097s99.097-44.367 99.097-99.097zM553.841 139.699c0-96.081-77.889-173.97-173.97-173.97s-173.97 77.889-173.97 173.97c0 96.081 77.889 173.97 173.97 173.97s173.97-77.889 173.97-173.97zM476.766 679.226c0-96.081-77.889-173.97-173.97-173.97s-173.97 77.889-173.97 173.97c0 96.081 77.889 173.97 173.97 173.97s173.97-77.889 173.97-173.97zM203.699 381.935c0-54.73-44.367-99.097-99.097-99.097s-99.097 44.367-99.097 99.097c0 54.73 44.367 99.097 99.097 99.097s99.097-44.367 99.097-99.097zM853.333 855.398c0-54.73-44.367-99.097-99.097-99.097s-99.097 44.367-99.097 99.097c0 54.73 44.367 99.097 99.097 99.097s99.097-44.367 99.097-99.097z" />
-</font></defs></svg>
\ No newline at end of file
+</font></defs></svg>
diff --git a/app/scripts/components/header/templates/header.html b/app/scripts/components/header/templates/header.html
index 9f2c6d043..64a9f373e 100755
--- a/app/scripts/components/header/templates/header.html
+++ b/app/scripts/components/header/templates/header.html
@@ -23,19 +23,20 @@
         </li>
         <li data-ng-class="{ active: hc.$state.includes('projects') }"
             id="header-projects">
-          <a ui-sref="projects.table" tabindex="0"><i class="fa fa-folder-o fa-hidden"></i>
+          <a ui-sref="projects.table" tabindex="0"><i class="icon-gdc-projects"></i>
             <span class="hidden-sm" data-translate>Projects</span>
           </a>
         </li>
         <li data-ng-class="{ active: hc.$state.includes('search') || hc.$state.includes('query') }"
             id="header-data">
-          <a ui-sref="search.summary" tabindex="0"><i class="fa fa-database fa-hidden"></i>
+          <a ui-sref="search.summary" tabindex="0"><i class="icon-gdc-data"></i>
             <span class="hidden-sm" data-translate>Data</span>
           </a>
         </li>
         <li id="header-data">
+
           <a href="https://gdc.nci.nih.gov/access-data/analytical-tools" tabindex="0" target="_blank">
-            <img class="fa-hidden" src="images/icon-GDC-Analysis.svg" alt="GDC Analysis"/>
+            <i class="fa fa-bar-chart"></i>
             <span class="hidden-sm" data-translate>Analysis</span>
           </a>
         </li>
@@ -56,7 +57,7 @@
         </li>
         <li data-ng-if="!hc.UserService.currentUser" id="header-login">
           <a login-button tabindex="0">
-            <i class="fa fa-sign-in fa-hidden"></i>
+            <i class="fa fa-sign-in"></i>
             <span class="hidden-md hidden-sm" data-translate>Login</span>
           </a>
         </li>
@@ -106,7 +107,7 @@
         </li>
         <li ui-sref-active="active" class="nav-cart">
           <a ui-sref="cart" tabindex="0">
-            <i class="fa fa-shopping-cart fa-hidden"></i>
+            <i class="fa fa-shopping-cart"></i>
             <span class="hidden-md hidden-sm" data-translate>Cart</span>
             <span class="label label-primary">{{ hc.getNumCartItems() }}</span>
           </a>
diff --git a/app/styles/app.less b/app/styles/app.less
index 2e74c5142..67c390682 100755
--- a/app/styles/app.less
+++ b/app/styles/app.less
@@ -635,15 +635,6 @@ pre code {
   background:url(/images/icon-projects-off.png) no-repeat 2px 0;
 }
 
-/*---data---*/
-.navbar-nav .fa-database {
-  background:url(/images/icon-data-off.png) no-repeat 2px 3px;
-}
-.navbar-nav .active .fa-database {
-  background:url(/images/icon-data-on.png) no-repeat 2px 3px;
-}
-
-
 /*---annotations---*/
 .navbar-nav .fa-align-left {
   background:url(/images/icon-annotations-off.png) no-repeat 0 0;
@@ -660,22 +651,7 @@ pre code {
   background:url(/images/icon-reports-on.png) no-repeat 4px 2px;
 }
 
-/*---login---*/
-.navbar-nav .fa-sign-in {
-  background:url(/images/icon-login-off.png) no-repeat 3px 2px;
-}
-.navbar-nav .active .fa-sign-in {
-  background:url(/images/icon-login-on.png) no-repeat 3px 2px;
-}
-
 /*---cart---*/
-.navbar-nav .fa-shopping-cart {
-  background:url(/images/icon-cart-off.png) no-repeat 3px 2px;
-}
-.navbar-nav .active .fa-shopping-cart {
-  background:url(/images/icon-cart-on.png) no-repeat 3px 2px;
-}
-
 .navbar-nav .active.nav-cart .label-primary {
   background-color:#fff;
   color:#5b5151;
diff --git a/app/styles/header.less b/app/styles/header.less
index c86cbf5ea..4f987759c 100644
--- a/app/styles/header.less
+++ b/app/styles/header.less
@@ -37,4 +37,9 @@
     color: #fff;
   }
 
+  .nav i {
+    font-size: 1.2em;
+    margin-right: 0.4rem;
+  }
+
 }