From 30c4e8b90a3b494452e316ca168a0dbc66ba7041 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 13 Apr 2018 09:35:19 +0200
Subject: [PATCH 1/4] Update yarn.lock

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 44ea7bc3..3527d76a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4785,7 +4785,7 @@ electron-builder-lib@~20.6.2:
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^20.0.4, electron-builder@^20.8.1:
+electron-builder@^20.8.1:
   version "20.8.1"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.8.1.tgz#3d19607a7f7d3ee7f3e110a6fc66c720ed1d2cc0"
   dependencies:
@@ -4965,7 +4965,7 @@ electron-webpack@^2.0.1:
     webpack-merge "^4.1.2"
     yargs "^11.1.0"
 
-electron@1.8.4, electron@^1.8.2:
+electron@1.8.4:
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.4.tgz#cca8d0e6889f238f55b414ad224f03e03b226a38"
   dependencies:

From 541f25fecb5b1248783b337f8b0150d46cc4cefd Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 13 Apr 2018 10:57:16 +0200
Subject: [PATCH 2/4] Update manager page design

---
 src/components/ManagerPage/AppsList.js    | 23 ++++++++--
 src/components/ManagerPage/DeviceInfos.js |  4 +-
 src/components/ManagerPage/ManagerApp.js  | 53 +++++++++++++++--------
 src/components/ManagerPage/index.js       |  5 +--
 src/components/OperationsList/index.js    |  2 +-
 src/components/base/Button/index.js       | 13 ++++--
 src/components/base/Button/stories.js     | 11 +++++
 7 files changed, 80 insertions(+), 31 deletions(-)

diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js
index 98653d0e..a4179c81 100644
--- a/src/components/ManagerPage/AppsList.js
+++ b/src/components/ManagerPage/AppsList.js
@@ -14,7 +14,7 @@ import ManagerApp from './ManagerApp'
 
 const List = styled(Box).attrs({
   horizontal: true,
-  m: -2,
+  m: -3,
 })`
   flex-wrap: wrap;
 `
@@ -35,6 +35,7 @@ type jobHandlerOptions = {
 
 type LedgerApp = {
   name: string,
+  version: string,
   icon: string,
   app: Object,
 }
@@ -86,7 +87,9 @@ class AppsList extends PureComponent<Props, State> {
     this.setState({ status: 'busy' })
     try {
       const { job, successResponse, errorResponse } = options
-      const { device: { path: devicePath } } = this.props
+      const {
+        device: { path: devicePath },
+      } = this.props
       const data = { appParams, devicePath }
       await runJob({ channel: 'usb', job, successResponse, errorResponse, data })
       this.setState({ status: 'success' })
@@ -109,7 +112,7 @@ class AppsList extends PureComponent<Props, State> {
 
   handleCloseModal = () => this.setState({ status: 'idle' })
 
-  render() {
+  renderList() {
     const { status, error } = this.state
     return (
       <List>
@@ -117,6 +120,7 @@ class AppsList extends PureComponent<Props, State> {
           <ManagerApp
             key={c.name}
             name={c.name}
+            version={`Version ${c.version}`}
             icon={ICONS_FALLBACK[c.icon] || c.icon}
             onInstall={this.handleInstall(c)}
             onUninstall={this.handleUninstall(c)}
@@ -146,6 +150,19 @@ class AppsList extends PureComponent<Props, State> {
       </List>
     )
   }
+
+  render() {
+    return (
+      <Box flow={6}>
+        <Box>
+          <Box mb={4} color="dark" ff="Museo Sans" fontSize={6}>
+            {'All apps'}
+          </Box>
+          {this.renderList()}
+        </Box>
+      </Box>
+    )
+  }
 }
 
 export default AppsList
diff --git a/src/components/ManagerPage/DeviceInfos.js b/src/components/ManagerPage/DeviceInfos.js
index 71ff1f36..d16146e7 100644
--- a/src/components/ManagerPage/DeviceInfos.js
+++ b/src/components/ManagerPage/DeviceInfos.js
@@ -29,7 +29,9 @@ class DeviceInfos extends PureComponent<Props, State> {
   handleGetMemInfos = async () => {
     try {
       this.setState({ isLoading: true })
-      const { device: { path: devicePath } } = this.props
+      const {
+        device: { path: devicePath },
+      } = this.props
       const memoryInfos = await runJob({
         channel: 'usb',
         job: 'manager.getMemInfos',
diff --git a/src/components/ManagerPage/ManagerApp.js b/src/components/ManagerPage/ManagerApp.js
index 9213798e..69cadf47 100644
--- a/src/components/ManagerPage/ManagerApp.js
+++ b/src/components/ManagerPage/ManagerApp.js
@@ -3,50 +3,65 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import Box, { Tabbable } from 'components/base/Box'
+import Box from 'components/base/Box'
 import Text from 'components/base/Text'
+import Button from 'components/base/Button'
 
 const Container = styled(Box).attrs({
   align: 'center',
-  justify: 'center',
-  m: 2,
+  m: 3,
+  p: 4,
+  boxShadow: 0,
+  flow: 3,
 })`
-  width: 150px;
-  height: 150px;
+  width: 156px;
+  height: 186px;
   background: white;
+  line-height: normal;
 `
 
-// https://api.ledgerwallet.com/update/assets/icons/bitcoin
-
-const ActionBtn = styled(Tabbable).attrs({
-  fontSize: 3,
-})``
-
 const AppIcon = styled.img`
   display: block;
   width: 50px;
   height: 50px;
 `
 
+const AppName = styled(Box).attrs({
+  ff: 'Museo Sans|Regular',
+  fontSize: 4,
+  color: 'dark',
+})`
+  display: block;
+  width: 115px;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
 type Props = {
   name: string,
+  version: string,
   icon: string,
   onInstall: Function,
-  onUninstall: Function,
+  // onUninstall: Function,
 }
 
 export default function ManagerApp(props: Props) {
-  const { name, icon, onInstall, onUninstall } = props
+  const { name, version, icon, onInstall } = props
   const iconUrl = `https://api.ledgerwallet.com/update/assets/icons/${icon}`
   return (
-    <Container flow={3}>
+    <Container>
       <AppIcon src={iconUrl} />
-
-      <Text ff="Museo Sans|Bold">{name}</Text>
-      <Box horizontal flow={2}>
-        <ActionBtn onClick={onInstall}>{'Install'}</ActionBtn>
-        <ActionBtn onClick={onUninstall}>{'Remove'}</ActionBtn>
+      <Box align="center">
+        <AppName>{name}</AppName>
+        <Text ff="Open Sans|Regular" fontSize={3} color="grey">
+          {version}
+        </Text>
       </Box>
+      <Button outline onClick={onInstall}>
+        {'Install'}
+      </Button>
     </Container>
   )
 }
diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js
index 4317f51e..5aa407d6 100644
--- a/src/components/ManagerPage/index.js
+++ b/src/components/ManagerPage/index.js
@@ -34,7 +34,7 @@ type State = {
 
 class ManagerPage extends PureComponent<Props, State> {
   state = {
-    currentTab: 'device',
+    currentTab: 'apps',
   }
 
   handleTabChange = t => this.setState({ currentTab: t.value })
@@ -42,9 +42,6 @@ class ManagerPage extends PureComponent<Props, State> {
   render() {
     const { device, t, nbDevices } = this.props
     const { currentTab } = this.state
-    if (!device) {
-      return 'eu... connecte ton device?'
-    }
     const tabs = TABS.map(i => {
       let label = t(`manager:tabs.${i.key}`)
       if (i.key === 'device') {
diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js
index f604a8ab..e09c8f73 100644
--- a/src/components/OperationsList/index.js
+++ b/src/components/OperationsList/index.js
@@ -71,7 +71,7 @@ const OperationRaw = styled(Box).attrs({
   }
 
   &:hover {
-    background: ${p => p.theme.colors.lightGrey};
+    background: ${p => p.theme.colors.lightFog};
   }
 `
 
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index 5e1e576a..51f7116e 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -12,7 +12,7 @@ import fontFamily from 'styles/styled/fontFamily'
 const Base = styled.button.attrs({
   ff: 'Museo Sans|Regular',
   fontSize: p => p.fontSize || 3,
-  px: p => (p.primary ? (p.small ? 2 : 3) : 1),
+  px: p => (p.primary ? (p.small ? 2 : 3) : 2),
 })`
   ${space};
   ${color};
@@ -20,7 +20,8 @@ const Base = styled.button.attrs({
   ${fontWeight};
   ${fontFamily};
   border-radius: ${p => p.theme.radii[1]}px;
-  border: none;
+  border: ${p => (p.outline ? `1px solid ${p.theme.colors.wallet}` : 'none')};
+  color: ${p => (p.outline ? p.theme.colors.wallet : '')};
   cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: ${p => (p.small ? 30 : 36)}px;
   outline: none;
@@ -30,7 +31,13 @@ const Base = styled.button.attrs({
   }
 
   &:active {
-    color: ${p => (p.primary ? '' : darken(p.theme.colors.grey, 0.2))};
+    color: ${p =>
+      p.primary
+        ? ''
+        : p.outline
+          ? darken(p.theme.colors.wallet, 0.1)
+          : darken(p.theme.colors.grey, 0.2)};
+    border-color: ${p => (p.outline ? darken(p.theme.colors.wallet, 0.1) : '')};
     background: ${p => (p.primary ? darken(p.theme.colors.wallet, 0.1) : '')};
   }
 `
diff --git a/src/components/base/Button/stories.js b/src/components/base/Button/stories.js
index d779c637..039b553a 100644
--- a/src/components/base/Button/stories.js
+++ b/src/components/base/Button/stories.js
@@ -47,6 +47,17 @@ stories.add('Button', () => (
           </Button>
         </Td>
       </tr>
+      <tr>
+        <Td>outline</Td>
+        <Td>
+          <Button outline>Outline button</Button>
+        </Td>
+        <Td>
+          <Button outline disabled>
+            Outline button
+          </Button>
+        </Td>
+      </tr>
     </tbody>
   </table>
 ))

From d51b935d7885e18cf583ccc4d40499a551fc0d3e Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 13 Apr 2018 11:20:17 +0200
Subject: [PATCH 3/4] Add story for ManagerApp

---
 .../ManagerPage/stories/ManagerApp.stories.js | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/ManagerPage/stories/ManagerApp.stories.js

diff --git a/src/components/ManagerPage/stories/ManagerApp.stories.js b/src/components/ManagerPage/stories/ManagerApp.stories.js
new file mode 100644
index 00000000..e78bd009
--- /dev/null
+++ b/src/components/ManagerPage/stories/ManagerApp.stories.js
@@ -0,0 +1,54 @@
+// @flow
+
+import React from 'react'
+
+import { storiesOf } from '@storybook/react'
+import { text, select } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import Box from 'components/base/Box'
+import ManagerApp from '../ManagerApp'
+
+const stories = storiesOf('Components', module)
+
+const icons = {
+  bitcoin: 'bitcoin',
+  bitcoin_cash: 'bitcoin_cash',
+  bitcoin_gold: 'bitcoin_gold',
+  digibyte: 'digibyte',
+  hcash: 'hcash',
+  qtum: 'qtum',
+  pivx: 'pivx',
+  stealthcoin: 'stealthcoin',
+  vertcoin: 'vertcoin',
+  viacoin: 'viacoin',
+  ubiq: 'ubiq',
+  expanse: 'expanse',
+  dash: 'dash',
+  dogecoin: 'dogecoin',
+  ethereum: 'ethereum',
+  fido: 'fido',
+  litecoin: 'litecoin',
+  stratis: 'stratis',
+  ripple: 'ripple',
+  zcash: 'zcash',
+  komodo: 'komodo',
+  ssh: 'ssh',
+  posw: 'posw',
+  ark: 'ark',
+  neo: 'neo',
+  stellar: 'stellar',
+  monero: 'monero',
+  gnupg: 'gnupg',
+}
+
+stories.add('ManagerApp', () => (
+  <Box bg="lightGrey" p={6} m={-4}>
+    <ManagerApp
+      name={text('name', 'Bitcoin')}
+      icon={select('icon', icons, 'bitcoin')}
+      version={text('version', 'Version 1.0.0')}
+      onInstall={action('onInstall')}
+    />
+  </Box>
+))

From c7143cd31d448037f4ced5f34c3277b7aed9fc8d Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 13 Apr 2018 11:47:16 +0200
Subject: [PATCH 4/4] Add translations to manager page

---
 src/components/ManagerPage/AppsList.js   |  9 ++++++---
 src/components/ManagerPage/ManagerApp.js | 12 +++++++++---
 static/i18n/en/manager.yml               |  2 ++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js
index a4179c81..eb25dca4 100644
--- a/src/components/ManagerPage/AppsList.js
+++ b/src/components/ManagerPage/AppsList.js
@@ -2,13 +2,14 @@
 
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
+import { translate } from 'react-i18next'
 
 import { runJob } from 'renderer/events'
 
 import Box from 'components/base/Box'
 import Modal, { ModalBody } from 'components/base/Modal'
 
-import type { Device } from 'types/common'
+import type { Device, T } from 'types/common'
 
 import ManagerApp from './ManagerApp'
 
@@ -42,6 +43,7 @@ type LedgerApp = {
 
 type Props = {
   device: Device,
+  t: T,
 }
 
 type State = {
@@ -152,11 +154,12 @@ class AppsList extends PureComponent<Props, State> {
   }
 
   render() {
+    const { t } = this.props
     return (
       <Box flow={6}>
         <Box>
           <Box mb={4} color="dark" ff="Museo Sans" fontSize={6}>
-            {'All apps'}
+            {t('manager:allApps')}
           </Box>
           {this.renderList()}
         </Box>
@@ -165,4 +168,4 @@ class AppsList extends PureComponent<Props, State> {
   }
 }
 
-export default AppsList
+export default translate()(AppsList)
diff --git a/src/components/ManagerPage/ManagerApp.js b/src/components/ManagerPage/ManagerApp.js
index 69cadf47..d4680a5c 100644
--- a/src/components/ManagerPage/ManagerApp.js
+++ b/src/components/ManagerPage/ManagerApp.js
@@ -2,6 +2,9 @@
 
 import React from 'react'
 import styled from 'styled-components'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
@@ -40,6 +43,7 @@ const AppName = styled(Box).attrs({
 `
 
 type Props = {
+  t: T,
   name: string,
   version: string,
   icon: string,
@@ -47,8 +51,8 @@ type Props = {
   // onUninstall: Function,
 }
 
-export default function ManagerApp(props: Props) {
-  const { name, version, icon, onInstall } = props
+function ManagerApp(props: Props) {
+  const { name, version, icon, onInstall, t } = props
   const iconUrl = `https://api.ledgerwallet.com/update/assets/icons/${icon}`
   return (
     <Container>
@@ -60,8 +64,10 @@ export default function ManagerApp(props: Props) {
         </Text>
       </Box>
       <Button outline onClick={onInstall}>
-        {'Install'}
+        {t('manager:install')}
       </Button>
     </Container>
   )
 }
+
+export default translate()(ManagerApp)
diff --git a/static/i18n/en/manager.yml b/static/i18n/en/manager.yml
index 1ebabc12..49396b36 100644
--- a/static/i18n/en/manager.yml
+++ b/static/i18n/en/manager.yml
@@ -1,3 +1,5 @@
 tabs:
   apps: Apps
   device: My device
+install: Install
+allApps: All apps