last fixes — better error handling, arrow button instead of old one

app/components/ens/nameLookup.js

@@ -322,6 +322,7 @@ class LookupForm extends React.Component {
           <Hidden mdUp>
             <MobileSearch
               name="domainName"
+              type="search"
               placeholder='Search for available name'
               value={values.domainName}
               onChange={handleChange}

app/components/ens/registerSubDomain.js

@@ -5,7 +5,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import Hidden from '@material-ui/core/Hidden';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import {Button, StyledButton} from '../../ui/components';
+import {ArrowButton, Button} from '../../ui/components';
 import {withFormik} from 'formik';
 import {hash} from 'eth-ens-namehash';
 import {zeroAddress, zeroBytes32, formatPrice} from './utils';
@@ -142,15 +142,22 @@ class InnerForm extends React.Component {
                         showBlueBox={!values.statusAddress}
                         onClick={() => this.requestStatusContactCode(this.props)}/>
 
-            <div style={{position: 'relative', left: 0, right: 0, bottom: 0, textAlign: 'center'}}>
+            <div style={{display: 'flex', flexDirection: 'row-reverse', marginTop: '16px', marginBottom: '16px'}}>
               {!isSubmitting ?
-                <StyledButton onClick={() => this.onRegisterClick(this.props)}>
+                <ArrowButton onClick={(e) => {
+                  this.onRegisterClick(this.props);
+                  e.preventDefault();
+                }}>
                   <div>
                     {`${editAccount ? 'Save' : 'Register'}`}
                   </div>
-                </StyledButton>
+                </ArrowButton>
                 :
-                <CircularProgress/>}
+                <div style={{flex: 1, textAlign: 'center'}}>
+                  <CircularProgress/>
+                </div>
+              }
+
               <Terms open={displayTerms(status)}
                      onSubmit={() => {
                        setStatus(null);
@@ -158,6 +165,8 @@ class InnerForm extends React.Component {
                      }}
                      form={formRef}/>
             </div>
+
+
           </Hidden>
         </div>
       </form>

app/components/ens/terms.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Dialog from '@material-ui/core/Dialog';
-import {StyledButton} from '../../ui/components';
+import {ArrowButton} from '../../ui/components';
 import styled from "styled-components";
 
 const TermsContainer = styled.div`
@@ -33,9 +33,7 @@ const ListContainer = styled.ul`
   }
 `;
 
-const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 };
-
-const Terms = ({ classes, open, onSubmit }) => (
+const Terms = ({ open, onSubmit }) => (
   <Dialog fullScreen open={open}>
     <TermsContainer>
       <InfoHeading className="ens-terms__title">Terms of name registration</InfoHeading>
@@ -58,12 +56,14 @@ const Terms = ({ classes, open, onSubmit }) => (
           <li>Registering an illegal name via the registry contract will result in the loss of your SNT deposit and removal of the name.</li>
           <li>Contact codes and wallet addresses associated with your name are publicly available information.</li>
         </ListContainer>
-        <div style={{textAlign: 'center'}}>
-          <StyledButton type="submit" onClick={onSubmit}>
-            <div>Let's Go</div>
-          </StyledButton>
-        </div>
       </TermsDescription>
+
+      <div style={{display: 'flex', flexDirection: 'row-reverse', marginBottom: '16px', marginRight: '8px'}}>
+        <ArrowButton type="submit" onClick={onSubmit}>
+          <div>Send SNT</div>
+        </ArrowButton>
+      </div>
+
     </TermsContainer>
   </Dialog>
 );

app/ui/components/ArrowButton.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import RightIcon from '../../ui/icons/svg/right.svg';
+import styled from "styled-components";
+
+const StyledContainer = styled.button`
+  border: 0;
+  background: none;
+  color: #4360DF;
+  display: flex;
+  flex-direction: row;
+  font-size: 15px;
+  line-height: 18px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+`;
+
+const StyledIcon = styled.img`
+  margin-left: 14px;
+`;
+
+const ArrowButton = ({ text, ...props }) => (
+  <StyledContainer {...props}>
+    {props.children}
+    <StyledIcon src={RightIcon} />
+  </StyledContainer>
+)
+
+export default ArrowButton;

app/ui/components/Warning.js

@@ -5,18 +5,18 @@ import styled from "styled-components";
 const StyledContainer = styled.div`
   text-align: center;
   margin-top: 40vh;
-`
+`;
 
 const StyledIcon = styled.img`
   display: block;
   margin: 0 auto 15px;
-`
+`;
 
 const Warning = ({ text, ...props }) => (
   <StyledContainer>
     <StyledIcon src={WarningIcon} />
     {props.children}
   </StyledContainer>
-)
+);
 
 export default Warning;

app/ui/components/index.js

@@ -2,6 +2,7 @@
 
 export * from './Button';
 export { default as StyledButton } from './StyledButton.js';
+export { default as ArrowButton } from './ArrowButton.js';
 export { default as Card } from './Card.js';
 export { default as Field } from './Field.js';
 export { default as Text } from './Text.js';

app/ui/icons/svg/right.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.70719 8.71434L1.69578 15.7079C1.3074 16.0953 0.681196 16.0988 0.291074 15.7097C-0.0963472 15.3232 -0.0907033 14.6911 0.292809 14.3085L6.61881 7.99859L0.292809 1.68865C-0.0955705 1.30126 -0.0990483 0.676638 0.291074 0.287507C0.678495 -0.0989301 1.31227 -0.0933004 1.69578 0.289237L8.70719 7.28284C8.93181 7.50689 9.02769 7.81029 8.99313 8.10159C8.97295 8.32613 8.8772 8.54476 8.70719 8.71434Z" fill="#4360DF"/>
+</svg>