From e7031509824a0c9f447fc74529dd3d65bef1a99d Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Sat, 25 Mar 2017 00:27:04 +0100
Subject: [PATCH] Hides lion badge when count is 0

Resolves #7873

Auditors: @bsclifton @luixxiul

Test Plan:
- go to brave.com
- badge should be hidden
---
 js/components/main.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/components/main.js b/js/components/main.js
index 569903e9f0..559720e296 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -886,7 +886,7 @@ class Main extends ImmutableComponent {
     const trackers = frames.getIn(['trackingProtection', 'blocked'])
     const blocked = (ads ? ads.size : 0) + (trackers ? trackers.size : 0)
 
-    return (blocked > 99) ? '99+' : blocked
+    return (blocked.size === 0) ? false : ((blocked > 99) ? '99+' : blocked)
   }
 
   render () {
@@ -945,6 +945,7 @@ class Main extends ImmutableComponent {
 
     const appStateSites = this.props.appState.get('sites')
     const activeTabShowingMessageBox = !!(activeTab && activeTab.get('messageBoxDetail'))
+    const totalBlocks = this.getTotalBlocks(activeFrame)
 
     return <div id='window'
       className={cx({
@@ -1077,9 +1078,9 @@ class Main extends ImmutableComponent {
                   : null
                 }
                 {
-                  !this.braveShieldsDisabled
+                  !this.braveShieldsDisabled && totalBlocks
                   ? <div className={css(styles.lionBadge)} data-test-id='lionBadge'>
-                    {this.getTotalBlocks(activeFrame)}
+                    {totalBlocks}
                   </div>
                   : null
                 }
@@ -1370,7 +1371,8 @@ const styles = StyleSheet.create({
     font: '7pt "Arial Narrow"',
     textAlign: 'center',
     border: '.5px solid #FFF',
-    background: '#555555'
+    background: '#555555',
+    minWidth: '9px'
   }
 })