Use SVG icon for cancel; make styling more accessible and consistent

src/sidebar/components/annotation-publish-control.js

@@ -8,6 +8,7 @@ const { withServices } = require('../util/service-context');
 
 const Menu = require('./menu');
 const MenuItem = require('./menu-item');
+const SvgIcon = require('./svg-icon');
 
 /**
  * Render a compound control button for publishing (saving) an annotation:
@@ -75,11 +76,11 @@ function AnnotationPublishControl({
         </Menu>
       </div>
       <button
-        className="annotation-publish-control__cancel-btn btn-clean"
+        className="action-button"
         onClick={onCancel}
         title="Cancel changes to this annotation"
       >
-        <i className="h-icon-cancel-outline publish-annotation-cancel-btn__icon btn-icon" />{' '}
+        <SvgIcon name="cancel" className="action-button__icon--compact" />
         Cancel
       </button>
     </div>

src/sidebar/components/test/annotation-publish-control-test.js

@@ -191,7 +191,9 @@ describe('AnnotationPublishControl', () => {
       const wrapper = createAnnotationPublishControl({
         onCancel: fakeOnCancel,
       });
-      const cancelBtn = wrapper.find('.annotation-publish-control__cancel-btn');
+      const cancelBtn = wrapper.find(
+        '[title="Cancel changes to this annotation"]'
+      );
       cancelBtn.prop('onClick')();
 
       assert.calledOnce(fakeOnCancel);

src/styles/sidebar/components/annotation-publish-control.scss

+@use "../../mixins/buttons";
 @use "../../mixins/forms";
 @use "../../variables" as var;
 
 .annotation-publish-control {
   display: flex;
 
-  &__cancel-btn {
-    margin-left: 5px;
-    font-weight: normal;
-    color: var.$grey-4;
-
-    &:hover {
-      color: var.$grey-5;
-    }
-
-    &__icon {
-      margin-right: 3px;
-      transform: translateY(10%);
-    }
-  }
-
   // A split button with a primary submit on the left and a drop-down menu
   // of related options to the right
   .annotation-publish-control__btn {
@@ -32,6 +18,7 @@
 
     height: $height;
     position: relative;
+    margin-right: 1em;
 
     // Align the menu arrow correctly with the ▼ in the toggle
     &-menu-arrow {