add feedback on hover to settings button

src/components/TopBar.js

@@ -11,7 +11,7 @@ import { ipcRenderer } from 'electron'
 import type { Location, RouterHistory } from 'react-router'
 import type { T } from 'types/common'
 
-import { rgba } from 'styles/helpers'
+import { rgba, darken } from 'styles/helpers'
 import { lock } from 'reducers/application'
 import { hasPassword } from 'reducers/settings'
 
@@ -50,6 +50,18 @@ const Bar = styled.div`
   background: ${p => p.theme.colors.fog};
 `
 
+const SettingButtonContainer = styled(Box).attrs({
+  px: 4,
+  ml: 0,
+  justifyContent: 'center',
+  cursor: 'pointer',
+})`
+  &:hover > * {
+    color: ${p => darken(p.theme.colors.graphite, 0.15)};
+    cursor: pointer;
+  }
+`
+
 const Activity = styled.div`
   background: ${p =>
     p.progress === true
@@ -175,9 +187,9 @@ class TopBar extends PureComponent<Props, State> {
             <Box justifyContent="center">
               <Bar />
             </Box>
-            <Box justifyContent="center" onClick={this.navigateToSettings}>
+            <SettingButtonContainer onClick={this.navigateToSettings}>
               <IconSettings size={16} />
-            </Box>
+            </SettingButtonContainer>
             {hasPassword && (
               <Fragment>
                 <Box justifyContent="center">

src/components/base/Box/index.js

@@ -12,7 +12,6 @@ import {
   justifyContent,
   space,
   style,
-  cursor,
 } from 'styled-system'
 
 import fontFamily from 'styles/styled/fontFamily'
@@ -24,6 +23,11 @@ const textAlign = style({
   cssProperty: 'textAlign',
 })
 
+const cursor = style({
+  prop: 'cursor',
+  cssProperty: 'cursor',
+})
+
 const Box = styled.div`
   ${alignItems};
   ${borderRadius};