Migrate `NotebookModal` styles to TW, remove external SASS

src/annotator/components/NotebookModal.js

@@ -27,7 +27,7 @@ function NotebookIframe({ config, groupId }) {
   return (
     <iframe
       title={'Hypothesis annotation notebook'}
-      className="NotebookIframe"
+      className="h-full w-full border-0"
       // Enable media in annotations to be shown fullscreen
       allowFullScreen
       src={notebookAppSrc}
@@ -104,10 +104,14 @@ export default function NotebookModal({ eventBus, config }) {
 
   return (
     <div
-      className={classnames('NotebookModal__outer', { 'is-hidden': isHidden })}
+      className={classnames(
+        'fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50',
+        { hidden: isHidden }
+      )}
+      data-testid="notebook-outer"
     >
-      <div className="NotebookModal__inner">
-        <div className="NotebookModal__close-button-container">
+      <div className="relative w-full h-full" data-testid="notebook-inner">
+        <div className="absolute right-0 text-xl m-3">
           <IconButton
             icon="cancel"
             title="Close the Notebook"

src/annotator/components/test/NotebookModal-test.js

@@ -12,6 +12,8 @@ describe('NotebookModal', () => {
   let eventBus;
   let emitter;
 
+  const outerSelector = '[data-testid="notebook-outer"]';
+
   const createComponent = config => {
     const component = mount(
       <NotebookModal
@@ -46,14 +48,14 @@ describe('NotebookModal', () => {
 
   it('hides modal on first render', () => {
     const wrapper = createComponent();
-    const outer = wrapper.find('.NotebookModal__outer');
+    const outer = wrapper.find(outerSelector);
 
     assert.isFalse(outer.exists());
   });
 
   it('shows modal on "openNotebook" event', () => {
     const wrapper = createComponent();
-    let outer = wrapper.find('.NotebookModal__outer');
+    let outer = wrapper.find(outerSelector);
 
     assert.isFalse(outer.exists());
     assert.isFalse(wrapper.find('iframe').exists());
@@ -61,8 +63,8 @@ describe('NotebookModal', () => {
     emitter.publish('openNotebook', 'myGroup');
     wrapper.update();
 
-    outer = wrapper.find('.NotebookModal__outer');
-    assert.isFalse(outer.hasClass('is-hidden'));
+    outer = wrapper.find(outerSelector);
+    assert.isFalse(outer.hasClass('hidden'));
 
     const iframe = wrapper.find('iframe');
     assert.equal(
@@ -118,17 +120,17 @@ describe('NotebookModal', () => {
     emitter.publish('openNotebook', 'myGroup');
     wrapper.update();
 
-    let outer = wrapper.find('.NotebookModal__outer');
-    assert.isFalse(outer.hasClass('is-hidden'));
+    let outer = wrapper.find(outerSelector);
+    assert.isFalse(outer.hasClass('hidden'));
 
     act(() => {
       wrapper.find('IconButton').prop('onClick')();
     });
     wrapper.update();
 
-    outer = wrapper.find('.NotebookModal__outer');
+    outer = wrapper.find(outerSelector);
 
-    assert.isTrue(outer.hasClass('is-hidden'));
+    assert.isTrue(outer.hasClass('hidden'));
   });
 
   it('resets document scrollability on closing the modal', () => {

src/styles/annotator/components/NotebookModal.scss

-@use '../variables' as var;
-@use '../mixins/molecules';
-@use '../mixins/buttons';
-
-.NotebookModal {
-  &__outer {
-    box-sizing: border-box;
-    position: fixed;
-    // This large zIndex is used to bring the notebook to the front, so it is not
-    // hidden by other elements from the host page. It is the same value used by
-    // the sidebar
-    z-index: 2147483647;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: var.$layout-space;
-
-    // TBD: Actual opacity/overlay we'd like to use
-    background-color: rgba(0, 0, 0, 0.5);
-
-    &.is-hidden {
-      display: none;
-    }
-  }
-
-  &__inner {
-    position: relative;
-    box-sizing: border-box;
-    @include molecules.card-frame;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-
-  &__close-button-container {
-    position: absolute;
-    right: 0;
-    font-size: var.$font-size--heading;
-    margin: var.$layout-space--medium;
-  }
-
-  &__close-button-container > button {
-    cursor: pointer;
-  }
-}
-
-.NotebookIframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}

src/styles/annotator/components/_index.scss

@@ -7,5 +7,4 @@
 // Annotator-specific components.
 @use './AdderToolbar';
 @use './Buckets';
-@use './NotebookModal';
 @use './WarningBanner';

tailwind.config.mjs

@@ -86,6 +86,7 @@ export default {
       zIndex: {
         1: '1',
         2: '2',
+        max: '2147483647',
       },
     },
   },