highlight favicon on dark colored background

- Auditors: @bradleyrichter - Fix brave#7635
NejcZdovc · Apr 18, 2017 · 9dfec91 · 9dfec91
1 parent 997b106
commit 9dfec91
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -80,7 +80,8 @@ const globalStyles = {
     alphaWhite: 'rgba(255,255,255,0.8)'
   },
   filter: {
-    makeWhite: 'brightness(0) invert(1)'
+    makeWhite: 'brightness(0) invert(1)',
+    whiteShadow: 'drop-shadow(0px 0px 2px rgb(255, 255, 255))'
   },
   radius: {
     borderRadius: '4px',

diff --git a/app/renderer/components/tabs/content/favIcon.js b/app/renderer/components/tabs/content/favIcon.js
@@ -41,7 +41,8 @@ class Favicon extends ImmutableComponent {
   render () {
     const iconStyles = StyleSheet.create({
       favicon: {
-        backgroundImage: `url(${this.favicon})`
+        backgroundImage: `url(${this.favicon})`,
+        filter: getTabIconColor(this.props) === 'white' ? globalStyles.filter.whiteShadow : 'none'
       },
       loadingIconColor: {
         // Don't change icon color unless when it should be white