Update shared components in `AnnotationHeader`

Visual change: hover on expand-replies is `brand` instead of
`brand-dark`—this is a standard hover color for a light-colored link.

src/sidebar/components/Annotation/AnnotationHeader.js

-import { Icon, LinkButton } from '@hypothesis/frontend-shared';
+import {
+  LinkButton,
+  HighlightIcon,
+  LockIcon,
+} from '@hypothesis/frontend-shared/lib/next';
 import { useMemo } from 'preact/hooks';
 
 import { withServices } from '../../service-context';
@@ -116,15 +120,19 @@ function AnnotationHeader({
     <header>
       <HeaderRow>
         {isPrivate(annotation.permissions) && !isEditing && (
-          <Icon
-            classes="text-tiny"
-            name="lock"
+          <LockIcon
+            className="text-tiny w-em h-em"
             title="This annotation is visible only to you"
           />
         )}
         <AnnotationUser authorLink={authorLink} displayName={authorName} />
         {replyCount > 0 && isCollapsedReply && (
-          <LinkButton onClick={onReplyCountClick} title="Expand replies">
+          <LinkButton
+            color="text-light"
+            onClick={onReplyCountClick}
+            title="Expand replies"
+            underline="hover"
+          >
             {`${replyCount} ${replyCount > 1 ? 'replies' : 'reply'}`}
           </LinkButton>
         )}
@@ -150,10 +158,9 @@ function AnnotationHeader({
             />
           )}
           {!isEditing && isHighlight(annotation) && (
-            <Icon
-              name="highlight"
+            <HighlightIcon
               title="This is a highlight. Click 'edit' to add a note or tag."
-              classes="text-tiny text-color-text-light"
+              className="text-tiny w-em h-em text-color-text-light"
             />
           )}
           {showDocumentInfo && (

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

@@ -96,7 +96,7 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader();
 
-      assert.isTrue(wrapper.find('Icon').filter({ name: 'lock' }).exists());
+      assert.isTrue(wrapper.find('LockIcon').exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is being edited', () => {
@@ -104,7 +104,7 @@ describe('AnnotationHeader', () => {
 
       const wrapper = createAnnotationHeader({ isEditing: true });
 
-      assert.isFalse(wrapper.find('Icon').filter({ name: 'lock' }).exists());
+      assert.isFalse(wrapper.find('LockIcon').exists());
     });
 
     it('should not render an "Only Me" icon if the annotation is not private', () => {
@@ -303,9 +303,8 @@ describe('AnnotationHeader', () => {
         const wrapper = createAnnotationHeader({
           isEditing: false,
         });
-        const highlightIcon = wrapper.find('Icon[name="highlight"]');
 
-        assert.isTrue(highlightIcon.exists());
+        assert.isTrue(wrapper.find('HighlightIcon').exists());
       });
 
       it('should not display the is-highlight icon if annotation is not a highlight', () => {
@@ -313,9 +312,8 @@ describe('AnnotationHeader', () => {
         const wrapper = createAnnotationHeader({
           isEditing: false,
         });
-        const highlightIcon = wrapper.find('Icon[name="highlight"]');
 
-        assert.isFalse(highlightIcon.exists());
+        assert.isFalse(wrapper.find('HighlightIcon').exists());
       });
     });