add mobile search according to status style

app/components/ens/nameLookup.js

@@ -2,8 +2,9 @@ import React, { Fragment, PureComponent } from 'react';
 import web3 from 'web3';
 import { connect } from 'react-redux';
 import { actions as accountActions } from '../../reducers/accounts';
+import Hidden from '@material-ui/core/Hidden';
 import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
-import { Button, Field, TextInput, Card, Info, Text } from '../../ui/components'
+import { Button, Field, TextInput, MobileSearch, Card, Info, Text } from '../../ui/components'
 import { IconCheck } from '../../ui/icons'
 import theme from '../../ui/theme'
 import { withFormik } from 'formik';
@@ -133,6 +134,25 @@ const DisplayAddress = (props) => (
   </Fragment>
 )
 
+const LookupForm = ({ handleSubmit, values, handleChange }) => (
+  <Fragment>
+    <form onSubmit={handleSubmit} style={{ marginTop: '3em' }}>
+      <Field label="Enter Domain or Status Name" wide>
+        <TextInput
+          value={values.domainName}
+          name="domainName"
+          onChange={handleChange}
+          wide
+          required />
+      </Field>
+      <MobileSearch style={{ marginBottom: '10px' }} wide />
+      <Button mode="strong" type="submit" wide>
+        Lookup Address
+      </Button>
+    </form>
+  </Fragment>
+)
+
 const InnerForm = ({
   values,
   errors,
@@ -144,25 +164,15 @@ const InnerForm = ({
   status,
   setStatus
 }) => (
-  <Card border="None" width="100%" height="auto">
+  <div style={{ margin: '10px' }}>
+    <Hidden smDown>
     <span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
-    <StatusLogo />
+      <StatusLogo />
-    <img  style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
+      <img  style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
     </span>
+    </Hidden>
     {!status
-     ? <form onSubmit={handleSubmit} style={{ marginTop: '3em' }}>
+     ? <LookupForm {...{ handleSubmit, values, handleChange }} />
-       <Field label="Enter Domain or Status Name" wide>
-         <TextInput
-           value={values.domainName}
-           name="domainName"
-           onChange={handleChange}
-           wide
-           required />
-       </Field>
-       <Button mode="strong" type="submit" wide>
-         Lookup Address
-       </Button>
-     </form>
      : validAddress(status.address) ?
      <DisplayAddress
        domainName={values.domainName}
@@ -174,7 +184,7 @@ const InnerForm = ({
        setStatus={setStatus}
        domainName={values.domainName}  />
     }
-  </Card>
+  </div>
 )
 
 const NameLookup = withFormik({

app/ui/components/MobileSearch.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import theme from '../theme'
+import SearchIcon from '@material-ui/icons/Search';
+
+const searchWrapper = {
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  paddingLeft: '11px',
+};
+
+const MobileInput = styled.input`
+  display: block;
+  border-radius: 4px;
+  background-color: #eef2f5;
+  font-size: 16px;
+  border: none;
+  height: 5%;
+  width: ${({ wide }) => (wide ? '100%' : 'auto')};
+  appearance: none;
+  box-shadow: none;
+  padding-left: 40px;
+  &:focus {
+  outline: none;
+  border-color: ${theme.contentBorderActive};
+  }
+`;
+
+const MobileSearch = props => (
+  <div style={{ position: 'relative' }}>
+    <div style={searchWrapper}>
+      <SearchIcon />
+    </div>
+    <MobileInput {...props} />
+  </div>
+);
+
+export default MobileSearch;

app/ui/components/index.js

@@ -5,5 +5,6 @@ export { default as Card } from './Card.js';
 export { default as Field } from './Field.js';
 export { default as Text } from './Text.js';
 export { default as TextInput } from './TextInput.js';
+export { default as MobileSearch } from './MobileSearch.js';
 export { default as Info } from './Info.js';
 

package.json

@@ -19,6 +19,7 @@
   "homepage": "https://github.com/status-im/contracts#readme",
   "dependencies": {
     "@material-ui/core": "^1.2.1",
+    "@material-ui/icons": "^1.1.0",
     "bignumber.js": "^5.0.0",
     "classnames": "^2.2.6",
     "eth-ens-namehash": "^2.0.8",