Transition `ThreadCard` to tailwind

Use shared `Card` component for styling

src/sidebar/components/ThreadCard.js

+import { Card } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import { useCallback, useMemo } from 'preact/hooks';
@@ -63,7 +64,11 @@ function ThreadCard({ frameSync, thread }) {
 
   return (
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
-    <div
+    <Card
+      classes={classnames('p-3 cursor-pointer', {
+        'is-focused': isFocused,
+      })}
+      data-testid="thread-card"
       onClick={e => {
         // Prevent click events intended for another action from
         // triggering a page scroll.
@@ -74,12 +79,9 @@ function ThreadCard({ frameSync, thread }) {
       onMouseEnter={() => focusThreadAnnotation(threadTag)}
       onMouseLeave={() => focusThreadAnnotation(null)}
       key={thread.id}
-      className={classnames('ThreadCard p-3', {
-        'is-focused': isFocused,
-      })}
     >
       {threadContent}
-    </div>
+    </Card>
   );
 }
 

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

@@ -11,6 +11,8 @@ describe('ThreadCard', () => {
   let fakeStore;
   let fakeThread;
 
+  const threadCardSelector = 'div[data-testid="thread-card"]';
+
   function createComponent(props) {
     return mount(
       <ThreadCard frameSync={fakeFrameSync} thread={fakeThread} {...props} />
@@ -54,14 +56,14 @@ describe('ThreadCard', () => {
 
     const wrapper = createComponent();
 
-    assert(wrapper.find('.ThreadCard').hasClass('is-focused'));
+    assert.isTrue(wrapper.find(threadCardSelector).hasClass('is-focused'));
   });
 
   describe('mouse and click events', () => {
     it('scrolls to the annotation when the `ThreadCard` is clicked', () => {
       const wrapper = createComponent();
 
-      wrapper.find('.ThreadCard').simulate('click');
+      wrapper.find(threadCardSelector).simulate('click');
 
       assert.calledWith(fakeFrameSync.scrollToAnnotation, 'myTag');
     });
@@ -69,7 +71,7 @@ describe('ThreadCard', () => {
     it('focuses the annotation thread when mouse enters', () => {
       const wrapper = createComponent();
 
-      wrapper.find('.ThreadCard').simulate('mouseenter');
+      wrapper.find(threadCardSelector).simulate('mouseenter');
 
       assert.calledWith(fakeFrameSync.focusAnnotations, sinon.match(['myTag']));
     });
@@ -77,7 +79,7 @@ describe('ThreadCard', () => {
     it('unfocuses the annotation thread when mouse exits', () => {
       const wrapper = createComponent();
 
-      wrapper.find('.ThreadCard').simulate('mouseleave');
+      wrapper.find(threadCardSelector).simulate('mouseleave');
 
       assert.calledWith(fakeFrameSync.focusAnnotations, sinon.match([]));
     });
@@ -89,10 +91,10 @@ describe('ThreadCard', () => {
         const nodeChild = document.createElement('div');
         nodeTarget.appendChild(nodeChild);
 
-        wrapper.find('.ThreadCard').props().onClick({
+        wrapper.find(threadCardSelector).props().onClick({
           target: nodeTarget,
         });
-        wrapper.find('.ThreadCard').props().onClick({
+        wrapper.find(threadCardSelector).props().onClick({
           target: nodeChild,
         });
         assert.notCalled(fakeFrameSync.scrollToAnnotation);

src/styles/sidebar/components/ThreadCard.scss

-@use '../../variables' as var;
-@use '../../mixins/layout';
-@use '../../mixins/molecules';
-@use '../../mixins/utils';
-
-.ThreadCard {
-  @include molecules.card;
-  cursor: pointer;
-}

src/styles/sidebar/components/_index.scss

@@ -24,7 +24,6 @@
 @use './SelectionTabs';
 @use './SearchInput';
 @use './StyledText';
-@use './ThreadCard';
 @use './ToastMessages';
 @use './VersionInfo';