Update `AnnotationHeader` with `Icon`, simpler styles

src/sidebar/components/Annotation/AnnotationHeader.js

-import { SvgIcon, LinkButton } from '@hypothesis/frontend-shared';
+import { Icon, LinkButton } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
 import { withServices } from '../../service-context';
 
@@ -114,11 +114,14 @@ function AnnotationHeader({
     store.setExpanded(/** @type {string} */ (annotation.id), true);
 
   return (
-    <header className="AnnotationHeader">
-      <div className="AnnotationHeader__row hyp-u-horizontal-spacing--2">
+    <header>
+      <div
+        className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2"
+        style="flex-wrap:wrap-reverse"
+      >
         {annotationIsPrivate && !isEditing && (
-          <SvgIcon
-            className="AnnotationHeader__icon"
+          <Icon
+            classes="u-icon--xsmall"
             name="lock"
             title="This annotation is visible only to you"
           />
@@ -146,17 +149,17 @@ function AnnotationHeader({
       </div>
 
       {showExtendedInfo && (
-        <div className="AnnotationHeader__row hyp-u-horizontal-spacing--2">
+        <div
+          className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2"
+          style="flex-wrap:wrap-reverse"
+        >
           <AnnotationShareInfo annotation={annotation} />
           {!isEditing && isHighlight(annotation) && (
-            <div className="AnnotationHeader__highlight">
-              <SvgIcon
-                name="highlight"
-                title="This is a highlight. Click 'edit' to add a note or tag."
-                inline={true}
-                className="AnnotationHeader__highlight-icon"
-              />
-            </div>
+            <Icon
+              name="highlight"
+              title="This is a highlight. Click 'edit' to add a note or tag."
+              classes="u-icon--xsmall u-color-text--muted"
+            />
           )}
           {showDocumentInfo && (
             <AnnotationDocumentInfo

src/sidebar/components/Annotation/test/AnnotationHeader-test.js

@@ -84,7 +84,7 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader();
 
-      assert.isTrue(wrapper.find('SvgIcon').filter({ name: 'lock' }).exists());
+      assert.isTrue(wrapper.find('Icon').filter({ name: 'lock' }).exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is being edited', () => {
@@ -92,7 +92,7 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader({ isEditing: true });
 
-      assert.isFalse(wrapper.find('SvgIcon').filter({ name: 'lock' }).exists());
+      assert.isFalse(wrapper.find('Icon').filter({ name: 'lock' }).exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is not private', () => {
@@ -100,7 +100,7 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader();
 
-      assert.isFalse(wrapper.find('SvgIcon').filter({ name: 'lock' }).exists());
+      assert.isFalse(wrapper.find('Icon').filter({ name: 'lock' }).exists());
     });
   });
 
@@ -298,7 +298,7 @@ describe('AnnotationHeader', () => {
         const wrapper = createAnnotationHeader({
           isEditing: false,
         });
-        const highlightIcon = wrapper.find('.AnnotationHeader__highlight');
+        const highlightIcon = wrapper.find('Icon[name="highlight"]');
 
         assert.isTrue(highlightIcon.exists());
       });
@@ -308,7 +308,7 @@ describe('AnnotationHeader', () => {
         const wrapper = createAnnotationHeader({
           isEditing: false,
         });
-        const highlightIcon = wrapper.find('.AnnotationHeader__highlight');
+        const highlightIcon = wrapper.find('Icon[name="highlight"]');
 
         assert.isFalse(highlightIcon.exists());
       });
@@ -414,7 +414,7 @@ describe('AnnotationHeader', () => {
         isEditing: true,
         isHighlight: true,
       });
-      const highlight = wrapper.find('.AnnotationHeader__highlight');
+      const highlight = wrapper.find('Icon[name="highlight"]');
 
       assert.isFalse(highlight.exists());
     });

src/styles/sidebar/components/AnnotationHeader.scss

-@use '../../mixins/buttons';
-@use '../../mixins/forms';
-@use '../../mixins/layout';
-@use '../../mixins/utils';
-@use '../../variables' as var;
-
-.AnnotationHeader {
-  &__row {
-    @include layout.row($align: baseline);
-    // Wrap onto multiple rows from bottom to top
-    flex-wrap: wrap-reverse;
-  }
-
-  &__icon {
-    @include utils.icon--xsmall;
-    color: var.$color-text;
-  }
-
-  &__highlight-icon {
-    @include utils.icon--small;
-    color: var.$color-text--light;
-    // Pull the icon down a tad for better vertical alignment with other
-    // items in the same layout row
-    margin-bottom: -1px;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -20,7 +20,6 @@
 // ----------
 @use './components/Annotation';
 @use './components/AnnotationBody';
-@use './components/AnnotationHeader';
 @use './components/AnnotationPublishControl';
 @use './components/AnnotationQuote';
 @use './components/AnnotationShareControl';