status-im
/
ens-usernames
mirror of https://github.com/status-im/ens-usernames.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

update search field design

This commit is contained in:
Barry Gitarts 2018-07-13 13:59:18 -04:00
parent 0abd4844f4
commit 8fb6fc8a2e
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/components/ens/nameLookup.js
View File

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

4
app/ui/components/MobileSearch.js
View File

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