Implement CheckBox and use it in Add accounts

src/components/base/AccountsList/AccountRow.js

@@ -7,7 +7,7 @@ import type { Account } from '@ledgerhq/live-common/lib/types'
 import { darken } from 'styles/helpers'
 
 import Box, { Tabbable } from 'components/base/Box'
-import Radio from 'components/base/Radio'
+import CheckBox from 'components/base/CheckBox'
 import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
 import FormattedVal from 'components/base/FormattedVal'
 import Input from 'components/base/Input'
@@ -103,7 +103,7 @@ export default class AccountRow extends PureComponent<Props> {
           />
         ) : null}
         {!isDisabled ? (
-          <Radio disabled isChecked={isChecked || !!isDisabled} />
+          <CheckBox disabled isChecked={isChecked || !!isDisabled} />
         ) : (
           <div style={{ width: 20 }} />
         )}

src/components/base/CheckBox/index.js

@@ -0,0 +1,46 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Check from 'icons/Check'
+import { Tabbable } from 'components/base/Box'
+
+const Base = styled(Tabbable).attrs({
+  relative: true,
+  align: 'center',
+  justifyContent: 'center',
+})`
+  outline: none;
+  border-radius: 4px;
+  background-color: ${p => (p.isChecked ? p.theme.colors.wallet : p.theme.colors.white)};
+  border: 1px solid;
+  border-color: ${p => (p.isChecked ? p.theme.colors.wallet : p.theme.colors.fog)};
+  color: ${p => p.theme.colors.white};
+  height: 18px;
+  width: 18px;
+  transition: all ease-in-out 0.1s;
+  &:focus {
+    box-shadow: 0 0 4px 1px ${p => p.theme.colors.wallet};
+    border-color: ${p => p.theme.colors.wallet};
+  }
+  &:hover {
+    border-color: ${p => p.theme.colors.wallet};
+  }
+`
+
+type Props = {
+  isChecked: boolean,
+  onChange?: Function,
+}
+
+function CheckBox(props: Props) {
+  const { isChecked, onChange } = props
+  return (
+    <Base {...props} isChecked={isChecked} onClick={() => onChange && onChange(!isChecked)}>
+      <Check size={12} />
+    </Base>
+  )
+}
+
+export default CheckBox

src/components/base/CheckBox/stories.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
+
+import CheckBox from 'components/base/CheckBox'
+
+const stories = storiesOf('Components/base', module)
+
+stories.add('CheckBox', () => (
+  <CheckBox isChecked={boolean('checked', false)} onChange={action('onChange')} />
+))