Visual & interaction improvements

src/components/AccountPage/index.js

@@ -8,12 +8,13 @@ import { Redirect } from 'react-router'
 import styled from 'styled-components'
 import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
 import SyncOneAccountOnMount from 'components/SyncOneAccountOnMount'
+import Tooltip from 'components/base/Tooltip'
 
 import { MODAL_SEND, MODAL_RECEIVE, MODAL_SETTINGS_ACCOUNT } from 'config/constants'
 
 import type { T } from 'types/common'
 
-import { darken } from 'styles/helpers'
+import { rgba } from 'styles/helpers'
 
 import { accountSelector } from 'reducers/accounts'
 import { counterValueCurrencySelector, localeSelector } from 'reducers/settings'
@@ -29,7 +30,7 @@ import {
   BalanceSinceDiff,
   BalanceSincePercent,
 } from 'components/BalanceSummary/BalanceInfos'
-import Box from 'components/base/Box'
+import Box, { Tabbable } from 'components/base/Box'
 import Button from 'components/base/Button'
 import FormattedVal from 'components/base/FormattedVal'
 import PillsDaysCount from 'components/PillsDaysCount'
@@ -39,15 +40,22 @@ import StickyBackToTop from 'components/StickyBackToTop'
 import AccountHeader from './AccountHeader'
 import EmptyStateAccount from './EmptyStateAccount'
 
-const ButtonSettings = styled(Button).attrs({
+const ButtonSettings = styled(Tabbable).attrs({
-  small: true,
+  cursor: 'pointer',
+  align: 'center',
+  justify: 'center',
+  borderRadius: 1,
 })`
-  border: 2px solid ${p => p.theme.colors.grey};
+  width: 40px;
-  width: 30px;
+  height: 40px;
-  padding: 0;
+
+  &:hover {
+    color: ${p => (p.disabled ? '' : p.theme.colors.dark)};
+    background: ${p => (p.disabled ? '' : rgba(p.theme.colors.fog, 0.2))};
+  }
 
   &:active {
-    border: 2px solid ${p => darken(p.theme.colors.grey, 0.2)};
+    background: ${p => (p.disabled ? '' : rgba(p.theme.colors.fog, 0.3))};
   }
 `
 
@@ -120,11 +128,13 @@ class AccountPage extends PureComponent<Props, State> {
                 </Button>
               </Fragment>
             )}
-            <ButtonSettings onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}>
+            <Tooltip render={() => t('app:account.settings.title')}>
-              <Box align="center">
+              <ButtonSettings onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}>
-                <IconAccountSettings size={16} />
+                <Box align="center">
-              </Box>
+                  <IconAccountSettings size={16} />
-            </ButtonSettings>
+                </Box>
+              </ButtonSettings>
+            </Tooltip>
           </Box>
         </Box>
         {account.operations.length > 0 ? (

src/components/TopBar/ActivityIndicator.js

@@ -70,11 +70,11 @@ class ActivityIndicatorInner extends Component<Props, State> {
   render() {
     const { isPending, isError, t } = this.props
     const { hasClicked, isFirstSync } = this.state
-    const isDisabled = hasClicked || isError
+    const isDisabled = isFirstSync || hasClicked || isError
     const isRotating = isPending && (hasClicked || isFirstSync)
 
     return (
-      <ItemContainer isDisabled={isDisabled} onClick={isDisabled ? undefined : this.handleRefresh}>
+      <ItemContainer disabled={isDisabled} onClick={isDisabled ? undefined : this.handleRefresh}>
         <Rotating
           size={16}
           isRotating={isRotating}

src/components/TopBar/ItemContainer.js

@@ -10,18 +10,19 @@ export default styled(Tabbable).attrs({
   px: 3,
   ml: 0,
   alignItems: 'center',
-  cursor: p => (p.isDisabled ? 'default' : 'pointer'),
+  cursor: p => (p.disabled ? 'default' : 'pointer'),
   horizontal: true,
   borderRadius: 1,
 })`
   height: 40px;
+  pointer-events: ${p => (p.disabled ? 'none' : 'unset')};
 
   &:hover {
-    color: ${p => (p.isDisabled ? '' : p.theme.colors.dark)};
+    color: ${p => (p.disabled ? '' : p.theme.colors.dark)};
-    background: ${p => (p.isDisabled ? '' : rgba(p.theme.colors.fog, 0.2))};
+    background: ${p => (p.disabled ? '' : rgba(p.theme.colors.fog, 0.2))};
   }
 
   &:active {
-    background: ${p => (p.isDisabled ? '' : rgba(p.theme.colors.fog, 0.3))};
+    background: ${p => (p.disabled ? '' : rgba(p.theme.colors.fog, 0.3))};
   }
 `

src/components/TopBar/index.js

@@ -19,6 +19,7 @@ import IconSettings from 'icons/Settings'
 
 import Box from 'components/base/Box'
 import GlobalSearch from 'components/GlobalSearch'
+import Tooltip from 'components/base/Tooltip'
 
 import ActivityIndicator from './ActivityIndicator'
 import ItemContainer from './ItemContainer'
@@ -101,9 +102,11 @@ class TopBar extends PureComponent<Props> {
             <Box justifyContent="center">
               <Bar />
             </Box>
-            <ItemContainer isInteractive onClick={this.navigateToSettings}>
+            <Tooltip render={() => t('app:settings.title')}>
-              <IconSettings size={16} />
+              <ItemContainer isInteractive onClick={this.navigateToSettings}>
-            </ItemContainer>
+                <IconSettings size={16} />
+              </ItemContainer>
+            </Tooltip>
             {hasPassword && ( // FIXME this should be a dedicated component. therefore this component don't need to connect()
               <Fragment>
                 <Box justifyContent="center">