Update Cancel button style as per design

 * Use cancel button with a thin circle outline

 * Change normal and hover colors to light/dark grey as
   per discussion on the card.

Card 89

h/static/scripts/directive/publish-annotation-btn.js

@@ -19,6 +19,10 @@ function PublishAnnotationBtnController($scope, localStorage) {
     $scope.onSave();
   };
 
+  this.cancel = function () {
+    $scope.onCancel();
+  }
+
   this.setPrivacy = function (level) {
     localStorage.setItem(STORAGE_KEY, level);
     $scope.onSetPrivacy({level: level});
@@ -66,6 +70,7 @@ module.exports = function () {
       canPost: '=',
       isShared: '=',
       isNew: '=',
+      onCancel: '&',
       onSave: '&',
       onSetPrivacy: '&'
     },

h/static/scripts/directive/test/publish-annotation-btn-test.js

@@ -40,12 +40,13 @@ describe('publishAnnotationBtn', function () {
      isNew: false,
      onSave: function () {},
      onSetPrivacy: function (level) {},
+     onCancel: function () {}
    });
   });
 
   it('should display "Post to Only Me"', function () {
     var buttons = element.find('button');
-    assert.equal(buttons.length, 2);
+    assert.equal(buttons.length, 3);
     assert.equal(buttons[0].innerHTML, 'Post to Only Me');
   });
 
@@ -115,4 +116,15 @@ describe('publishAnnotationBtn', function () {
     assert.equal(disabledBtns.length, 0);
   });
 
+  it('should revert changes when cancel is clicked', function () {
+    var cancelSpy = sinon.spy();
+    element.link({
+      onCancel: cancelSpy
+    });
+    var cancelBtn = element.find('.publish-annotation-cancel-btn');
+    assert.equal(cancelBtn.length, 1);
+    angular.element(cancelBtn).click();
+    assert.equal(cancelSpy.callCount, 1);
+  });
+
 });

h/static/styles/forms.scss

@@ -256,7 +256,10 @@
 
 .btn-icon {
   display: inline-block;
-  transform: scale(1.2);
+  // enlarge icons within buttons and shift the icon
+  // down slightly so that the icon aligns vertically
+  // with the button label
+  transform: scale(1.2) translateY(10%);
 }
 
 // Positions a message/icon to the left of a button.

h/static/styles/publish-annotation-btn.scss

 .publish-annotation-btn {
+  display: flex;
+  margin-right: 5px;
+
   &__btn {
     width: 250px;
   }
@@ -7,3 +10,18 @@
     width: 100%;
   }
 }
+
+.publish-annotation-cancel-btn {
+  $color: #bbb;
+
+  color: $color;
+  font-weight: normal;
+
+  &__icon {
+    margin-right: 3px;
+  }
+
+  &:hover {
+    color: darken($color, 15%);
+  }
+}

h/templates/client/annotation.html

@@ -115,15 +115,14 @@
               ng-click="vm.save()"
               class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
       <publish-annotation-btn
+        class="publish-annotation-btn"
         group="vm.group()"
         can-post="vm.hasContent()"
         is-new="vm.action == 'create'"
         is-shared="vm.isShared()"
+        on-cancel="vm.revert()"
         on-save="vm.save()"
         on-set-privacy="vm.setPrivacy(level)"></publish-annotation-btn>
-      <button class="btn btn-clean"
-              ng-click="vm.revert()"
-              ><i class="h-icon-cancel btn-icon"></i> Cancel</button>
     </div>
 
     <div class="annotation-section annotation-license"

h/templates/client/publish_annotation_btn.html

@@ -34,3 +34,9 @@
     </li>
   </ul>
 </div>
+<button class="publish-annotation-cancel-btn btn-clean"
+        ng-click="vm.cancel()"
+        title="Cancel changes to this annotation"
+        >
+  <i class="h-icon-cancel-outline publish-annotation-cancel-btn__icon btn-icon"></i> Cancel
+</button>