New icons and copy changes for sidebar tutorial (#3220)

* Changes to html.

h/static/styles/sidebar-tutorial.scss

@@ -28,11 +28,13 @@
   display: table;
   padding: 0;
 }
+
 .sidebar-tutorial__list-item {
   list-style: none;
   counter-increment: sidebar-tutorial__list;
   display: table-row;
 }
+
 .sidebar-tutorial__list-item::before {
   content: counter(sidebar-tutorial__list) ".";
   display: table-cell; /* aha! */

h/templates/client/sidebar_tutorial.html

@@ -6,25 +6,31 @@
     <li class="sidebar-tutorial__list-item">
       <p class="sidebar-tutorial__list-item-content">
         To create an annotation, select text and click the
-        <i class="h-icon-insert-comment"></i>&nbsp;button.
+        <i class="h-icon-annotate"></i>&nbsp;button.
+      </p>
+    </li>
+    <li class="sidebar-tutorial__list-item">
+      <p class="sidebar-tutorial__list-item-content">
+        To add a note to the page you are viewing, click the
+        <i class="h-icon-note"></i>&nbsp;button.
       </p>
     </li>
     <li class="sidebar-tutorial__list-item">
       <p class="sidebar-tutorial__list-item-content">
         To create a highlight, select text and click the
-        <i class="h-icon-border-color"></i>&nbsp;button.
+        <i class="h-icon-highlight"></i>&nbsp;button.
       </p>
     </li>
     <li class="sidebar-tutorial__list-item">
       <p class="sidebar-tutorial__list-item-content">
         To reply to an annotation, click the
-        <i class="h-icon-reply"></i>&nbsp;<strong>Reply</strong>&nbsp;link.
+        <i class="h-icon-annotation-reply"></i>&nbsp;<strong>Reply</strong>&nbsp;link.
       </p>
     </li>
     <li class="sidebar-tutorial__list-item">
       <p class="sidebar-tutorial__list-item-content">
         To share an annotated page, click the
-        <i class="h-icon-share"></i>&nbsp;button at the top.
+        <i class="h-icon-annotation-share"></i>&nbsp;button at the top.
       </p>
     </li>
     <li class="sidebar-tutorial__list-item">