Extract style patterns from AnnotationBody

src/sidebar/components/annotation-body.js

@@ -50,7 +50,6 @@ export default function AnnotationBody({
             textClass={{
               'annotation-body__text': true,
               'is-hidden': isHidden(annotation),
-              'has-content': text.length > 0,
             }}
           />
         </Excerpt>

src/styles/mixins/layout.scss

@@ -78,3 +78,13 @@
     margin-top: var.$layout-margin;
   }
 }
+
+/**
+ * Establish vertical space outside of elements in the container
+ *
+ * @param $size [var.$layout-margin--medium]: Spacing size (padding)
+ */
+@mixin vertical-space($size: var.$layout-margin--medium) {
+  padding-top: $size;
+  padding-bottom: $size;
+}

src/styles/mixins/molecules.scss

@@ -67,29 +67,9 @@
  * A pattern for displaying redacted (moderated) text content
  */
 @mixin redacted-content {
-  // Hidden annotations displayed to moderators, where the content is still
-  // present.
-  &.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.
-  &: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
-    );
-  }
+  text-decoration: line-through;
+  // Make any images within this content greyscale, and low-contrast
+  filter: grayscale(100%) contrast(65%);
 }
 
 /**

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

@@ -11,10 +11,12 @@
 
 .annotation-body__collapse-toggle {
   @include layout.row(right);
-  margin: var.$layout-margin--small 0;
+  @include layout.vertical-space(var.$layout-margin--small);
 
   .annotation-body__collapse-toggle-button {
     @include buttons.button--labeled;
+    // The button should not have a background color except when hovered/active:
+    // It should look like text only
     background-color: transparent;
   }
 }