Merge pull request #839 from meriadec/polishes

Visual polishes

src/components/DeviceInteraction/components.js

@@ -19,6 +19,7 @@ export const DeviceInteractionStepContainer = styled(Box).attrs({
   ff: 'Open Sans',
   fontSize: 3,
   color: 'graphite',
+  bg: p => (p.isActive && !p.isFinished ? 'white' : ''),
 })`
   position: relative;
   z-index: ${p => (p.isActive ? 1 : '')};

src/components/EnsureDeviceApp.js

@@ -79,7 +79,7 @@ class EnsureDeviceApp extends Component<{
     return (
       <Trans i18nKey="deviceConnect:step2.open" parent="div">
         {'Open the '}
-        <strong>{cur.name}</strong>
+        <Bold>{cur.name}</Bold>
         {' app on your device'}
       </Trans>
     )

src/components/ManagerPage/ManagerGenuineCheck.js

@@ -22,9 +22,8 @@ class ManagerGenuineCheck extends PureComponent<Props> {
   render() {
     const { t, onSuccess } = this.props
     return (
-      <Box align="center">
+      <Box align="center" py={7}>
         <TrackPage category="Manager" name="Genuine Check" />
-        <Space of={60} />
         <Box align="center" style={{ maxWidth: 460 }}>
           <img
             src={i('logos/connectDevice.png')}

src/components/base/AccountsList/index.js

@@ -86,6 +86,7 @@ class AccountsList extends Component<
             {withToggleAll && (
               <FakeLink
                 ml="auto"
+                ff="Museo Sans|Regular"
                 onClick={isAllSelected ? this.onUnselectAll : this.onSelectAll}
                 fontSize={3}
                 style={{ lineHeight: '10px' }}

src/components/modals/AddAccounts/index.js

@@ -190,6 +190,7 @@ class AddAccounts extends PureComponent<Props, State> {
 
   handleResetScanState = () => {
     this.setState({
+      isAppOpened: false,
       scanStatus: 'idle',
       err: null,
       scannedAccounts: [],

src/components/modals/OperationDetails.js

@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import moment from 'moment'
 import { getOperationAmountNumber } from '@ledgerhq/live-common/lib/helpers/operation'
 import { getAccountOperationExplorer } from '@ledgerhq/live-common/lib/explorers'
+import uniq from 'lodash/uniq'
 
 import TrackPage from 'analytics/TrackPage'
 import type { Account, Operation } from '@ledgerhq/live-common/lib/types'
@@ -126,6 +127,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
   const isConfirmed = confirmations >= currencySettings.confirmationsNb
 
   const url = getAccountOperationExplorer(account, operation)
+  const uniqueSenders = uniq(senders)
 
   return (
     <ModalBody onClose={onClose}>
@@ -217,12 +219,12 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
             <B />
             <Box>
               <OpDetailsTitle>{t('app:operationDetails.from')}</OpDetailsTitle>
-              <Recipients recipients={senders} t={t} />
+              <DataList lines={uniqueSenders} t={t} />
             </Box>
             <B />
             <Box>
               <OpDetailsTitle>{t('app:operationDetails.to')}</OpDetailsTitle>
-              <Recipients recipients={recipients} t={t} />
+              <DataList lines={recipients} t={t} />
             </Box>
           </Box>
         </GrowScroll>
@@ -271,7 +273,7 @@ const More = styled(Text).attrs({
   outline: none;
 `
 
-export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
+export class DataList extends Component<{ lines: string[], t: T }, *> {
   state = {
     showMore: false,
   }
@@ -279,18 +281,18 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
     this.setState(({ showMore }) => ({ showMore: !showMore }))
   }
   render() {
-    const { recipients, t } = this.props
+    const { lines, t } = this.props
     const { showMore } = this.state
     // Hardcoded for now
     const numToShow = 2
-    const shouldShowMore = recipients.length > 3
+    const shouldShowMore = lines.length > 3
     return (
       <Box>
-        {(shouldShowMore ? recipients.slice(0, numToShow) : recipients).map(recipient => (
+        {(shouldShowMore ? lines.slice(0, numToShow) : lines).map(line => (
-          <OpDetailsData key={recipient}>
+          <OpDetailsData key={line}>
-            {recipient}
+            {line}
             <GradientHover>
-              <CopyWithFeedback text={recipient} />
+              <CopyWithFeedback text={line} />
             </GradientHover>
           </OpDetailsData>
         ))}
@@ -299,14 +301,12 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
             <Box onClick={this.onClick} py={1}>
               <More fontSize={4} color="wallet" ff="Open Sans|SemiBold" mt={1}>
                 <IconChevronRight size={12} style={{ marginRight: 5 }} />
-                {t('app:operationDetails.showMore', { recipients: recipients.length - numToShow })}
+                {t('app:operationDetails.showMore', { recipients: lines.length - numToShow })}
               </More>
             </Box>
           )}
         {showMore &&
-          recipients
+          lines.slice(numToShow).map(line => <OpDetailsData key={line}>{line}</OpDetailsData>)}
-            .slice(numToShow)
-            .map(recipient => <OpDetailsData key={recipient}>{recipient}</OpDetailsData>)}
         {shouldShowMore &&
           showMore && (
             <Box onClick={this.onClick} py={1}>

src/components/modals/Receive/steps/03-step-confirm-address.js

@@ -74,7 +74,7 @@ const Container = styled(Box).attrs({
 })``
 
 const Title = styled(Box).attrs({
-  ff: 'Museo Sans|Regular',
+  ff: 'Open Sans|SemiBold',
   fontSize: 6,
   mb: 1,
 })``

src/components/modals/StepConnectDevice.js

@@ -20,7 +20,7 @@ const StepConnectDevice = ({ account, currency, onChangeDevice, onStatusChange }
     <EnsureDeviceApp
       account={account}
       currency={currency}
-      waitBeforeSuccess={500}
+      waitBeforeSuccess={200}
       onSuccess={({ device }) => {
         // TODO: remove those non-nense callbacks
         if (onChangeDevice) {