Fix pause icon alignment

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)

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>