From 2efbd1ae5996e84abfd4fdc0d835eb429f619ee0 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Fri, 2 Feb 2018 18:19:42 -0500
Subject: [PATCH] Change how user-specific badge overrides are rendered so that
 a transparent image badge looks correct no matter what badge style is
 enabled.

---
 changelog.html             | 2 +-
 src/modules/chat/badges.js | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/changelog.html b/changelog.html
index 3a6f491c..c545a944 100644
--- a/changelog.html
+++ b/changelog.html
@@ -13,7 +13,7 @@
 	<li>Fixed: Apollo caching modified queries when it shouldn't, causing additional data requested by FFZ including stream up-time to not be fetched.</li>
 </ul>
 
-<div class="list-header">4.0.0-beta1.5<span>@fe7bd1b3bbdba43c0666</span> <time datetime="2018-02-01">(2018-02-01)</time></div>
+<div class="list-header">4.0.0-beta1.5<span>@a072b3e2b1e9dd395378</span> <time datetime="2018-02-01">(2018-02-01)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Part two of the fixes for the new Apollo version. FFZ should now be loading data mostly correctly.</li>
 	<li>Bug: The directory features are not currently working unless you navigate to it from another page.</li>
diff --git a/src/modules/chat/badges.js b/src/modules/chat/badges.js
index d684021f..654f7ebb 100644
--- a/src/modules/chat/badges.js
+++ b/src/modules/chat/badges.js
@@ -301,6 +301,8 @@ export default class Badges extends Module {
 					continue;
 
 				const style = {},
+					color = badge.color || full_badge.color || 'transparent',
+					masked = color !== 'transparent' && is_mask,
 					props = {
 						className: 'ffz-tooltip ffz-badge',
 						'data-tooltip-type': 'badge',
@@ -314,13 +316,13 @@ export default class Badges extends Module {
 					if ( urls[2] || urls[4] )
 						image_set = `${WEBKIT}image-set(${image} 1x${urls[2] ? `, url("${urls[2]}") 2x` : ''}${urls[4] ? `, url("${urls[4]}") 4x` : ''})`;
 
-					style[is_mask ? CSS_MASK_IMAGE : 'backgroundImage'] = image;
+					style[masked ? CSS_MASK_IMAGE : 'backgroundImage'] = image;
 					if ( image_set )
-						style[is_mask ? CSS_MASK_IMAGE : 'backgroundImage'] = image_set;
+						style[masked ? CSS_MASK_IMAGE : 'backgroundImage'] = image_set;
 				}
 
 				if ( is_colored && badge.color ) {
-					if ( is_mask )
+					if ( masked )
 						style.backgroundImage = `linear-gradient(${badge.color},${badge.color})`;
 					else
 						style.backgroundColor = badge.color;