Move styles to NotebookModal.scss

The styles in `notebook.scss` really belonged to the `NotebookModal`
component. I moved these styles into their own file in the component
folder.

The are no changes in the look an feel. The styles were copied almost
verbatim from `notebook.scss`.

src/annotator/components/NotebookModal.js

@@ -25,7 +25,7 @@ function NotebookIframe({ config, groupId }) {
   return (
     <iframe
       title={'Hypothesis annotation notebook'}
-      className="Notebook__iframe"
+      className="NotebookIframe"
       // Enable media in annotations to be shown fullscreen
       allowFullScreen
       src={notebookAppSrc}
@@ -99,9 +99,11 @@ export default function NotebookModal({ eventBus, config }) {
   };
 
   return (
-    <div className={classnames('Notebook__outer', { 'is-hidden': isHidden })}>
-      <div className="Notebook__inner">
-        <div className="Notebook__close-button-container">
+    <div
+      className={classnames('NotebookModal__outer', { 'is-hidden': isHidden })}
+    >
+      <div className="NotebookModal__inner">
+        <div className="NotebookModal__close-button-container">
           <LabeledButton
             icon="cancel"
             title="Close the Notebook"

src/styles/annotator/annotator.scss

@@ -16,10 +16,10 @@
 // Annotator-specific components.
 @use './components/AdderToolbar';
 @use './components/Buckets';
+@use './components/NotebookModal';
 @use './components/Toolbar';
 @use './components/WarningBanner';
 @use './highlights';
-@use './notebook';
 
 // Sidebar
 .annotator-frame {

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--large;
+    margin: var.$layout-space--xsmall;
+    cursor: pointer;
+  }
+}
+
+.NotebookIframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}

src/styles/annotator/notebook.scss

-@use '../variables' as var;
-@use '../mixins/molecules';
-@use "../mixins/buttons";
-
-.Notebook__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;
-  }
-}
-
-.Notebook__inner {
-  position: relative;
-  box-sizing: border-box;
-  @include molecules.card-frame;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
-.Notebook__iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-}
-
-.Notebook__close-button-container {
-  position: absolute;
-  right: 0;
-  font-size: var.$font-size--large;
-  margin: var.$layout-space--xsmall;
-  cursor: pointer;
-}