update search field design

app/components/ens/nameLookup.js

@@ -166,7 +166,7 @@ const DisplayAddress = (props) => (
 
 const LookupForm = ({ handleSubmit, values, handleChange }) => (
   <Fragment>
-    <form onSubmit={handleSubmit} style={{ marginTop: '3em' }}>
+    <form onSubmit={handleSubmit}>
       <Hidden mdDown>
         <Field label="Enter Domain or Status Name" wide>
           <TextInput
@@ -178,17 +178,18 @@ const LookupForm = ({ handleSubmit, values, handleChange }) => (
         </Field>
       </Hidden>
       <Hidden mdUp>
-        <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
-            search
-            name="domainName"
-            style={{ marginTop: '10px' }}
-            placeholder='Search'
-            value={values.domainName}
-            onChange={handleChange}
-            required
-            wide />
-        </Field>
+        <MobileSearch
+          search
+          name="domainName"
+          placeholder='Search for vacant name'
+          value={values.domainName}
+          onChange={handleChange}
+          required
+          wide />
+        <Typography variant="subheading" style={{ color: '#939ba1', textAlign: 'center', marginTop: '25vh' }}>
+          Symbols * / <br/>
+          are not supported
+        </Typography>
       </Hidden>
       <Hidden mdDown>
         <Button mode="strong" type="submit" wide>

app/ui/components/MobileSearch.js

@@ -31,7 +31,7 @@ const MobileInput = styled.input`
   width: ${({ wide }) => (wide ? '100%' : 'auto')};
   appearance: none;
   box-shadow: none;
-  padding-left: ${({ search }) => (search ? '40px' : '15px')};
+  padding-left: ${({ search }) => (search ? '45px' : '15px')};
   &:focus {
   outline: none;
   border-color: ${theme.contentBorderActive};
@@ -41,7 +41,7 @@ const MobileInput = styled.input`
 const MobileSearch = props => (
   <div style={{ position: 'relative' }}>
     {props.search && <div style={searchWrapper}>
-      <SearchIcon />
+      <SearchIcon style={{ color: theme.accent }}/>
     </div>}
     <div style={{ display: 'flex' }}>
       <MobileInput {...props} />