From 26b84c435abd5b4f980bc202e75f29c136d20773 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 2 Dec 2018 14:25:40 -0800
Subject: [PATCH] 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 | 8 +++++---
 scss/themes/_dark.scss                        | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/routes/_components/compose/ComposeButton.html b/routes/_components/compose/ComposeButton.html
index 20459b12..2d5b9727 100644
--- a/routes/_components/compose/ComposeButton.html
+++ b/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;
@@ -71,4 +73,4 @@
       disabled: ({ $postingStatus, overLimit }) => $postingStatus || overLimit
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
index 45e40002..e3e9c768 100644
--- a/scss/themes/_dark.scss
+++ b/scss/themes/_dark.scss
@@ -24,9 +24,9 @@
   --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%)};
   --compose-autosuggest-outline: #{lighten($border-color, 20%)};
-}
\ No newline at end of file
+}