Update shared components in `ThreadCard`

src/sidebar/components/ThreadCard.js

-import { Card } from '@hypothesis/frontend-shared';
-import classnames from 'classnames';
+import { Card, CardContent } from '@hypothesis/frontend-shared/lib/next';
 import debounce from 'lodash.debounce';
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';
 
@@ -75,9 +74,8 @@ function ThreadCard({ frameSync, thread }) {
   return (
     /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
     <Card
-      classes={classnames('p-3 cursor-pointer focus-visible-ring', {
-        'is-hovered': isHovered,
-      })}
+      active={!!isHovered}
+      classes="cursor-pointer focus-visible-ring theme-clean:border-none"
       data-testid="thread-card"
       elementRef={cardRef}
       tabIndex={-1}
@@ -95,7 +93,7 @@ function ThreadCard({ frameSync, thread }) {
       onMouseLeave={() => focusThreadAnnotation(null)}
       key={thread.id}
     >
-      {threadContent}
+      <CardContent>{threadContent}</CardContent>
     </Card>
   );
 }

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

@@ -59,12 +59,14 @@ describe('ThreadCard', () => {
     assert(wrapper.find('Thread').props().thread === fakeThread);
   });
 
-  it('applies a hovered CSS class if the annotation thread is hovered', () => {
+  it('sets Card to active if the annotation thread is hovered', () => {
     fakeStore.isAnnotationHovered.returns(true);
 
     const wrapper = createComponent();
 
-    assert.isTrue(wrapper.find(threadCardSelector).hasClass('is-hovered'));
+    assert.isTrue(
+      wrapper.find('Card[data-testid="thread-card"]').props().active
+    );
   });
 
   describe('mouse and click events', () => {