Refactor SidebarContentError as Panel, with shared LabeledButtons

src/sidebar/components/SidebarContentError.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
-import classnames from 'classnames';
-
 import { useStoreProxy } from '../store/use-store';
 
-import Button from './Button';
+import { LabeledButton } from '../../shared/components/buttons';
+
+import Panel from './Panel';
 
 /**
  * @typedef SidebarContentErrorProps
@@ -43,35 +42,23 @@ export default function SidebarContentError({
   })();
 
   return (
-    <div className="SidebarContentError">
-      <div className="SidebarContentError__header">
-        <div className="SidebarContentError__header-icon">
-          <SvgIcon name="restricted" title={errorTitle} />
-        </div>
-        <div className="SidebarContentError__title u-stretch">{errorTitle}</div>
-      </div>
-      <div className="SidebarContentError__content">
-        <p>{errorMessage}</p>
-        <div className="SidebarContentError__actions">
-          {showClearSelection && (
-            <Button
-              buttonText="Show all annotations"
-              className={classnames({
-                SidebarContentError__button: !isLoggedIn,
-                'SidebarContentError__button--primary': isLoggedIn,
-              })}
-              onClick={() => store.clearSelection()}
-            />
-          )}
-          {!isLoggedIn && (
-            <Button
-              buttonText="Log in"
-              className="SidebarContentError__button--primary"
-              onClick={onLoginRequest}
-            />
-          )}
-        </div>
+    <Panel icon="restricted" title={errorTitle}>
+      <p>{errorMessage}</p>
+      <div className="u-layout-row--justify-right u-horizontal-rhythm">
+        {showClearSelection && (
+          <LabeledButton
+            variant={isLoggedIn ? 'primary' : undefined}
+            onClick={() => store.clearSelection()}
+          >
+            Show all annotations
+          </LabeledButton>
+        )}
+        {!isLoggedIn && (
+          <LabeledButton variant="primary" onClick={onLoginRequest}>
+            Log in
+          </LabeledButton>
+        )}
       </div>
-    </div>
+    </Panel>
   );
 }

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

@@ -35,11 +35,10 @@ describe('SidebarContentError', () => {
   });
 
   const findButtonByText = (wrapper, text) => {
-    return wrapper.find('Button').filter({ buttonText: text });
-  };
-
-  const errorText = wrapper => {
-    return wrapper.find('.SidebarContentError__content').text();
+    return wrapper
+      .find('LabeledButton')
+      .filterWhere(button => button.text() === text)
+      .at(0);
   };
 
   it('should provide a button to clear the selection (show all annotations)', () => {
@@ -50,6 +49,7 @@ describe('SidebarContentError', () => {
     });
 
     const clearButton = findButtonByText(wrapper, 'Show all annotations');
+
     assert.isTrue(clearButton.exists());
 
     clearButton.props().onClick();
@@ -63,10 +63,10 @@ describe('SidebarContentError', () => {
       const wrapper = createComponent();
 
       assert.include(
-        errorText(wrapper),
+        wrapper.text(),
         'The annotation associated with the current URL is unavailable'
       );
-      assert.include(errorText(wrapper), 'You may need to log in');
+      assert.include(wrapper.text(), 'You may need to log in');
     });
 
     it('should render a log in button', () => {
@@ -88,10 +88,10 @@ describe('SidebarContentError', () => {
       const wrapper = createComponent();
 
       assert.include(
-        errorText(wrapper),
+        wrapper.text(),
         'The current URL links to an annotation, but that annotation'
       );
-      assert.notInclude(errorText(wrapper), 'You may need to log in');
+      assert.notInclude(wrapper.text(), 'You may need to log in');
     });
 
     it('should not provide an option to log in', () => {
@@ -111,10 +111,10 @@ describe('SidebarContentError', () => {
       const wrapper = createComponent({ errorType: 'group' });
 
       assert.include(
-        errorText(wrapper),
+        wrapper.text(),
         'The group associated with the current URL is unavailable'
       );
-      assert.include(errorText(wrapper), 'You may need to log in');
+      assert.include(wrapper.text(), 'You may need to log in');
     });
 
     it('should provide option to log in', () => {
@@ -134,10 +134,10 @@ describe('SidebarContentError', () => {
       const wrapper = createComponent({ errorType: 'group' });
 
       assert.include(
-        errorText(wrapper),
+        wrapper.text(),
         'The current URL links to a group, but that group'
       );
-      assert.notInclude(errorText(wrapper), 'You may need to log in');
+      assert.notInclude(wrapper.text(), 'You may need to log in');
     });
 
     it('should not provide an option to log in', () => {

src/styles/sidebar/components/SidebarContentError.scss

-@use "../../mixins/molecules";
-@use "../../variables" as var;
-
-.SidebarContentError {
-  @include molecules.panel;
-  position: relative;
-  margin-bottom: 0.75em;
-}

src/styles/sidebar/sidebar.scss

@@ -56,7 +56,6 @@
 @use './components/ShareAnnotationsPanel';
 @use './components/SearchInput';
 @use './components/ShareLinks';
-@use './components/SidebarContentError';
 @use './components/Spinner';
 @use './components/TagEditor';
 @use './components/TagList';