Merge pull request #1295 from valpinkman/fix/remove-cursor-pointer

remove unwanted cursor pointer to have a more native experience.

src/components/AccountPage/AccountHeaderActions.js

@@ -24,7 +24,6 @@ import Box, { Tabbable } from 'components/base/Box'
 import Button from 'components/base/Button'
 
 const ButtonSettings = styled(Tabbable).attrs({
-  cursor: 'pointer',
   align: 'center',
   justify: 'center',
   borderRadius: 1,

src/components/CurrentAddress/index.js

@@ -88,7 +88,6 @@ const FooterButtonWrapper = styled(Box).attrs({
   px: 2,
 })`
   line-height: 1;
-  cursor: pointer;
   height: 55px;
 
   &:hover {

src/components/MainSideBar/AddAccountButton.js

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

src/components/ManagerPage/AppSearchBar.js

@@ -62,7 +62,7 @@ class AppSearchBar extends PureComponent<Props, State> {
           }
           renderRight={
             query ? (
-              <Box justify="center" cursor="pointer" onClick={this.reset} px={3}>
+              <Box justify="center" cursor="text" onClick={this.reset} px={3}>
                 <CrossIcon size={16} />
               </Box>
             ) : null

src/components/ManagerPage/UpdateFirmwareButton.js

@@ -4,8 +4,6 @@ import { translate } from 'react-i18next'
 
 import type { T } from 'types/common'
 
-// import { EXPERIMENTAL_FIRMWARE_UPDATE } from 'config/constants'
-
 import Button from 'components/base/Button'
 import Text from 'components/base/Text'
 import { getCleanVersion } from 'components/ManagerPage/FirmwareUpdate'

src/components/Onboarding/index.js

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

src/components/Onboarding/steps/Finish.js

@@ -16,6 +16,8 @@ import IconSocialTwitter from 'icons/Twitter'
 import IconSocialReddit from 'icons/Reddit'
 import IconSocialGithub from 'icons/Github'
 
+import { lighten } from 'styles/helpers'
+
 import type { StepProps } from '..'
 import { Title, Description, LiveLogo } from '../helperComponents'
 
@@ -122,18 +124,19 @@ type SocMed = {
   onClick: string => void,
 }
 
+const StyledBox = styled(Box)`
+  cursor: default;
+  &:hover {
+    color: ${p => lighten(p.theme.colors.grey, 0.1)};
+  }
+`
+
 export function SocialMediaBox({ socMed }: { socMed: SocMed }) {
   const { icon, url, onClick } = socMed
   return (
-    <Box
-      horizontal
-      style={{
-        cursor: 'pointer',
-      }}
-      onClick={() => onClick(url)}
-    >
+    <StyledBox horizontal onClick={() => onClick(url)}>
       {icon}
-    </Box>
+    </StyledBox>
   )
 }
 

src/components/Onboarding/steps/Init.js

@@ -117,12 +117,12 @@ const InitCardContainer = styled(Box).attrs({
   horizontal: true,
   borderRadius: '4px',
 })`
+  cursor: initial;
   border: 1px solid ${p => p.theme.colors.fog};
   width: 530px;
   height: 70px;
   transition: all ease-in-out 0.2s;
   &:hover {
-    cursor: pointer;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
   }
 `

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: pointer;
+    cursor: initial;
     background: ${p => rgba(p.theme.colors.wallet, 0.04)};
   }
 `

src/components/OperationsList/Operation.js

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

src/components/OperationsList/index.js

@@ -40,7 +40,6 @@ const ShowMore = styled(Box).attrs({
   p: 6,
   color: 'wallet',
 })`
-  cursor: pointer;
   &:hover {
     text-decoration: underline;
   }

src/components/SettingsPage/SettingsSection.js

@@ -85,9 +85,7 @@ const SettingsSectionRowContainer = styled(Box).attrs({
   align: 'center',
   relative: true,
   justifyContent: 'space-between',
-})`
-  cursor: ${p => (p.onClick ? 'pointer' : '')};
-`
+})``
 
 export function SettingsSectionRow({
   title,

src/components/TopBar/ActivityIndicator.js

@@ -90,7 +90,6 @@ class ActivityIndicatorInner extends PureComponent<Props, { lastClickTime: numbe
               <Box>{t('app:common.sync.error')}</Box>
               <Box
                 ml={2}
-                cursor="pointer"
                 style={{ textDecoration: 'underline', pointerEvents: 'all' }}
                 onClick={this.onClick}
               >

src/components/TopBar/ItemContainer.js

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

src/components/base/AccountsList/AccountRow.js

@@ -121,12 +121,12 @@ 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')};
 
   &:hover {
-    cursor: pointer;
     background-color: ${p => darken(p.theme.colors.lightGrey, 0.015)};
   }
 

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: ${p => (p.disabled ? 'default' : 'pointer')};
+  cursor: default;
   height: ${p => (p.small ? 34 : 40)}px;
   pointer-events: ${p => (p.disabled ? 'none' : '')};
   outline: none;

src/components/base/CopyWithFeedback.js

@@ -66,10 +66,10 @@ const ClickableWrapper = styled(Box).attrs({
   color: 'wallet',
   fontSize: 4,
   ff: 'Open Sans|SemiBold',
-  cursor: 'pointer',
+  cursor: 'default',
 })`
   &:hover {
-    color: ${p => lighten(p.theme.colors.wallet, 0.05)};
+    color: ${p => lighten(p.theme.colors.wallet, 0.1)};
   }
   &:active {
     color: ${p => darken(p.theme.colors.wallet, 0.1)};

src/components/base/DropDown/index.js

@@ -33,7 +33,6 @@ export const DropDownItem = styled(Box).attrs({
   color: p => (p.isHighlighted || p.isActive ? 'dark' : 'warnGrey'),
   bg: p => (p.isActive ? 'lightGrey' : ''),
 })`
-  cursor: pointer;
   height: 40px;
   white-space: nowrap;
 `

src/components/base/Input/index.js

@@ -51,6 +51,7 @@ const Base = styled.input.attrs({
   padding: 0;
   width: 100%;
   background: none;
+  cursor: text;
 
   &::placeholder {
     color: ${p => p.theme.colors.fog};

src/components/base/InputPassword/index.js

@@ -21,7 +21,9 @@ const InputRight = styled(Box).attrs({
   justifyContent: 'center',
   pr: 3,
 })`
-  cursor: pointer;
+  &:hover {
+    color: ${p => p.theme.colors.graphite};
+  }
 `
 
 const Strength = styled(Box).attrs({
@@ -96,7 +98,7 @@ class InputPassword extends PureComponent<Props, State> {
           type={inputType}
           onChange={this.handleChange}
           renderRight={
-            <InputRight onClick={this.toggleInputType}>
+            <InputRight onClick={this.toggleInputType} style={{ cursor: 'default' }}>
               {inputType === 'password' ? <IconEye size={16} /> : <IconEyeOff size={16} />}
             </InputRight>
           }

src/components/base/Modal/ModalBody.js

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

src/components/base/Modal/ModalTitle.js

@@ -28,7 +28,6 @@ const Back = styled(Box).attrs({
   fontSize: 3,
   p: 4,
 })`
-  cursor: pointer;
   position: absolute;
   line-height: 1;
   top: 0;

src/components/base/Select/createStyles.js

@@ -20,7 +20,7 @@ export default ({
     height: small ? 34 : 40,
     minHeight: 'unset',
     backgroundColor: 'white',
-    cursor: 'pointer',
+
     ...(isFocused
       ? {
           borderColor: colors.wallet,
@@ -53,9 +53,7 @@ export default ({
           background: 'unset !important',
           ...ff('Open Sans|SemiBold'),
         }
-      : {
-          cursor: 'pointer',
-        }),
+      : {}),
   }),
   menu: (styles: Object) => ({
     ...styles,

src/components/base/SideBar/SideBarListItem.js

@@ -62,7 +62,7 @@ const Container = styled(Tabbable).attrs({
   px: 3,
   py: 2,
 })`
-  cursor: ${p => (p.disabled ? 'not-allowed' : p.isActive ? 'default' : 'pointer')};
+  cursor: ${p => (p.disabled ? 'not-allowed' : 'default')};
   color: ${p => (p.isActive ? p.theme.colors.dark : p.theme.colors.smoke)};
   background: ${p => (p.isActive ? p.theme.colors.lightGrey : '')};
   opacity: ${p => (p.disabled ? 0.5 : 1)};

src/components/modals/OperationDetails.js

@@ -269,7 +269,6 @@ const More = styled(Text).attrs({
   tabIndex: 0,
 })`
   text-transform: ${p => (!p.textTransform ? 'auto' : 'uppercase')};
-  cursor: pointer;
   outline: none;
 `