pixel push on manager page

src/components/ManagerPage/AppSearchBar.js

@@ -42,6 +42,13 @@ const SearchBarWrapper = styled(Box).attrs({
   margin: 0 0 20px 0;
   background-color: white;
   padding: 0 13px;
+
+  ${p =>
+    p.focused
+      ? `
+    border: 1px solid #6490f1;
+  `
+      : 'border: 1px solid white;'};
 `
 
 const Input = styled.input.attrs({
@@ -91,7 +98,7 @@ class AppSearchBar extends PureComponent<Props, State> {
 
     return (
       <Box>
-        <SearchBarWrapper align="center">
+        <SearchBarWrapper align="center" focused={focused}>
           <SearchIcon size={16} style={{ color }} />
           <Input
             innerRef={c => (this.input = c)}

src/components/ManagerPage/AppsList.js

@@ -16,6 +16,7 @@ import Tooltip from 'components/base/Tooltip'
 import Text from 'components/base/Text'
 import Progress from 'components/base/Progress'
 import Spinner from 'components/base/Spinner'
+import Button from 'components/base/Button'
 
 import ExclamationCircle from 'icons/ExclamationCircle'
 import Update from 'icons/Update'
@@ -39,7 +40,7 @@ const ICONS_FALLBACK = {
 }
 
 type Status = 'loading' | 'idle' | 'busy' | 'success' | 'error'
-type Mode = '' | 'installing' | 'uninstalling'
+type Mode = 'home' | 'installing' | 'uninstalling'
 
 type LedgerApp = {
   name: string,
@@ -72,7 +73,7 @@ class AppsList extends PureComponent<Props, State> {
     error: null,
     appsList: [],
     app: '',
-    mode: '',
+    mode: 'home',
   }
 
   componentDidMount() {
@@ -109,7 +110,7 @@ class AppsList extends PureComponent<Props, State> {
       await installApp.send(data).toPromise()
       this.setState({ status: 'success', app: '' })
     } catch (err) {
-      this.setState({ status: 'error', error: err.message, app: '', mode: '' })
+      this.setState({ status: 'error', error: err.message, app: '', mode: 'home' })
     }
   }
 
@@ -124,11 +125,11 @@ class AppsList extends PureComponent<Props, State> {
       await uninstallApp.send(data).toPromise()
       this.setState({ status: 'success', app: '' })
     } catch (err) {
-      this.setState({ status: 'error', error: err.message, app: '', mode: '' })
+      this.setState({ status: 'error', error: err.message, app: '', mode: 'home' })
     }
   }
 
-  handleCloseModal = () => this.setState({ status: 'idle', mode: '' })
+  handleCloseModal = () => this.setState({ status: 'idle', mode: 'home' })
 
   renderModal = () => {
     const { t } = this.props
@@ -153,7 +154,9 @@ class AppsList extends PureComponent<Props, State> {
               <Box align="center" justify="center" flow={3}>
                 <div>{'error happened'}</div>
                 {error}
-                <button onClick={this.handleCloseModal}>close</button>
+                <Button primary onClick={this.handleCloseModal}>
+                  close
+                </Button>
               </Box>
             ) : status === 'success' ? (
               <Box align="center" justify="center" flow={3}>
@@ -168,7 +171,9 @@ class AppsList extends PureComponent<Props, State> {
                     { app },
                   )}
                 </Text>
-                <button onClick={this.handleCloseModal}>close</button>
+                <Button primary onClick={this.handleCloseModal}>
+                  close
+                </Button>
               </Box>
             ) : null}
           </ModalBody>

src/components/ManagerPage/Dashboard.js

@@ -33,7 +33,7 @@ const Dashboard = ({ device, deviceInfo, t }: Props) => (
         {t('app:manager.subtitle')}
       </Text>
     </Box>
-    <Box mt={7}>
+    <Box mt={5}>
       <FirmwareUpdate
         infos={{
           targetId: deviceInfo.targetId,
@@ -42,7 +42,7 @@ const Dashboard = ({ device, deviceInfo, t }: Props) => (
         device={device}
       />
     </Box>
-    <Box>
+    <Box mt={5}>
       <AppsList device={device} targetId={deviceInfo.targetId} />
     </Box>
   </Box>

src/components/ManagerPage/FirmwareUpdate.js

@@ -102,7 +102,7 @@ class FirmwareUpdate extends PureComponent<Props, State> {
     const { latestFirmware } = this.state
 
     return (
-      <Card px={4} py={25}>
+      <Card p={4}>
         <Box horizontal align="center" flow={2}>
           <Box color="dark">
             <NanoS size={30} />

src/components/ManagerPage/ManagerApp.js

@@ -14,13 +14,14 @@ import Button from 'components/base/Button'
 
 const Container = styled(Box).attrs({
   horizontal: true,
-  m: 3,
+  my: 2,
+  mx: 3,
   p: 4,
   boxShadow: 0,
   borderRadius: 4,
-  flow: 3,
+  flow: 2,
 })`
-  width: 342px;
+  width: calc(50% - 30px);
   background: white;
   line-height: normal;
 `
@@ -37,7 +38,6 @@ const AppName = styled(Box).attrs({
   color: 'dark',
 })`
   display: block;
-  width: 115px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -57,8 +57,8 @@ function ManagerApp({ name, version, icon, onInstall, onUninstall, t }: Props) {
   return (
     <Container>
       <AppIcon src={iconUrl} />
-      <Box flex="1">
-        <AppName>{name}</AppName>
+      <Box flex="1" ml={3}>
+        <AppName flex={1}>{name}</AppName>
         <Text ff="Open Sans|Regular" fontSize={3} color="grey">
           {version}
         </Text>

src/components/ManagerPage/WorkflowDefault.js

@@ -118,7 +118,7 @@ const WorkflowDefault = ({ device, deviceInfo, errors, isGenuine, t }: Props) =>
         {t('app:manager.device.desc')}
       </Text>
     </Box>
-    <Box flow={4} style={{ maxWidth: 460, padding: '60px 10px 0' }}>
+    <Box flow={4} style={{ maxWidth: 460, padding: '60px 10px 0' }} ff="Open Sans|Regular">
       {/* DEVICE CHECK */}
       <Step validated={!!device}>
         <StepContent>