fix(design): use dark compose button halo on dark themes (#714)

Also only show the halo when we're actually scrolled down, because the
point is to make it more visible against arbitrary content.

routes/_components/compose/ComposeButton.html

@@ -1,4 +1,4 @@
-<div class="compose-box-button-halo">
+<div class="compose-box-button-halo {sticky ? 'compose-box-button-halo-sticky' : ''}">
   <button class="primary compose-box-button"
           {disabled}
           aria-label={sticky ? 'Compose' : 'Toot!'}
@@ -25,9 +25,11 @@
   .compose-box-button-halo {
     border-radius: 2px;
     margin: 5px 15px 15px 5px;
-    background: var(--compose-button-halo);
     pointer-events: auto;
   }
+  .compose-box-button-halo-sticky {
+    background-color: var(--compose-button-halo);
+  }
   .compose-box-button {
     grid-area: button;
     justify-self: right;

scss/themes/_dark.scss

@@ -24,7 +24,7 @@
   --muted-modal-focus: #{#999};
   --muted-modal-hover: #{rgba(255, 255, 255, 0.2)};
 
-  --compose-button-halo: #{rgba(255, 255, 255, 0.1)};
+  --compose-button-halo: #{rgba(0, 0, 0, 0.1)};
 
   --compose-autosuggest-item-hover: #{lighten($main-bg-color, 10%)};
   --compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};