Merge pull request #266 from meriadec/master

Focus color for Input & Select. Fix deprecation.

src/components/base/Input/index.js

@@ -3,7 +3,6 @@
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 import { fontSize, space } from 'styled-system'
-
 import noop from 'lodash/noop'
 
 import fontFamily from 'styles/styled/fontFamily'
@@ -15,7 +14,7 @@ const Container = styled(Box).attrs({
 })`
   background: ${p => p.theme.colors.white};
   border-radius: ${p => p.theme.radii[1]}px;
-  border: 1px solid ${p => p.theme.colors.fog};
+  border: 1px solid ${p => (p.isFocus ? p.theme.colors.wallet : p.theme.colors.fog)};
   box-shadow: ${p => (p.isFocus ? `rgba(0, 0, 0, 0.05) 0 2px 2px` : 'none')};
   height: 40px;
 `

src/components/base/InputCurrency/index.js

@@ -141,7 +141,7 @@ class InputCurrency extends PureComponent<Props, State> {
 
   renderListUnits = () => {
     const { units, value, showAllDigits } = this.props
-    const { unit } = this.state
+    const { unit, isFocused } = this.state
 
     if (units.length <= 1) {
       return null
@@ -163,6 +163,7 @@ class InputCurrency extends PureComponent<Props, State> {
           value={unit}
           renderItem={item => item.code}
           renderSelected={item => <Currency>{item.code}</Currency>}
+          fakeFocusRight={isFocused}
         />
       </Currencies>
     )

src/components/base/Select/index.js

@@ -20,6 +20,7 @@ type Props = {
   bg?: string,
   flatLeft?: boolean,
   flatRight?: boolean,
+  fakeFocusRight?: boolean,
   fuseOptions?: Object,
   highlight?: boolean,
   items: Array<any>,
@@ -57,8 +58,20 @@ const TriggerBtn = styled(Box).attrs({
   width: 100%;
   &:focus {
     outline: none;
+    border-color: ${p => p.theme.colors.wallet};
     box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
   }
+
+  ${p => {
+    const c = p.theme.colors.wallet
+    return p.fakeFocusRight
+      ? `
+    border-top: 1px solid ${c};
+    border-right: 1px solid ${c};
+    border-bottom: 1px solid ${c};
+  `
+      : ''
+  }};
 `
 
 const Item = styled(Box).attrs({
@@ -128,6 +141,7 @@ class Select extends PureComponent<Props> {
     bg: undefined,
     flatLeft: false,
     flatRight: false,
+    fakeFocusRight: false,
     itemToString: (item: Object) => item && item.name,
     keyProp: undefined,
     maxHeight: 300,
@@ -215,6 +229,7 @@ class Select extends PureComponent<Props> {
     const {
       flatLeft,
       flatRight,
+      fakeFocusRight,
       items,
       searchable,
       itemToString,
@@ -268,6 +283,7 @@ class Select extends PureComponent<Props> {
                   alignItems="center"
                   flatLeft={flatLeft}
                   flatRight={flatRight}
+                  fakeFocusRight={fakeFocusRight}
                   flow={2}
                   horizontal
                   tabIndex={0}

src/main/counterValuesSync.js

@@ -1,12 +1,12 @@
 // @flow
 
-import { fetchCurrentCounterValues } from '@ledgerhq/wallet-common/lib/api/countervalue'
+import { fetchCurrentRates } from '@ledgerhq/wallet-common/lib/api/countervalue'
 
 type SendFunction = (type: string, data: *) => void
 
 export default async (send: SendFunction, { counterValue, currencies }: Object) => {
   try {
-    const data = await fetchCurrentCounterValues(currencies, counterValue)
+    const data = await fetchCurrentRates(currencies, counterValue)
     send('counterValues.update', data)
   } catch (err) {
     console.error(err) // eslint-disable-line no-console