From aca1067568fe859660f3b95e9af583b109660062 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 17 Aug 2019 14:33:57 -0700
Subject: [PATCH] fix: tweak colors for blurhash sensitive media button/text
 (#1389)

---
 .../status/StatusMediaAttachments.html            | 15 +++++++++++++--
 src/scss/themes/_base.scss                        |  2 ++
 src/scss/themes/_dark.scss                        |  2 ++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/routes/_components/status/StatusMediaAttachments.html b/src/routes/_components/status/StatusMediaAttachments.html
index 370771c4..56ed836b 100644
--- a/src/routes/_components/status/StatusMediaAttachments.html
+++ b/src/routes/_components/status/StatusMediaAttachments.html
@@ -7,7 +7,8 @@
           class="status-sensitive-media-button"
           aria-label="Hide sensitive media" >
     <div class="svg-wrapper">
-      <SvgIcon className="status-sensitive-media-svg" href="#fa-eye-slash" />
+      <SvgIcon className={sensitiveMediaIconClass}
+               href="#fa-eye-slash" />
     </div>
   </button>
   {:else}
@@ -22,7 +23,7 @@
         </div>
       </div>
       <div class="svg-wrapper">
-        <SvgIcon className="status-sensitive-media-svg" href="#fa-eye" />
+        <SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
       </div>
     </button>
   {/if}
@@ -126,6 +127,7 @@
     background: var(--mask-bg);
     padding: 10px;
     border-radius: 6px;
+    color: var(--blurhash-sensitive-text-color);
   }
 
   .status-sensitive-media-container .svg-wrapper {
@@ -164,6 +166,11 @@
     fill: var(--deemphasized-text-color);
     background: var(--mask-opaque-bg);
   }
+  :global(.status-sensitive-media-container.status-sensitive-media-hidden
+    .status-sensitive-media-svg.status-sensitive-media-svg-transparent) {
+    fill: var(--blurhash-sensitive-text-color);
+    background: var(--mask-bg);
+  }
 </style>
 <script>
   import MediaAttachments from './MediaAttachments.html'
@@ -206,6 +213,10 @@
       customWarningClass: ({ canUseBlurhash }) => classname(
         'status-sensitive-media-warning',
         canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'
+      ),
+      sensitiveMediaIconClass: ({ canUseBlurhash }) => classname(
+        'status-sensitive-media-svg',
+        canUseBlurhash && 'status-sensitive-media-svg-transparent'
       )
     },
     methods: {
diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss
index 84b88a9a..453b40a4 100644
--- a/src/scss/themes/_base.scss
+++ b/src/scss/themes/_base.scss
@@ -127,4 +127,6 @@
   --focal-bg-drag: #{rgba($toast-bg, 0.9)};
   --focal-bg-hover: #{lighten(rgba($toast-bg, 0.8), 5%)};
   --focal-color: #{$secondary-text-color};
+
+  --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
 }
diff --git a/src/scss/themes/_dark.scss b/src/scss/themes/_dark.scss
index 61fc31cf..850b7051 100644
--- a/src/scss/themes/_dark.scss
+++ b/src/scss/themes/_dark.scss
@@ -48,4 +48,6 @@
   --toast-anchor-color: #{$anchor-color};
 
   --length-indicator-color: var(--action-button-fill-color);
+
+  --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
 }