diff --git a/src/components/AccountPage/AccountHeaderActions.js b/src/components/AccountPage/AccountHeaderActions.js index e6fa1cbd..12b26a90 100644 --- a/src/components/AccountPage/AccountHeaderActions.js +++ b/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, diff --git a/src/components/CurrentAddress/index.js b/src/components/CurrentAddress/index.js index eba19e0e..488bf105 100644 --- a/src/components/CurrentAddress/index.js +++ b/src/components/CurrentAddress/index.js @@ -88,7 +88,6 @@ const FooterButtonWrapper = styled(Box).attrs({ px: 2, })` line-height: 1; - cursor: pointer; height: 55px; &:hover { diff --git a/src/components/MainSideBar/AddAccountButton.js b/src/components/MainSideBar/AddAccountButton.js index 7e74210a..1646fe6f 100644 --- a/src/components/MainSideBar/AddAccountButton.js +++ b/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}; diff --git a/src/components/ManagerPage/AppSearchBar.js b/src/components/ManagerPage/AppSearchBar.js index 7b33b49e..f1631991 100644 --- a/src/components/ManagerPage/AppSearchBar.js +++ b/src/components/ManagerPage/AppSearchBar.js @@ -62,7 +62,7 @@ class AppSearchBar extends PureComponent { } renderRight={ query ? ( - + ) : null diff --git a/src/components/ManagerPage/UpdateFirmwareButton.js b/src/components/ManagerPage/UpdateFirmwareButton.js index d68b7fc6..e2ac0fd1 100644 --- a/src/components/ManagerPage/UpdateFirmwareButton.js +++ b/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' diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index b05c2e53..a13f99e1 100644 --- a/src/components/Onboarding/index.js +++ b/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; diff --git a/src/components/Onboarding/steps/Finish.js b/src/components/Onboarding/steps/Finish.js index da9155be..4cb6ee93 100644 --- a/src/components/Onboarding/steps/Finish.js +++ b/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 ( - onClick(url)} - > + onClick(url)}> {icon} - + ) } diff --git a/src/components/Onboarding/steps/Init.js b/src/components/Onboarding/steps/Init.js index 9469c16e..dd243081 100644 --- a/src/components/Onboarding/steps/Init.js +++ b/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); } ` diff --git a/src/components/Onboarding/steps/SelectDevice.js b/src/components/Onboarding/steps/SelectDevice.js index e20b6101..b6ac1f5a 100644 --- a/src/components/Onboarding/steps/SelectDevice.js +++ b/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)}; } ` diff --git a/src/components/OperationsList/Operation.js b/src/components/OperationsList/Operation.js index c96f7156..308a91e7 100644 --- a/src/components/OperationsList/Operation.js +++ b/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)}; diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js index 31612830..264094ec 100644 --- a/src/components/OperationsList/index.js +++ b/src/components/OperationsList/index.js @@ -40,7 +40,6 @@ const ShowMore = styled(Box).attrs({ p: 6, color: 'wallet', })` - cursor: pointer; &:hover { text-decoration: underline; } diff --git a/src/components/SettingsPage/SettingsSection.js b/src/components/SettingsPage/SettingsSection.js index de34dee1..7e75e1a2 100644 --- a/src/components/SettingsPage/SettingsSection.js +++ b/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, diff --git a/src/components/TopBar/ActivityIndicator.js b/src/components/TopBar/ActivityIndicator.js index 63cbd68c..efd304ab 100644 --- a/src/components/TopBar/ActivityIndicator.js +++ b/src/components/TopBar/ActivityIndicator.js @@ -90,7 +90,6 @@ class ActivityIndicatorInner extends PureComponent{t('app:common.sync.error')} diff --git a/src/components/TopBar/ItemContainer.js b/src/components/TopBar/ItemContainer.js index a701725f..5513056b 100644 --- a/src/components/TopBar/ItemContainer.js +++ b/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, })` diff --git a/src/components/base/AccountsList/AccountRow.js b/src/components/base/AccountsList/AccountRow.js index 552bd3ff..cc9ac64b 100644 --- a/src/components/base/AccountsList/AccountRow.js +++ b/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)}; } diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js index 1750a8a1..303ebc5a 100644 --- a/src/components/base/Button/index.js +++ b/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; diff --git a/src/components/base/CopyWithFeedback.js b/src/components/base/CopyWithFeedback.js index 3ced0e88..31fca50b 100644 --- a/src/components/base/CopyWithFeedback.js +++ b/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)}; diff --git a/src/components/base/DropDown/index.js b/src/components/base/DropDown/index.js index 58b655bc..c560b512 100644 --- a/src/components/base/DropDown/index.js +++ b/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; ` diff --git a/src/components/base/Input/index.js b/src/components/base/Input/index.js index 5cd59dca..7bc86011 100644 --- a/src/components/base/Input/index.js +++ b/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}; diff --git a/src/components/base/InputPassword/index.js b/src/components/base/InputPassword/index.js index bf550696..401abfae 100644 --- a/src/components/base/InputPassword/index.js +++ b/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 { type={inputType} onChange={this.handleChange} renderRight={ - + {inputType === 'password' ? : } } diff --git a/src/components/base/Modal/ModalBody.js b/src/components/base/Modal/ModalBody.js index f6056f2a..704a380a 100644 --- a/src/components/base/Modal/ModalBody.js +++ b/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; diff --git a/src/components/base/Modal/ModalTitle.js b/src/components/base/Modal/ModalTitle.js index cc812853..d4aebe5d 100644 --- a/src/components/base/Modal/ModalTitle.js +++ b/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; diff --git a/src/components/base/Select/createStyles.js b/src/components/base/Select/createStyles.js index 03645c2d..a09f1639 100644 --- a/src/components/base/Select/createStyles.js +++ b/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, diff --git a/src/components/base/SideBar/SideBarListItem.js b/src/components/base/SideBar/SideBarListItem.js index d241fa3c..d50f0368 100644 --- a/src/components/base/SideBar/SideBarListItem.js +++ b/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)}; diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index 10612cd2..89cb656f 100644 --- a/src/components/modals/OperationDetails.js +++ b/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; `