From ad2f7a9c9ed8308af2bbe4c8dbf46cee20d1ba0a Mon Sep 17 00:00:00 2001
From: "Valentin D. Pinkman" <valentin.d.pinkman@icloud.com>
Date: Tue, 15 May 2018 12:07:59 +0200
Subject: [PATCH] add feedback on hover to settings button

---
 src/components/TopBar.js         | 18 +++++++++++++++---
 src/components/base/Box/index.js |  6 +++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 836e62e5..e249a5ea 100644
--- a/src/components/TopBar.js
+++ b/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">
diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js
index 36321de8..dc058b2f 100644
--- a/src/components/base/Box/index.js
+++ b/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};