Refactor ModerationBanner styling

Refactor applied design and layout for ModerationBanner to fix
regressions and bring component into more standard design patterns.

src/sidebar/components/ModerationBanner.js

+import { Icon, LabeledButton } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import { useStoreProxy } from '../store/use-store';
@@ -60,40 +61,58 @@ function ModerationBanner({ annotation, api, toastMessenger }) {
       });
   };
 
-  const toggleButtonProps = (() => {
-    const buttonProps = {};
-    if (annotation.hidden) {
-      buttonProps.onClick = unhideAnnotation;
-      buttonProps.title = 'Make this annotation visible to everyone';
-    } else {
-      buttonProps.onClick = hideAnnotation;
-      buttonProps.title = 'Hide this annotation from non-moderators';
-    }
-    buttonProps['aria-label'] = buttonProps.title;
-    return buttonProps;
-  })();
-
-  const bannerClasses = classnames('ModerationBanner', {
-    'is-flagged': flagCount !== null && flagCount > 0,
-    'is-hidden': annotation.hidden,
-    'is-reply': annotationMetadata.isReply(annotation),
-  });
-
   if (!isHiddenOrFlagged) {
     return null;
   }
   return (
-    <div className={bannerClasses}>
-      {!!flagCount && !annotation.hidden && (
-        <span>Flagged for review x{flagCount}</span>
-      )}
-      {annotation.hidden && (
-        <span>Hidden from users. Flagged x{flagCount}</span>
+    <div
+      className={classnames(
+        'flex gap-x-3 bg-grey-1 text-color-text font-semibold',
+        // Vertical margins should ultimately be handled by the parent, but
+        // until we can refactor outer components (e.g. `ThreadCard`), this
+        // component manages its own bottom margin
+        'mb-2 ',
+        {
+          // For top-level annotations, use negative margins to "break out" of
+          // the parent card's 3-unit padding and have the banner span the
+          // full card width with no padding
+          '-mt-3 -ml-3 -mr-3': !annotationMetadata.isReply(annotation),
+          // For replies, break out of the right padding only
+          '-mr-3': annotationMetadata.isReply(annotation),
+        }
       )}
-      <span className="hyp-u-stretch" />
-      <button {...toggleButtonProps}>
-        {annotation.hidden ? 'Unhide' : 'Hide'}
-      </button>
+    >
+      <div
+        className={classnames('p-3 text-white', {
+          'bg-red-error': !annotation.hidden,
+          'bg-grey-6': annotation.hidden,
+        })}
+      >
+        <Icon name={annotation.hidden ? 'hide' : 'flag'} />
+      </div>
+      <div className="self-center grow">
+        {!annotation.hidden && (
+          <span>
+            Flagged for review by {flagCount}{' '}
+            {flagCount === 1 ? 'user' : 'users'}
+          </span>
+        )}
+        {annotation.hidden && <span>Hidden from users</span>}
+      </div>
+      <div className="self-center pr-2">
+        <LabeledButton
+          classes="py-1 bg-slate-1"
+          onClick={annotation.hidden ? unhideAnnotation : hideAnnotation}
+          title={
+            annotation.hidden
+              ? 'Make this annotation visible to everyone'
+              : 'Hide this annotationn from non-moderators'
+          }
+          variant="dark"
+        >
+          {annotation.hidden ? 'Unhide' : 'Hide'}
+        </LabeledButton>
+      </div>
     </div>
   );
 }

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

@@ -97,31 +97,7 @@ describe('ModerationBanner', () => {
   it('displays the number of flags the annotation has received', () => {
     const ann = fixtures.moderatedAnnotation({ flagCount: 10 });
     const wrapper = createComponent({ annotation: ann });
-    assert.include(wrapper.text(), 'Flagged for review x10');
-  });
-
-  it('displays in a more compact form if the annotation is a reply', () => {
-    const wrapper = createComponent({
-      annotation: {
-        ...fixtures.oldReply(),
-        moderation: {
-          flagCount: 10,
-        },
-      },
-    });
-    wrapper.exists('.is-reply');
-  });
-
-  it('does not display in a more compact form if the annotation is not a reply', () => {
-    const wrapper = createComponent({
-      annotation: {
-        ...fixtures.moderatedAnnotation({}),
-        moderation: {
-          flagCount: 10,
-        },
-      },
-    });
-    assert.isFalse(wrapper.exists('.is-reply'));
+    assert.include(wrapper.text(), 'Flagged for review by 10 users');
   });
 
   it('reports if the annotation was hidden', () => {

src/sidebar/icons.js

@@ -22,6 +22,7 @@ import {
   globe,
   groups,
   help,
+  hide,
   highlight,
   image,
   leave,
@@ -84,6 +85,7 @@ export const sidebarIcons = {
   'format-quote': editorQuote,
   groups,
   help,
+  hide,
   highlight,
   image,
   leave,

tailwind.config.mjs

@@ -11,6 +11,9 @@ export default {
   theme: {
     extend: {
       colors: {
+        slate: {
+          // TODO remove when available from upstream preset
+          1: '#e3e3e5',
         },
       },
       fontFamily: {