Move `AnnotationBody` and `AnnotationQuote` styles into own files

 - Move the styles for these components out of `annotation.scss` and into
   separate files to follow project conventions.

 - Refactor style names to use BEM-ish naming conventions

There are some exceptions here because annotation body and quote
elements have styles that are customized when the annotation is a reply
or when the annotation card is hovered. Those customizations are still
in annotation.scss because they need to match both the parent and child
components.

src/sidebar/components/annotation-body.js

@@ -33,7 +33,8 @@ function AnnotationBody({
           <MarkdownView
             markdown={text}
             textClass={{
-              'annotation-body is-hidden': isHiddenByModerator,
+              'annotation-body__text': true,
+              'is-hidden': isHiddenByModerator,
               'has-content': text.length > 0,
             }}
           />

src/sidebar/components/annotation-quote.js

@@ -14,7 +14,7 @@ const Excerpt = require('./excerpt');
 function AnnotationQuote({ isOrphan, quote, settings = {} }) {
   return (
     <section
-      className={classnames('annotation-quote-list', isOrphan && 'is-orphan')}
+      className={classnames('annotation-quote', isOrphan && 'is-orphan')}
     >
       <Excerpt
         collapsedHeight={35}
@@ -22,7 +22,7 @@ function AnnotationQuote({ isOrphan, quote, settings = {} }) {
         overflowThreshold={20}
       >
         <blockquote
-          className="annotation-quote"
+          className="annotation-quote__quote"
           style={applyTheme(['selectionFontFamily'], settings)}
         >
           {quote}

src/styles/sidebar/components/annotation-body.scss

+@use '../../variables' as var;
+
+.annotation-body {
+  @include var.font-normal;
+  color: var.$grey-6;
+  // Margin between top of ascent of annotation body and
+  // bottom of ascent of annotation-quote should be ~15px.
+  margin-top: var.$layout-h-margin - 5px;
+  margin-bottom: var.$layout-h-margin;
+  margin-right: 0px;
+  margin-left: 0px;
+}
+
+.annotation-body__text {
+  // Hidden annotations displayed to moderators, where the content is still
+  // present.
+  &.is-hidden.has-content {
+    text-decoration: line-through;
+    filter: grayscale(100%) contrast(65%);
+  }
+
+  // Hidden annotations displayed to non-moderators, where the content has been
+  // filtered out by the service.
+  &.is-hidden:not(.has-content) {
+    // Create a column of horizontal stripes, giving the impression of text
+    // underneath that has been censored.
+    display: block;
+    height: 60px;
+    width: 100vw;
+    background: repeating-linear-gradient(
+      to bottom,
+      var.$grey-2,
+      var.$grey-2 15px,
+      white 15px,
+      white 20px
+    );
+  }
+}

src/styles/sidebar/components/annotation-quote.scss

+@use '../../variables' as var;
+
+.annotation-quote {
+  // Margin between top of ascent of annotation quote and
+  // bottom of ascent of username should be ~15px
+  margin-top: var.$layout-h-margin - 5px;
+  // Margin between bottom of ascent of annotation quote and
+  // top of ascent of annotation-body should be ~15px
+  margin-bottom: var.$layout-h-margin - 3px;
+}
+
+.annotation-quote.is-orphan {
+  text-decoration: line-through;
+}
+
+.annotation-quote__quote {
+  @include var.font-normal;
+
+  border-left: 3px solid var.$gray-lighter;
+  color: var.$grey-4;
+  font-family: sans-serif;
+  font-size: 12px;
+  font-style: italic;
+  letter-spacing: 0.1px;
+  padding: 0 1em;
+
+  // Prevent long URLs etc. in quote causing overflow
+  overflow-wrap: break-word;
+}

src/styles/sidebar/components/annotation.scss

@@ -2,20 +2,8 @@
 @use "../../mixins/icons";
 @use "../../variables" as var;
 
-@mixin quote {
-  @include var.font-normal;
-
-  border-left: 3px solid var.$gray-lighter;
-  color: var.$grey-4;
-  font-family: sans-serif;
-  font-size: 12px;
-  font-style: italic;
-  letter-spacing: 0.1px;
-  padding: 0 1em;
-}
-
 // Highlight quote of annotation whenever its thread is hovered
-.thread-list__card:hover .annotation-quote {
+.thread-list__card:hover .annotation-quote__quote {
   border-left: var.$highlight 3px solid;
 }
 
@@ -72,45 +60,10 @@
   }
 }
 
-.annotation-quote-list,
 .annotation-footer {
   @include forms.pie-clearfix;
 }
 
-.annotation-body {
-  @include var.font-normal;
-  color: var.$grey-6;
-  // Margin between top of ascent of annotation body and
-  // bottom of ascent of annotation-quote should be ~15px.
-  margin-top: var.$layout-h-margin - 5px;
-  margin-bottom: var.$layout-h-margin;
-  margin-right: 0px;
-  margin-left: 0px;
-}
-
-// Hidden annotations displayed to moderators, where the content is still
-// present.
-.annotation-body.is-hidden.has-content {
-  text-decoration: line-through;
-  filter: grayscale(100%) contrast(65%);
-}
-
-// Hidden annotations displayed to non-moderators, where the content has been
-// filtered out by the service.
-.annotation-body.is-hidden:not(.has-content) {
-  // Create a column of horizontal stripes, giving the impression of text
-  // underneath that has been censored.
-  display: block;
-  height: 60px;
-  background: repeating-linear-gradient(
-    to bottom,
-    var.$grey-2,
-    var.$grey-2 15px,
-    white 15px,
-    white 20px
-  );
-}
-
 // the footer at the bottom of an annotation displaying
 // the annotation actions and reply counts
 .annotation-footer {
@@ -123,19 +76,6 @@
   flex-grow: 1;
 }
 
-.annotation-quote-list {
-  // Margin between top of ascent of annotation quote and
-  // bottom of ascent of username should be ~15px
-  margin-top: var.$layout-h-margin - 5px;
-  // Margin between bottom of ascent of annotation quote and
-  // top of ascent of annotation-body should be ~15px
-  margin-bottom: var.$layout-h-margin - 3px;
-}
-
-.annotation-quote-list.is-orphan {
-  text-decoration: line-through;
-}
-
 .annotation-media-embed {
   width: 369px;
   height: 208px;
@@ -169,13 +109,6 @@
   }
 }
 
-.annotation-quote {
-  @include quote;
-
-  // Prevent long URLs etc. in quote causing overflow
-  overflow-wrap: break-word;
-}
-
 .annotation-citation-domain {
   color: var.$gray-light;
   font-size: var.$body1-font-size;

src/styles/sidebar/sidebar.scss

@@ -26,11 +26,13 @@
 // ----------
 @use './components/action-button';
 @use './components/annotation';
+@use './components/annotation-body';
 @use './components/annotation-document-info';
 @use './components/annotation-header';
+@use './components/annotation-publish-control';
+@use './components/annotation-quote';
 @use './components/annotation-share-control';
 @use './components/annotation-share-info';
-@use './components/annotation-publish-control';
 @use './components/annotation-thread';
 @use './components/annotation-user';
 @use './components/excerpt';