feat(header): 2400 change / style nav icons

- use font awesome icons - increase font size - increase contrast Closes #2400
NCI-GDC · May 13, 2016 · 3cd8f55 · 3cd8f55
1 parent e941a31
commit 3cd8f55
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 30 deletions.
diff --git a/app/fonts/gdc-icons.svg b/app/fonts/gdc-icons.svg
diff --git 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
@@ -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
@@ -37,4 +37,9 @@
     color: #fff;
   }
 
+  .nav i {
+    font-size: 1.2em;
+    margin-right: 0.4rem;
+  }
+
 }