add seperate search interfaces between mobile and desktop

app/components/ens/nameLookup.js

@@ -137,18 +137,33 @@ const DisplayAddress = (props) => (
 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>
+      <Hidden smDown>
+        <Field label="Enter Domain or Status Name" wide>
+          <TextInput
+            value={values.domainName}
+            name="domainName"
+            onChange={handleChange}
+            wide
+            required />
+        </Field>
+      </Hidden>
+      <Hidden smUp>
+        <Field label="Search for vacant names in domains stateofus.eth and domains associated with this registry"  style={{ textAlign: 'center', padding: '0px 10px 0 10px' }} wide>
+          <MobileSearch
+            name="domainName"
+            style={{ marginTop: '10px' }}
+            placeholder='Search'
+            value={values.domainName}
+            onChange={handleChange}
+            required
+            wide />
+        </Field>
+      </Hidden>
+      <Hidden smDown>
+        <Button mode="strong" type="submit" wide>
+          Lookup Address
+        </Button>
+      </Hidden>
     </form>
   </Fragment>
 )
@@ -166,10 +181,10 @@ const InnerForm = ({
 }) => (
   <div style={{ margin: '10px' }}>
     <Hidden smDown>
-    <span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
-      <StatusLogo />
-      <img  style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
-    </span>
+      <span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
+        <StatusLogo />
+        <img  style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
+      </span>
     </Hidden>
     {!status
      ? <LookupForm {...{ handleSubmit, values, handleChange }} />

app/ui/components/MobileSearch.js

@@ -20,7 +20,7 @@ const MobileInput = styled.input`
   background-color: #eef2f5;
   font-size: 16px;
   border: none;
-  height: 5%;
+  height: 7%;
   width: ${({ wide }) => (wide ? '100%' : 'auto')};
   appearance: none;
   box-shadow: none;