Transition `WarningBanner` to tailwind; update to shared components

src/annotator/components/WarningBanner.js

-import { SvgIcon } from '@hypothesis/frontend-shared';
+import { Icon, Link } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 
 /**
  * A banner shown at the top of the PDF viewer if the PDF cannot be annotated
@@ -6,20 +7,26 @@ import { SvgIcon } from '@hypothesis/frontend-shared';
  */
 export default function WarningBanner() {
   return (
-    <div className="WarningBanner WarningBanner--notice">
-      <div className="WarningBanner__type">
-        <SvgIcon name="caution" className="WarningBanner__icon" />
-      </div>
-      <div className="WarningBanner__message">
-        <strong>This PDF does not contain selectable text:</strong>{' '}
-        <a
-          target="_blank"
-          rel="noreferrer"
-          href="https://web.hypothes.is/help/how-to-ocr-optimize-pdfs/"
-        >
-          Learn how to fix this
-        </a>{' '}
-        in order to annotate with Hypothesis.
+    <div className="bg-white">
+      <div
+        className={classnames(
+          'flex items-center gap-x-2',
+          'border border-yellow-notice bg-yellow-notice/10 text-annotator-base'
+        )}
+      >
+        <div className="bg-yellow-notice text-white p-2">
+          <Icon name="caution" classes="text-annotator-xl" />
+        </div>
+        <div>
+          <strong>This PDF does not contain selectable text:</strong>{' '}
+          <Link
+            target="_blank"
+            href="https://web.hypothes.is/help/how-to-ocr-optimize-pdfs/"
+          >
+            Learn how to fix this
+          </Link>{' '}
+          in order to annotate with Hypothesis.
+        </div>
       </div>
     </div>
   );

src/styles/annotator/components/WarningBanner.scss

-@use '../mixins/molecules';
-@use '../variables' as var;
-
-.WarningBanner {
-  @include molecules.banner;
-  font-size: var.$annotator-adder-font-size;
-}

src/styles/annotator/components/_index.scss

 @use 'tailwindcss/components';
 @use '@hypothesis/frontend-shared/styles';
 
-// Extensions and overrides to patterns from `frontend-shared`
-@use '../../frontend-shared';
-
 // Annotator-specific components.
 @use './AdderToolbar';
 @use './Buckets';
-@use './WarningBanner';

tailwind.config.mjs

@@ -52,6 +52,7 @@ export default {
         // remain as pixels when sidebar converts to rems or otherwise be
         // independent of sidebar font sizes
         'annotator-sm': ['12px'],
+        'annotator-base': ['14px'],
         'annotator-lg': ['16px'],
         'annotator-xl': ['18px'],
       },