fixes on cursors

src/components/MainSideBar/AddAccountButton.js

@@ -11,7 +11,6 @@ import { rgba } from 'styles/helpers'
 
 const PlusWrapper = styled(Tabbable).attrs({
   p: 1,
-  cursor: 'default',
   borderRadius: 1,
 })`
   color: ${p => p.theme.colors.smoke};

src/components/ManagerPage/AppSearchBar.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { PureComponent, Fragment } from 'react'
+import styled from 'styled-components'
 
 import type { LedgerScriptParams } from 'helpers/common'
 
@@ -12,6 +13,15 @@ import Search from 'components/base/Search'
 import SearchIcon from 'icons/Search'
 import CrossIcon from 'icons/Cross'
 
+const CrossContainer = styled(Box).attrs({
+  justify: 'center',
+  px: 3,
+})`
+  &:hover {
+    color: ${p => p.theme.colors.dark};
+  }
+`
+
 type Props = {
   list: Array<LedgerScriptParams>,
   children: (list: Array<LedgerScriptParams>) => React$Node,
@@ -43,7 +53,7 @@ class AppSearchBar extends PureComponent<Props, State> {
     const { children, list } = this.props
     const { query, focused } = this.state
 
-    const color = focused ? 'black' : 'grey'
+    const color = focused ? 'dark' : 'grey'
 
     return (
       <Fragment>
@@ -56,15 +66,15 @@ class AppSearchBar extends PureComponent<Props, State> {
           onBlur={this.handleFocus(false)}
           placeholder={'Search app'}
           renderLeft={
-            <Box pl={3} justify="center">
-              <SearchIcon size={16} style={{ color }} />
+            <Box pl={3} justify="center" color={color}>
+              <SearchIcon size={16} />
             </Box>
           }
           renderRight={
             query ? (
-              <Box justify="center" cursor="text" onClick={this.reset} px={3}>
+              <CrossContainer justify="center" cursor="default" onClick={this.reset} px={3}>
                 <CrossIcon size={16} />
-              </Box>
+              </CrossContainer>
             ) : null
           }
         />

src/components/Onboarding/index.js

@@ -110,7 +110,6 @@ const CloseContainer = styled(Box).attrs({
   p: 4,
   color: 'fog',
 })`
-  cursor: initial;
   position: absolute;
   top: 0;
   right: 0;

src/components/Onboarding/steps/Finish.js

@@ -125,7 +125,7 @@ type SocMed = {
 }
 
 const StyledBox = styled(Box)`
-  cursor: default;
+  cursor: default; // this here needs reset because it inherits from cursor: text from parent
   &:hover {
     color: ${p => lighten(p.theme.colors.grey, 0.1)};
   }

src/components/Onboarding/steps/Init.js

@@ -117,7 +117,6 @@ const InitCardContainer = styled(Box).attrs({
   horizontal: true,
   borderRadius: '4px',
 })`
-  cursor: initial;
   border: 1px solid ${p => p.theme.colors.fog};
   width: 530px;
   height: 70px;

src/components/Onboarding/steps/SelectDevice.js

@@ -95,7 +95,7 @@ const DeviceContainer = styled(Box).attrs({
   height: 204px;
   border: ${props => `1px solid ${props.theme.colors[props.isActive ? 'wallet' : 'fog']}`};
   &:hover {
-    cursor: initial;
+    cursor: default; // this here needs reset because it inherits from cursor: text from parent
     background: ${p => rgba(p.theme.colors.wallet, 0.04)};
   }
 `

src/components/OperationsList/Operation.js

@@ -17,7 +17,6 @@ const OperationRow = styled(Box).attrs({
   horizontal: true,
   alignItems: 'center',
 })`
-  cursor: initial;
   border-bottom: 1px solid ${p => p.theme.colors.lightGrey};
   height: 68px;
   opacity: ${p => (p.isOptimistic ? 0.5 : 1)};

src/components/TopBar/ItemContainer.js

@@ -10,7 +10,7 @@ export default styled(Tabbable).attrs({
   px: 3,
   ml: 0,
   alignItems: 'center',
-  cursor: 'default',
+  cursor: p => (p.disabled ? 'not-allowed' : 'default'),
   horizontal: true,
   borderRadius: 1,
 })`

src/components/base/AccountsList/AccountRow.js

@@ -121,7 +121,6 @@ const AccountRowContainer = styled(Tabbable).attrs({
 })`
   height: 48px;
   border-radius: 4px;
-  cursor: initial;
 
   opacity: ${p => (p.isDisabled ? 0.5 : 1)};
   pointer-events: ${p => (p.isDisabled ? 'none' : 'auto')};

src/components/base/Button/index.js

@@ -168,7 +168,7 @@ const Base = styled.button.attrs({
   ${fontFamily};
   border: none;
   border-radius: ${p => p.theme.radii[1]}px;
-  cursor: default;
+  cursor: ${p => (p.disabled ? 'not-allowed' : 'default')};
   height: ${p => (p.small ? 34 : 40)}px;
   pointer-events: ${p => (p.disabled ? 'none' : '')};
   outline: none;

src/components/base/CopyWithFeedback.js

@@ -66,7 +66,7 @@ const ClickableWrapper = styled(Box).attrs({
   color: 'wallet',
   fontSize: 4,
   ff: 'Open Sans|SemiBold',
-  cursor: 'default',
+  cursor: 'default', // this here needs reset because it inherits from cursor: text from parent
 })`
   &:hover {
     color: ${p => lighten(p.theme.colors.wallet, 0.1)};