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 { 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 { handleCloseModal = () => this.setState({ status: 'idle' }) - render() { + renderList() { const { status, error } = this.state return ( @@ -117,6 +120,7 @@ class AppsList extends PureComponent { { ) } + + render() { + return ( + + + + {'All apps'} + + {this.renderList()} + + + ) + } } 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 { 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 ( - + - - {name} - - {'Install'} - {'Remove'} + + {name} + + {version} + + ) } 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 { state = { - currentTab: 'device', + currentTab: 'apps', } handleTabChange = t => this.setState({ currentTab: t.value }) @@ -42,9 +42,6 @@ class ManagerPage extends PureComponent { 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', () => ( + + outline + + + + + + + ))