Re-use our input component for apps list

src/components/ManagerPage/AppSearchBar.js

@@ -1,14 +1,12 @@
 // @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 type { LedgerScriptParams } from 'helpers/common'
+import React, { PureComponent, Fragment } from 'react'
 
-import { ff } from 'styles/helpers'
+import type { LedgerScriptParams } from 'helpers/common'
 
 import Box from 'components/base/Box'
+import Space from 'components/base/Space'
+import Input from 'components/base/Input'
 import Search from 'components/base/Search'
 
 import SearchIcon from 'icons/Search'
@@ -24,53 +22,13 @@ type State = {
   focused: boolean,
 }
 
-const SearchBarWrapper = styled(Box).attrs({
-  horizontal: true,
-  borderRadius: 4,
-})`
-  height: 42px;
-  width: 100%;
-  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({
-  ff: 'Open Sans|SemiBold',
-  color: 'dark',
-  mx: 3,
-  fontSize: 4,
-})`
-  ${space};
-  ${fontFamily};
-  ${fontSize};
-  ${color};
-
-  border: 0;
-  flex: 1;
-  outline: none;
-  background: transparent;
-
-  &::placeholder {
-    color: ${p => p.theme.colors.fog};
-    ${() => ff('Open Sans|Regular')};
-  }
-`
-
 class AppSearchBar extends PureComponent<Props, State> {
   state = {
     query: '',
     focused: false,
   }
 
-  handleChange = (e: any) => this.setState({ query: e.target.value })
+  handleChange = (query: string) => this.setState({ query })
 
   handleFocus = (bool: boolean) => () => this.setState({ focused: bool })
 
@@ -88,9 +46,7 @@ class AppSearchBar extends PureComponent<Props, State> {
     const color = focused ? 'black' : 'grey'
 
     return (
-      <Box>
-        <SearchBarWrapper align="center" focused={focused}>
-          <SearchIcon size={16} style={{ color }} />
+      <Fragment>
         <Input
           innerRef={c => (this.input = c)}
           type="text"
@@ -99,9 +55,20 @@ class AppSearchBar extends PureComponent<Props, State> {
           onFocus={this.handleFocus(true)}
           onBlur={this.handleFocus(false)}
           placeholder={'Search app'}
+          renderLeft={
+            <Box pl={3} justify="center">
+              <SearchIcon size={16} style={{ color }} />
+            </Box>
+          }
+          renderRight={
+            query ? (
+              <Box justify="center" cursor="pointer" onClick={this.reset} px={3}>
+                <CrossIcon size={16} />
+              </Box>
+            ) : null
+          }
         />
-          {!!query && <CrossIcon size={16} cursor="pointer" onClick={this.reset} />}
-        </SearchBarWrapper>
+        <Space of={30} />
         <Search
           fuseOptions={{
             threshold: 0.5,
@@ -111,7 +78,7 @@ class AppSearchBar extends PureComponent<Props, State> {
           items={list}
           render={items => children(items)}
         />
-      </Box>
+      </Fragment>
     )
   }
 }

src/components/ManagerPage/AppsList.js

@@ -21,7 +21,7 @@ import Spinner from 'components/base/Spinner'
 import Button from 'components/base/Button'
 import TranslatedError from 'components/TranslatedError'
 
-import ExclamationCircle from 'icons/ExclamationCircle'
+import IconInfoCircle from 'icons/InfoCircle'
 import ExclamationCircleThin from 'icons/ExclamationCircleThin'
 import Update from 'icons/Update'
 import Trash from 'icons/Trash'
@@ -246,9 +246,8 @@ class AppsList extends PureComponent<Props, State> {
     return (
       <Box flow={6}>
         <Box>
-          <Box mb={4} color="dark" ff="Museo Sans" fontSize={5} flow={2} horizontal>
-            <span>{t('app:manager.apps.all')}</span>
-            <span>
+          <Box mb={4} color="dark" ff="Museo Sans" fontSize={5} flow={2} horizontal align="center">
+            <span style={{ lineHeight: 1 }}>{t('app:manager.apps.all')}</span>
             <Tooltip
               render={() => (
                 <Box ff="Open Sans|SemiBold" fontSize={2}>
@@ -256,9 +255,10 @@ class AppsList extends PureComponent<Props, State> {
                 </Box>
               )}
             >
-                <ExclamationCircle size={12} />
+              <Box color="grey">
+                <IconInfoCircle size={12} />
+              </Box>
             </Tooltip>
-            </span>
           </Box>
           {this.renderList()}
         </Box>