Update manager page design

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

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',

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>
   )
 }

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') {

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};
   }
 `
 

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) : '')};
   }
 `

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>
 ))