status-im/ens-usernames
2
0
Fork 0
mirror of https://github.com/status-im/ens-usernames.git synced 2025-02-26 00:55:20 +00:00
Code Issues Projects Releases Wiki Activity

[#30]: Styling issues

Browse Source
This commit is contained in:
Aleksandr Pantiukhov 2018-10-04 23:46:05 +03:00
parent 54509df62b
commit 396e055117
6 changed files with 70 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/ens/DisplayBox.js
View File

@ -4,13 +4,12 @@ import { connect } from 'react-redux';
import { YOUR_CONTACT_CODE } from './constants';
import { checkAndDispatchStatusContactCode } from '../../actions/accounts';
const WrappedDisplayBox = ({ displayType, pubKey, getStatusContactCode }) => (
<div onClick={() => getStatusContactCode(displayType, pubKey)}>
<div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>{displayType}</div>
<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
<div style={{ margin: '3%', wordBreak: 'break-word' }}>
<Typography type="body1">{pubKey}</Typography>
<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '7px 12px 14px 12px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
<div style={{ margin: '16px', wordBreak: 'break-word' }}>
<Typography type='body1'>{pubKey}</Typography>
</div>
</div>
</div>

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

@ -33,6 +33,7 @@ import IDNANormalizer from 'idna-normalize';
import { nullAddress, getResolver } from './utils/domain';
import { YOUR_CONTACT_CODE } from './constants';
import DisplayBox from './DisplayBox';
import styled from "styled-components";
const normalizer = new IDNANormalizer();
const invalidSuffix = '0000000000000000000000000000000000000000'
@ -71,7 +72,7 @@ const pastReleaseDate = timestamp => new Date > new Date(timestamp * 1000);
const MobileAddressDisplay = ({ domainName, address, statusAccount, expirationTime, creationTime, defaultAccount, isOwner, edit, onSubmit, handleChange, values, handleSubmit }) => (
<Fragment>
<LookupForm {...{ handleSubmit, values, handleChange }} />
<Info background={isOwner ? '#44D058' : '#000000'} style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
<Info background={isOwner ? '#44D058' : '#000000'} style={{ margin: '0.5em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
<Typography variant="title" style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
}>
@ -155,6 +156,16 @@ class RenderAddresses extends PureComponent {
}
}
const InfoHeading = styled.h2`
line-height: 26px;
font-size: 22px;
text-align: center;
letter-spacing: -0.275px;
margin: 0 0 12px 0;
color: #FFFFFF;
`;
const RegisterInfoCard = ({ formattedDomain, domainPrice, registryOwnsDomain }) => (
<Fragment>
<Hidden mdDown>
@ -163,26 +174,31 @@ const RegisterInfoCard = ({ formattedDomain, domainPrice, registryOwnsDomain })
</Info.Action>
</Hidden>
<Hidden mdUp>
<Info background="#415be3" style={{ margin: '0.4em' }}>
<Typography variant="title" style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
<Info background="#415be3" style={{ margin: '12px' }}>
<div style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '36px 18px' }
}>
<img src={CheckCircle} style={{ maxWidth: '2.5em', marginBottom: '0.5em' }} />
<b>{formattedDomain.toLowerCase()}</b>
<img src={CheckCircle} style={{ maxWidth: '2.5em', marginBottom: '14px' }} />
<InfoHeading>{formattedDomain.toLowerCase()}</InfoHeading>
<div style={{ fontWeight: 300, fontSize: '15px' }}>
available
</div>
</Typography>
</div>
</Info>
</Hidden>
<Hidden mdUp>
<Typography style={{ textAlign: 'center', fontSize: '17px', fontWeight: '500', margin: '1.5em 0 0.3em 0' }}>
{!!domainPrice && formatPrice(fromWei(domainPrice))} SNT to register
</Typography>
<Typography style={{ textAlign: 'center', padding: '1.5em' }}>
<Typography style={{textAlign: 'center', padding: '1.5em'}}>
{registryOwnsDomain ?
'Add your contact code to use your name in Status chat.' :
'This domain is not owned by the registry'}
<span>
Add your contact code to use
<br />
your name in Status chat.
</span>
:
<span>This domain is not owned by the registry'</span>}
</Typography>
</Hidden>
</Fragment>
@ -320,29 +336,29 @@ const InnerForm = ({
<StatusLogo />
<img style={{maxWidth: '150px', alignSelf: 'center'}} src={EnsLogo} alt="Ens Logo"/>
</span>
</Hidden>
{!status|| !status.address ?
<LookupForm {...{ handleSubmit, values, handleChange }} isWarningDisplayed={status && status.isInvalidDomain}/>
</Hidden>
{!status || !status.address ?
<LookupForm {...{handleSubmit, values, handleChange}} isWarningDisplayed={status && status.isInvalidDomain}/>
:
validAddress(status.address) || defaultAccount === status.ownerAddress ?
<DisplayAddress
{...{ handleSubmit, values, handleChange }}
domainName={status.domainName}
address={status.address}
statusAccount={status.statusAccount}
expirationTime={status.expirationTime}
creationTime={status.creationTime}ownerAddress={status.ownerAddress}
registryOwnsDomain={status.registryOwnsDomain}
setStatus={setStatus} /> :
<div>
<LookupForm {...{ handleSubmit, values, handleChange }} isWarningDisplayed={false} />
<ConnectedRegister
style={{ position: 'relative' }}
setStatus={setStatus}
registryOwnsDomain={status.registryOwnsDomain}
ownerAddress={status.ownerAddress}
domainName={status.domainName} />
</div>
<DisplayAddress
{...{handleSubmit, values, handleChange}}
domainName={status.domainName}
address={status.address}
statusAccount={status.statusAccount}
expirationTime={status.expirationTime}
creationTime={status.creationTime} ownerAddress={status.ownerAddress}
registryOwnsDomain={status.registryOwnsDomain}
setStatus={setStatus}/> :
<div>
<LookupForm {...{handleSubmit, values, handleChange}} isWarningDisplayed={false}/>
<ConnectedRegister
style={{position: 'relative'}}
setStatus={setStatus}
registryOwnsDomain={status.registryOwnsDomain}
ownerAddress={status.ownerAddress}
domainName={status.domainName}/>
</div>
}
</div>
);

3
app/components/ens/registerSubDomain.js
View File

@ -20,7 +20,6 @@ import { YOUR_CONTACT_CODE } from './constants';
const { soliditySha3, fromWei } = web3.utils;
const formRef = React.createRef();
const displayTerms = status => status === 'terms';
const InnerForm = ({
@ -41,7 +40,7 @@ const InnerForm = ({
SNTBalance,
}) => (
<form onSubmit={handleSubmit} ref={formRef}>
<div style={{ margin: '10px' }}>
<div style={{ margin: '12px' }}>
{!subDomain &&
<FieldGroup
id="subDomain"

10
app/components/ens/welcome.css
View File

@ -3,6 +3,16 @@
text-align: center;
}
.ens-welcome a,
.ens-welcome a:hover,
.ens-welcome a:visited {
color: #4360df;
}
.ens-welcome__highlight {
color: #4360df;
}
.ens-welcome__img {
margin: 20px 0 50px;
}

2
app/components/ens/welcome.js
View File

@ -23,7 +23,7 @@ const WelcomeContent = () => (
<ol className="ens-welcome__list">
<li className="item">
<div className="title">Simplify your ETH address</div>
<div className="text">Your complex wallet address (0x...) becomes an easy to read, remember & share URL: <span className="text-primary">myname.stateofus.eth</span></div>
<div className="text">Your complex wallet address (0x...) becomes an easy to read, remember & share URL: <span className="ens-welcome__highlight">myname.stateofus.eth</span></div>
</li>
<li className="item">
<div className="title">100 SNT to register</div>

14
app/ui/components/Info.js
View File

@ -9,27 +9,29 @@ const Info = ({ children, title, ...props }) => (
{title && <Title>{title}</Title>}
{children}
</Main>
)
);
Info.propTypes = {
background: PropTypes.string,
children: PropTypes.node,
title: PropTypes.node,
}
};
Info.defaultProps = {
background: theme.infoBackground,
}
};
const Main = styled.section`
background: ${({ background }) => background};
padding: 15px;
border-radius: 4px;
padding: 18px;
border-radius: 8px;
word-wrap: break-word;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
border-radius: 8px;
`
const Title = styled.h1`
display: flex;
margin-top: 0px; // needed to overwrite bootstrap.css
`
`;
Info.Action = Action
Info.Permissions = Permissions