ui for firmware update

src/components/ManagerPage/AppSearchBar.js

@@ -1,6 +1,10 @@
 // @flow
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
+import { color, fontSize, space } from 'styled-system'
+import fontFamily from 'styles/styled/fontFamily'
+
+import { ff } from 'styles/helpers'
 
 import Box from 'components/base/Box'
 import Search from 'components/base/Search'
@@ -40,16 +44,26 @@ const SearchBarWrapper = styled(Box).attrs({
   padding: 0 13px;
 `
 
-const Input = styled.input`
-  width: 100%;
+const Input = styled.input.attrs({
+  ff: 'Open Sans|SemiBold',
+  color: 'dark',
+  mx: 3,
+  fontSize: 4,
+})`
+  ${space};
+  ${fontFamily};
+  ${fontSize};
+  ${color};
+
   border: 0;
-  margin: 0 13px;
   flex: 1;
   outline: none;
   background: transparent;
-  color: black;
-  font-family: 'Open Sans';
-  font-weight: 600;
+
+  &::placeholder {
+    color: ${p => p.theme.colors.fog};
+    ${() => ff('Open Sans|Regular')};
+  }
 `
 
 class AppSearchBar extends PureComponent<Props, State> {
@@ -86,6 +100,7 @@ class AppSearchBar extends PureComponent<Props, State> {
             onChange={this.handleChange}
             onFocus={this.handleFocus(true)}
             onBlur={this.handleFocus(false)}
+            placeholder={'Search app'}
           />
           {!!query && <CrossIcon size={16} cursor="pointer" onClick={this.reset} />}
         </SearchBarWrapper>

src/components/ManagerPage/FirmwareUpdate.js

@@ -1,7 +1,7 @@
 // @flow
 
 import logger from 'logger'
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import isEqual from 'lodash/isEqual'
 import isEmpty from 'lodash/isEmpty'
 
@@ -14,6 +14,9 @@ import Box, { Card } from 'components/base/Box'
 import Button from 'components/base/Button'
 import Text from 'components/base/Text'
 
+import NanoS from 'icons/device/NanoS'
+import CheckFull from 'icons/CheckFull'
+
 let CACHED_LATEST_FIRMWARE = null
 
 type FirmwareInfos = {
@@ -89,31 +92,49 @@ class FirmwareUpdate extends PureComponent<Props, State> {
   }
 
   render() {
-    const { t, ...props } = this.props
+    const { t, infos } = this.props
     const { latestFirmware } = this.state
 
-    if (!latestFirmware) {
-      return null
-    }
-
     return (
-      <Box flow={4} {...props}>
-        <Card flow={2} {...props}>
-          <Box horizontal align="center" flow={2}>
-            <Text ff="Open Sans|Regular" fontSize={4}>{`${t('manager:latestFirmware')}: ${
-              latestFirmware.name
-            }`}</Text>
-            <Button outline onClick={this.installFirmware(latestFirmware)}>
-              {t('manager:install')}
-            </Button>
+      <Card px={4} py={25}>
+        <Box horizontal align="center" flow={2}>
+          <Box color="dark">
+            <NanoS size={30} />
+          </Box>
+          <Box>
+            <Box horizontal align="center">
+              <Text ff="Open Sans|SemiBold" fontSize={4} color="dark">
+                Ledger Nano S
+              </Text>
+              <Box color="wallet" style={{ marginLeft: 10 }}>
+                <CheckFull size={13} color="wallet" />
+              </Box>
+            </Box>
+            <Text ff="Open Sans|SemiBold" fontSize={2}>
+              Firmware {infos.version}
+            </Text>
           </Box>
-          <Box
-            fontSize={3}
-            style={{ whiteSpace: 'pre' }}
-            dangerouslySetInnerHTML={{ __html: latestFirmware.notes }}
-          />
-        </Card>
-      </Box>
+          {latestFirmware && (
+            <Fragment>
+              <Text
+                ff="Open Sans|Regular"
+                fontSize={4}
+                style={{ marginLeft: 'auto', marginRight: 15 }}
+              >
+                {t('manager:latestFirmware', { version: latestFirmware.name })}
+              </Text>
+              <Button primary onClick={this.installFirmware(latestFirmware)}>
+                {t('manager:installFirmware')}
+              </Button>
+            </Fragment>
+          )}
+        </Box>
+        {/* <Box
+          fontSize={3}
+          style={{ whiteSpace: 'pre' }}
+          dangerouslySetInnerHTML={{ __html: latestFirmware.notes }}
+        /> */}
+      </Card>
     )
   }
 }

src/components/ManagerPage/ManagerApp.js

@@ -65,7 +65,7 @@ function ManagerApp(props: Props) {
         </Text>
       </Box>
       <Button outline onClick={onInstall}>
-        {t('manager:install')}
+        {t('manager:installApps')}
       </Button>
       <Button outline onClick={onUninstall} outlineColor="grey">
         <Trash size={16} fill="grey" />

src/components/ManagerPage/Workflow.js

@@ -148,7 +148,7 @@ class Workflow extends PureComponent<Props, State> {
                         <img
                           src={i('logos/connectDevice.png')}
                           alt="connect your device"
-                          style={{ marginBottom: 30, maxWidth: 360, width: '100%' }}
+                          style={{ marginBottom: 30, maxWidth: 362, width: '100%' }}
                         />
                         <Text
                           ff="Museo Sans|Regular"

src/components/ManagerPage/index.js

@@ -34,8 +34,36 @@ type State = {
 }
 
 class ManagerPage extends PureComponent<Props, State> {
-  render(): Node {
+  renderDashboard = (device: Device, deviceInfo: DeviceInfo) => {
     const { t } = this.props
+    return (
+      <Box flow={4}>
+        <Box>
+          <Text ff="Museo Sans|Regular" fontSize={7} color="black">
+            {t('manager:title')}
+          </Text>
+          <Text ff="Museo Sans|Light" fontSize={5}>
+            {t('manager:subtitle')}
+          </Text>
+        </Box>
+        <Box mt={7}>
+          <FirmwareUpdate
+            infos={{
+              targetId: deviceInfo.targetId,
+              version: deviceInfo.version,
+            }}
+            device={device}
+            t={t}
+          />
+        </Box>
+        <Box>
+          <AppsList device={device} targetId={deviceInfo.targetId} />
+        </Box>
+      </Box>
+    )
+  }
+
+  render(): Node {
     return (
       <Workflow
         renderError={(dashboardError: ?Error, genuineError: ?Error) => {
@@ -49,31 +77,7 @@ class ManagerPage extends PureComponent<Props, State> {
         renderMcuUpdate={(deviceInfo: DeviceInfo) => (
           <p>FLASH MCU (TEMPLATE + ACTION WIP) {deviceInfo.mcu}</p>
         )}
-        renderDashboard={(device: Device, deviceInfo: DeviceInfo) => (
-          <Box flow={4}>
-            <Box>
-              <Text ff="Museo Sans|Regular" fontSize={7} color="black">
-                {t('manager:title')}
-              </Text>
-              <Text ff="Museo Sans|Light" fontSize={5}>
-                {t('manager:subtitle')}
-              </Text>
-            </Box>
-            <Box mt={7}>
-              <FirmwareUpdate
-                infos={{
-                  targetId: deviceInfo.targetId,
-                  version: deviceInfo.version,
-                }}
-                device={device}
-                t={t}
-              />
-            </Box>
-            <Box>
-              <AppsList device={device} targetId={deviceInfo.targetId} />
-            </Box>
-          </Box>
-        )}
+        renderDashboard={this.renderDashboard}
       />
     )
   }

src/helpers/constants.js

@@ -1,6 +1,7 @@
 // Socket endpoint
 
 export const BASE_SOCKET_URL = 'ws://api.ledgerwallet.com'
+export const BASE_SOCKET_URL_TEMP = 'ws://manager.ledger.fr:3500'
 // If you want to test locally with https://github.com/LedgerHQ/ledger-update-python-api
 // export const BASE_SOCKET_URL = 'ws://localhost:3001/update'
 

src/icons/CheckFull.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react'
+
+const path = (
+  <path
+    fill="currentColor"
+    d="M6.5 13a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13zm2.146-8.702L5.484 7.46l-1.05-1.05a.402.402 0 0 0-.57 0l-.359.36a.402.402 0 0 0 0 .568L5.2 9.032a.402.402 0 0 0 .57 0l3.806-3.806a.402.402 0 0 0 0-.57l-.36-.358a.402.402 0 0 0-.569 0z"
+  />
+)
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 13 13" height={size} width={size} {...p}>
+    {path}
+  </svg>
+)

static/i18n/en/manager.yml

@@ -1,14 +1,15 @@
 tabs:
   apps: Apps
   device: My device
-install: Install
+installApps: Install
+installFirmware: Update firmware
 allApps: Apps
 apps:
   help: To update an app, you have to uninstall the app and re install it.
 title: Manager
 subtitle: Get all your apps here
 firmwareUpdate: Firmware update
-latestFirmware: Firmware
+latestFirmware: A new firmware {{version}} is available
 plugYourDevice:
   title: Plug your device
   desc: Please connect your Ledger device and follow the steps below to access the manager