Put help icon into top bar

src/images/icons/account.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="Artboard-1-Copy" sketch:type="MSArtboardGroup" fill="#000000">
+        <g id="Artboard-1-Copy" sketch:type="MSArtboardGroup" fill="currentColor">
             <circle id="Oval-1" sketch:type="MSShapeGroup" cx="8" cy="4" r="3"></circle>
             <path d="M8,15 C11,15 14,14.4329966 14,12 C14,10.5670034 10,8 8,8 C6,8 2,10.5670034 2,12 C2,14.4329966 5,15 8,15 Z" id="Oval-1-Copy" sketch:type="MSShapeGroup"></path>
         </g>

src/images/icons/help.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="currentColor" fill-rule="nonzero" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm-.5-5.805c.496 0 .768-.29.873-.788.091-.623.3-.943 1.23-1.515.987-.616 1.497-1.381 1.497-2.503C11.1 3.66 9.765 2.5 7.779 2.5c-1.503 0-2.622.631-3.07 1.612-.14.282-.209.564-.209.884 0 .564.343.928.895.928.426 0 .741-.208.916-.683.224-.661.685-1.018 1.37-1.018.77 0 1.3.505 1.3 1.233 0 .683-.272 1.055-1.174 1.627-.825.512-1.251 1.092-1.251 1.968v.104c0 .609.35 1.04.943 1.04zm.013 3.305c.637 0 1.147-.512 1.147-1.166 0-.654-.51-1.166-1.147-1.166-.629 0-1.14.512-1.14 1.166 0 .654.511 1.166 1.14 1.166z"/>
+</svg>

src/images/icons/share.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#000" fill-rule="nonzero" d="M16 1.656v3.5c0 .587-.721.874-1.138.464l-.992-.977-6.764 6.66a.674.674 0 0 1-.943 0l-.629-.62a.649.649 0 0 1 0-.927l6.765-6.66-.992-.976c-.419-.412-.122-1.12.471-1.12h3.555c.369 0 .667.294.667.656zm-4.694 6.749c.42-.414 1.138-.121 1.138.464v4.819c0 .724-.597 1.312-1.333 1.312H1.333A1.323 1.323 0 0 1 0 13.687V4.063C0 3.338.597 2.75 1.333 2.75h8.223c.593 0 .89.707.47 1.12l-.444.438a.772.772 0 0 1-.47.192H1.777v8.75h8.889V9.306c0-.15.087-.358.195-.464l.444-.437z"/>
+  <path fill="currentColor" fill-rule="nonzero" d="M16 1.656v3.5c0 .587-.721.874-1.138.464l-.992-.977-6.764 6.66a.674.674 0 0 1-.943 0l-.629-.62a.649.649 0 0 1 0-.927l6.765-6.66-.992-.976c-.419-.412-.122-1.12.471-1.12h3.555c.369 0 .667.294.667.656zm-4.694 6.749c.42-.414 1.138-.121 1.138.464v4.819c0 .724-.597 1.312-1.333 1.312H1.333A1.323 1.323 0 0 1 0 13.687V4.063C0 3.338.597 2.75 1.333 2.75h8.223c.593 0 .89.707.47 1.12l-.444.438a.772.772 0 0 1-.47.192H1.777v8.75h8.889V9.306c0-.15.087-.358.195-.464l.444-.437z"/>
 </svg>

src/sidebar/components/svg-icon.js

@@ -11,6 +11,7 @@ const icons = {
   'expand-menu': require('../../images/icons/expand-menu.svg'),
   copy: require('../../images/icons/copy.svg'),
   cursor: require('../../images/icons/cursor.svg'),
+  help: require('../../images/icons/help.svg'),
   leave: require('../../images/icons/leave.svg'),
   refresh: require('../../images/icons/refresh.svg'),
   share: require('../../images/icons/share.svg'),

src/sidebar/components/test/top-bar-test.js

@@ -41,6 +41,10 @@ describe('topBar', function() {
     return el.querySelector('.top-bar__apply-update-btn');
   }
 
+  function helpBtn(el) {
+    return el.querySelector('.top-bar__help-btn');
+  }
+
   function createTopBar(inputs) {
     const defaultInputs = {
       isSidebar: true,
@@ -79,6 +83,16 @@ describe('topBar', function() {
     assert.called(onApplyPendingUpdates);
   });
 
+  it('shows help when help icon clicked', function() {
+    const onShowHelpPanel = sinon.stub();
+    const el = createTopBar({
+      onShowHelpPanel: onShowHelpPanel,
+    });
+    const help = helpBtn(el[0]);
+    help.click();
+    assert.called(onShowHelpPanel);
+  });
+
   it('displays the login control and propagates callbacks', function() {
     const onShowHelpPanel = sinon.stub();
     const onLogin = sinon.stub();
@@ -90,9 +104,6 @@ describe('topBar', function() {
     });
     const loginControl = el.find('login-control').controller('loginControl');
 
-    loginControl.onShowHelpPanel();
-    assert.called(onShowHelpPanel);
-
     loginControl.onLogin();
     assert.called(onLogin);
 

src/sidebar/templates/top-bar.html

@@ -49,6 +49,12 @@
        aria-label="Share this page">
       <i class="h-icon-annotation-share"></i>
     </button>
+    <button class="top-bar__btn top-bar__help-btn"
+       ng-click="vm.onShowHelpPanel()"
+       title="Help"
+       aria-label="Help">
+       <svg-icon name="'help'"></svg-icon>
+    </button>
     <login-control
       class="login-control"
       auth="vm.auth"