Use `Actions`, reduce classnames

src/sidebar/components/Annotation/Annotation.js

+import { Actions } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import { useStoreProxy } from '../../store/use-store';
@@ -60,9 +61,7 @@ function Annotation({
 
   return (
     <article
-      className={classnames('Annotation', 'hyp-u-vertical-spacing', {
-        'Annotation--missing': !annotation,
-        'Annotation--reply': isReply,
+      className={classnames('hyp-u-vertical-spacing', {
         'is-collapsed': threadIsCollapsed,
         'is-focused': isFocused,
       })}
@@ -95,8 +94,8 @@ function Annotation({
       )}
 
       {!isCollapsedReply && (
-        <footer className="Annotation__footer">
-          <div className="hyp-u-layout-row Annotation__controls">
+        <footer>
+          <div className="hyp-u-layout-row">
             {showReplyToggle && (
               <AnnotationReplyToggle
                 onToggleReplies={onToggleReplies}
@@ -104,14 +103,21 @@ function Annotation({
                 threadIsCollapsed={threadIsCollapsed}
               />
             )}
-            {isSaving && <div className="Annotation__actions">Saving...</div>}
+            {isSaving && (
+              <div
+                className="hyp-u-layout-row--justify-right hyp-u-stretch"
+                data-testid="saving-message"
+              >
+                Saving...
+              </div>
+            )}
             {annotation && showActions && (
-              <div className="hyp-u-layout-row--justify-right hyp-u-stretch">
+              <Actions classes="hyp-u-stretch">
                 <AnnotationActionBar
                   annotation={annotation}
                   onReply={onReply}
                 />
-              </div>
+              </Actions>
             )}
           </div>
         </footer>

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

@@ -72,34 +72,6 @@ describe('Annotation', () => {
     $imports.$restore();
   });
 
-  describe('annotation classnames', () => {
-    it('should assign a reply class if the annotation is a reply', () => {
-      const wrapper = createComponent({
-        isReply: true,
-        threadIsCollapsed: false,
-      });
-      const annot = wrapper.find('.Annotation');
-
-      assert.isTrue(annot.hasClass('Annotation--reply'));
-      assert.isFalse(annot.hasClass('is-collapsed'));
-    });
-
-    it('applies a focused class if annotation is focused', () => {
-      fakeStore.isAnnotationFocused.returns(true);
-      const wrapper = createComponent({ threadIsCollapsed: false });
-      const annot = wrapper.find('.Annotation');
-
-      assert.isTrue(annot.hasClass('is-focused'));
-    });
-
-    it('should assign a collapsed class if the annotation thread is collapsed', () => {
-      const wrapper = createComponent({ threadIsCollapsed: true });
-      const annot = wrapper.find('.Annotation');
-
-      assert.isTrue(annot.hasClass('is-collapsed'));
-    });
-  });
-
   describe('annotation quote', () => {
     it('renders quote if annotation has a quote', () => {
       fakeMetadata.quote.returns('quote');
@@ -132,7 +104,10 @@ describe('Annotation', () => {
 
     const wrapper = createComponent();
 
-    assert.include(wrapper.find('.Annotation__actions').text(), 'Saving...');
+    assert.include(
+      wrapper.find('[data-testid="saving-message"]').text(),
+      'Saving...'
+    );
   });
 
   describe('reply thread toggle', () => {