[feat] Header - Add icons.

src/images/icons/icon-events.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="17">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 13.031h-5.528l1.203 1.208a1.04 1.04 0 0 1 0 1.466 1.03 1.03 0 0 1-1.461 0l-2.92-2.932a1.022 1.022 0 0 1-.272-.891 1 1 0 0 1 .274-.635l2.939-2.95a1.036 1.036 0 0 1 1.469 0 1.045 1.045 0 0 1 0 1.475L11.481 11H17a1 1 0 0 1 1 1v.031a1 1 0 0 1-1 1zM9.676 4.755l-2.912 2.92a1.027 1.027 0 0 1-1.455 0 1.034 1.034 0 0 1 0-1.46L6.519 5H1a1 1 0 0 1 0-2h5.51L5.28 1.765a1.04 1.04 0 0 1 0-1.469 1.032 1.032 0 0 1 1.464 0l2.93 2.939c.2.201.29.464.291.727.002.036.005.069.004.104-.002.019-.008.036-.01.054a1.02 1.02 0 0 1-.283.635z"/>
+</svg>

src/images/icons/icon-statistics.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 14a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V1a1 1 0 0 1 2 0v12a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1zm-4 0a1 1 0 0 1-1-1V7a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zm0 2h16a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"/>
+</svg>

src/images/icons/icon-status.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#60DB97" fill-rule="evenodd" d="M17 10h-1.101a6.918 6.918 0 0 1-1.31 3.175l.775.775a1 1 0 0 1-1.414 1.414l-.775-.775A6.918 6.918 0 0 1 10 15.899V17a1 1 0 0 1-2 0v-1.101a6.918 6.918 0 0 1-3.175-1.31l-.775.775a1 1 0 0 1-1.414-1.414l.775-.775A6.918 6.918 0 0 1 2.101 10H1a1 1 0 0 1 0-2h1.101a6.918 6.918 0 0 1 1.31-3.175l-.775-.775A.999.999 0 1 1 4.05 2.636l.775.775A6.918 6.918 0 0 1 8 2.101V1a1 1 0 0 1 2 0v1.101a6.918 6.918 0 0 1 3.175 1.31l.775-.775a1 1 0 0 1 1.414 1.414l-.775.775A6.918 6.918 0 0 1 15.899 8H17a1 1 0 0 1 0 2zM9 4a5 5 0 1 0 .001 10.001A5 5 0 0 0 9 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-4a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
+</svg>

src/index.js

@@ -51,13 +51,38 @@ let Header = ({ netId, onChange, injectedWeb3 }) => {
   return (
     <header id="header" className={`header ${headerClassName}`}>
       <div className="container">
-        <a href={baseRootPath} className="header-logo-a">
-          <img className="header-logo" src={logoImageName} alt="" />
+        <a
+          className="header-logo-a"
+          href={baseRootPath}
+        >
+          <img
+            className="header-logo"
+            src={logoImageName} alt=""
+          />
         </a>
         <div className="links-container">
-          <NavLink className="link" exact activeClassName="nav-i_active" to={`${baseRootPath}/`}>{sectionsTitles[0]}</NavLink>
-          <NavLink className="link" activeClassName="nav-i_active" to={`${baseRootPath}/set`}>{sectionsTitles[1]}</NavLink>
-          <NavLink className="link" activeClassName="nav-i_active" to={`${baseRootPath}/pending-changes`}>{sectionsTitles[2]}</NavLink>
+          <NavLink
+            activeClassName="active"
+            className="link"
+            exact
+            to={`${baseRootPath}/`}
+          >
+            <i className="link-icon link-icon-all" /><span className='link-text'>{sectionsTitles[0]}</span>
+          </NavLink>
+          <NavLink
+            activeClassName="active"
+            className="link"
+            to={`${baseRootPath}/set`}
+          >
+            <i className="link-icon link-icon-set-metadata" /><span className='link-text'>{sectionsTitles[1]}</span>
+          </NavLink>
+          <NavLink
+            activeClassName="active"
+            className="link"
+            to={`${baseRootPath}/pending-changes`}
+          >
+            <i className="link-icon link-icon-pending-changes" /><span className='link-text'>{sectionsTitles[2]}</span>
+          </NavLink>
         </div>
         {select}
       </div>

src/stylesheets/application/_header.scss

@@ -36,7 +36,6 @@
     justify-content: space-between;
     height: $header-links-container-height;
     margin-left: auto;
-    width: 350px;
 
     @media screen and (max-width: $mobile-width) {
       display: none;
@@ -65,15 +64,37 @@
     font-weight: 700;
     line-height: 16px;
     margin-left: 30px;
+    opacity: 0.8;
     text-decoration: none;
 
+    &:hover,
+    &.active {
+      opacity: 1;
+    }
+
     @media screen and (max-width: $mobile-width) {
       margin-left: 0;
     }
   }
 
-  .link_text {
-    margin-left: 10px;
+  // header link items
+  .link-icon {
+    height: 18px;
+    width: 18px;
+    margin-right: 10px;
+    float: left;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+
+    &-all {
+      background-image: url('#{ $base-images-path }/icons/icon-events.svg');
+    }
+    &-set-metadata {
+      background-image: url('#{ $base-images-path }/icons/icon-status.svg');
+    }
+    &-pending-changes {
+      background-image: url('#{ $base-images-path }/icons/icon-statistics.svg');
+    }
   }
 
   .Select {
@@ -83,6 +104,6 @@
 }
 
 .select-network-id {
-  width: 40px;
   background: #fff;
+  width: 40px;
 }