Convert remaining Annotation* components to tailwind

Fix height-jumping issue with saving message in Annotation

src/sidebar/components/Annotation/Annotation.js

-import { Actions } from '@hypothesis/frontend-shared';
+import { Actions, Spinner } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 
 import { useStoreProxy } from '../../store/use-store';
@@ -18,6 +18,23 @@ import AnnotationReplyToggle from './AnnotationReplyToggle';
  * @typedef {import('../../../types/api').Group} Group
  */
 
+function SavingMessage() {
+  return (
+    <div
+      className={classnames(
+        'flex grow justify-end items-center gap-x-1',
+        // Make sure height matches that of action-bar icons so that there
+        // isn't a height change when transitioning in and out of saving state
+        'h-8 touch:h-touch-minimum'
+      )}
+      data-testid="saving-message"
+    >
+      <Spinner classes="text-xl" size="small" />
+      <div className="text-color-text-light font-medium">Saving...</div>
+    </div>
+  );
+}
+
 /**
  * @typedef AnnotationProps
  * @prop {Annotation} [annotation] - The annotation to render. If undefined,
@@ -57,8 +74,10 @@ function Annotation({
   const isEditing = annotation && !!draft && !isSaving;
 
   const userid = store.profile().userid;
-  const showActions = !isSaving && !isEditing;
-  const showReplyToggle = !isReply && !hasAppliedFilter && replyCount > 0;
+  const showActions =
+    annotation && !isSaving && !isEditing && isSaved(annotation);
+  const showReplyToggle =
+    !isReply && !isEditing && !hasAppliedFilter && replyCount > 0;
 
   const onReply = () => {
     if (annotation && isSaved(annotation)) {
@@ -67,12 +86,7 @@ function Annotation({
   };
 
   return (
-    <article
-      className={classnames('hyp-u-vertical-spacing', {
-        'is-collapsed': threadIsCollapsed,
-        'is-focused': isFocused,
-      })}
-    >
+    <article className="space-y-4">
       {annotation && (
         <>
           <AnnotationHeader
@@ -107,32 +121,20 @@ function Annotation({
       )}
 
       {!isCollapsedReply && (
-        <footer>
-          <div className="hyp-u-layout-row">
-            {showReplyToggle && (
-              <AnnotationReplyToggle
-                onToggleReplies={onToggleReplies}
-                replyCount={replyCount}
-                threadIsCollapsed={threadIsCollapsed}
-              />
-            )}
-            {isSaving && (
-              <div
-                className="hyp-u-layout-row--justify-right hyp-u-stretch"
-                data-testid="saving-message"
-              >
-                Saving...
-              </div>
-            )}
-            {annotation && showActions && isSaved(annotation) && (
-              <Actions classes="hyp-u-stretch">
-                <AnnotationActionBar
-                  annotation={annotation}
-                  onReply={onReply}
-                />
-              </Actions>
-            )}
-          </div>
+        <footer className="flex items-center">
+          {showReplyToggle && (
+            <AnnotationReplyToggle
+              onToggleReplies={onToggleReplies}
+              replyCount={replyCount}
+              threadIsCollapsed={threadIsCollapsed}
+            />
+          )}
+          {isSaving && <SavingMessage />}
+          {showActions && (
+            <Actions classes="grow">
+              <AnnotationActionBar annotation={annotation} onReply={onReply} />
+            </Actions>
+          )}
         </footer>
       )}
     </article>

src/sidebar/components/Annotation/AnnotationActionBar.js

@@ -109,7 +109,7 @@ function AnnotationActionBar({
   };
 
   return (
-    <div className="AnnotationActionBar hyp-u-layout-row text-xl font-medium">
+    <div className="flex text-xl" data-testid="annotation-action-bar">
       {showEditAction && (
         <IconButton icon="edit" title="Edit" onClick={onEdit} />
       )}

src/sidebar/components/Annotation/AnnotationLicense.js

@@ -5,16 +5,16 @@ import { Icon, Link } from '@hypothesis/frontend-shared';
  */
 export default function AnnotationLicense() {
   return (
-    <div className="hyp-u-padding--top hyp-u-border--top text-sm leading-none">
+    <div className="pt-2 border-t text-sm leading-none">
       <Link
-        classes="hyp-u-layout-row--align-center p-link--muted"
+        classes="flex items-center text-color-text-light"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         target="_blank"
         title="View more information about the Creative Commons Public Domain dedication"
       >
         <Icon name="cc-std" classes="text-tiny" />
-        <Icon name="cc-zero" classes="hyp-u-margin--left--1 text-tiny" />
-        <div className="hyp-u-margin--left--2">
+        <Icon name="cc-zero" classes="ml-px text-tiny" />
+        <div className="ml-1">
           Annotations can be freely reused by anyone for any purpose.
         </div>
       </Link>