From ab8365b1f76c14b6661afa3f86f9b287a23d8059 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Wed, 10 Apr 2019 13:59:57 +0200
Subject: [PATCH] Fix pause icon alignment

---
 app/src/components/Demo/Mouse.tsx         | 6 +++---
 app/src/components/Layout/PauseButton.tsx | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/src/components/Demo/Mouse.tsx b/app/src/components/Demo/Mouse.tsx
index acaea1b..5a5fc7f 100644
--- a/app/src/components/Demo/Mouse.tsx
+++ b/app/src/components/Demo/Mouse.tsx
@@ -58,13 +58,13 @@ class Demo extends React.Component<{classes: any}, State> {
       return null
     }
 
-    const style = {
+    const cursorStyle = {
       left: this.state.position.x + 2,
       top: this.state.position.y + 2,
     }
 
     return (
-      <img src="../cursor.png" style={style} className={this.props.classes.cursor} />
+      <img src="../cursor.png" style={cursorStyle} className={this.props.classes.cursor} />
     )
   }
 }
@@ -76,7 +76,7 @@ const style = (theme: Theme) => ({
     position: 'fixed' as 'fixed',
     zIndex: 1000000,
     filter: theme.palette.type === 'light' ? undefined : 'invert(100%)',
-  }
+  },
 })
 
 export default withStyles(style)(Demo)
diff --git a/app/src/components/Layout/PauseButton.tsx b/app/src/components/Layout/PauseButton.tsx
index b1e0647..2464b2a 100644
--- a/app/src/components/Layout/PauseButton.tsx
+++ b/app/src/components/Layout/PauseButton.tsx
@@ -10,7 +10,12 @@ import { treeActions } from '../../actions'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { Tooltip } from '@material-ui/core'
 
-const styles: StyleRulesCallback = theme => ({ })
+const styles: StyleRulesCallback = theme => ({
+  icon: {
+    color: theme.palette.primary.contrastText,
+    verticalAlign: 'middle' as 'middle',
+  },
+})
 
 interface Props {
   classes: any
@@ -66,7 +71,7 @@ class PauseButton extends React.Component<Props, {changes: number}> {
           <CustomIconButton onClick={this.props.actions.tree.togglePause} >
             <Tooltip title={message}>
               <div /* Required so tooltip does not loose the anchor when the icon changes */>
-                {this.props.paused ? <Resume /> : <Pause />}
+                {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
               </div>
             </Tooltip>
           </CustomIconButton>