From 9e5d944df3947aa71a72cd2f89eaf644c75a78f3 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Wed, 3 Apr 2019 17:54:47 +0200
Subject: [PATCH] Fix connection health in light theme

---
 app/src/components/ConnectionHealthIndicator.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/src/components/ConnectionHealthIndicator.tsx b/app/src/components/ConnectionHealthIndicator.tsx
index cfd33c8..c7d7d85 100644
--- a/app/src/components/ConnectionHealthIndicator.tsx
+++ b/app/src/components/ConnectionHealthIndicator.tsx
@@ -18,15 +18,20 @@ const styles: StyleRulesCallback = theme => ({
     color: orange[600],
   },
   icon: {
-    boxShadow: theme.shadows[10],
-    padding: '4px', borderRadius: '50%', backgroundColor: '#eee'
-  }
+    boxShadow: theme.shadows[2].split('),').map(s => `inset ${s}`).join('),'),
+    padding: '6px',
+    borderRadius: '50%',
+    backgroundColor: '#eee',
+    width: '35px',
+    height: '35px',
+  },
 })
 
 interface Props {
   classes: any
   connected: boolean
   health?: ConnectionHealth
+  withBackground?: boolean
 }
 
 class ConnectionHealthIndicator extends React.Component<Props, {}> {
@@ -42,9 +47,7 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {
 
     return (
       <Tooltip title={`Connection health "${health}"`}>
-        <div className={classes.icon}>
-          <DeviceHubOutlined className={classes[health]} />
-        </div>
+        <DeviceHubOutlined className={`${[classes[health]]} ${this.props.withBackground ? classes.icon : ''}`} />
       </Tooltip>
     )
   }