Merge pull request #1636 from hypothesis/last-sidebar-svg-conversions

Complete final sidebar SVG icon conversions

src/images/icons/caret-right.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(6.12323e-17,1,-1,6.12323e-17,15.9996,0.000432345)">
+        <path fill="currentColor" d="M7.456,4.212C7.762,3.931 8.238,3.931 8.544,4.212L14.774,10.079C15.075,10.362 15.075,10.821 14.774,11.104L14.048,11.788C13.742,12.069 13.267,12.069 12.961,11.789L8,7.139L3.039,11.789C2.733,12.069 2.258,12.069 1.952,11.788L1.225,11.104C1.081,10.972 0.999,10.786 0.999,10.592C0.999,10.397 1.081,10.211 1.225,10.079L7.455,4.212L7.456,4.212Z" />
+    </g>
+</svg>

src/sidebar/components/annotation-header.js

@@ -4,6 +4,7 @@ const { createElement } = require('preact');
 const AnnotationDocumentInfo = require('./annotation-document-info');
 const AnnotationShareInfo = require('./annotation-share-info');
 const AnnotationUser = require('./annotation-user');
+const SvgIcon = require('./svg-icon');
 const Timestamp = require('./timestamp');
 
 /**
@@ -62,9 +63,11 @@ function AnnotationHeader({
         <AnnotationShareInfo annotation={annotation} isPrivate={isPrivate} />
         {!isEditing && isHighlight && (
           <div className="annotation-header__highlight">
-            <i
-              className="h-icon-border-color"
+            <SvgIcon
+              name="highlight"
               title="This is a highlight. Click 'edit' to add a note or tag."
+              inline={true}
+              className="annotation-header__highlight-icon"
             />
           </div>
         )}

src/sidebar/components/svg-icon.js

@@ -10,6 +10,7 @@ const icons = {
   'arrow-left': require('../../images/icons/arrow-left.svg'),
   'arrow-right': require('../../images/icons/arrow-right.svg'),
   cancel: require('../../images/icons/cancel.svg'),
+  'caret-right': require('../../images/icons/caret-right.svg'),
   'cc-std': require('../../images/icons/cc-std.svg'),
   'cc-zero': require('../../images/icons/cc-zero.svg'),
   'collapse-menu': require('../../images/icons/collapse-menu.svg'),

src/sidebar/templates/annotation-thread.html

@@ -4,8 +4,8 @@
        ng-class="vm.threadToggleClasses()"
        title="{{vm.thread.collapsed && 'Expand' || 'Collapse'}}"
        ng-click="vm.toggleCollapsed()">
-       <span ng-class="{'h-icon-arrow-right': vm.thread.collapsed,
-                        'h-icon-arrow-drop-down': !vm.thread.collapsed}"></span>
+       <svg-icon name="'caret-right'" ng-if="vm.thread.collapsed"></svg-icon>
+       <svg-icon name="'expand-menu'" ng-if="!vm.thread.collapsed"></svg-icon>
     </a>
     <div class="annotation-thread__thread-line"></div>
   </div>

src/styles/sidebar/components/annotation-header.scss

@@ -37,4 +37,11 @@
   &__highlight {
     margin-right: 5px;
   }
+
+  &__highlight-icon {
+    width: 12px;
+    height: 12px;
+    /* bring down the baseline a little */
+    margin-bottom: -1px;
+  }
 }

src/styles/sidebar/components/annotation-thread.scss

@@ -61,6 +61,7 @@ li:first-child .annotation-thread--top-reply {
   color: var.$grey-4;
   display: block;
   text-align: center;
+  margin-left: 3px;
 
   font-size: 15px;
   line-height: 22px;