Update Connect Request screen design (#5644)
* Parameterize NetworkDisplay background colour * Update design for login request screen * Pass siteTitle, siteImage through for calls to ethereum.enable() * Bring the site images closer togetherfeature/default_network_editable
Whymarrh Whitby
6 years ago
committed by
Dan Finlay
parent
31cb111d2e
commit
26ada8a828
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,3 @@ |
||||
export {default} from './provider-page-container.component' |
||||
export {default as ProviderPageContainerContent} from './provider-page-container-content' |
||||
export {default as ProviderPageContainerHeader} from './provider-page-container-header' |
||||
@ -0,0 +1,120 @@ |
||||
.provider-approval-container { |
||||
display: flex; |
||||
|
||||
&__header { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-end; |
||||
border-bottom: 1px solid $geyser; |
||||
padding: 9px; |
||||
} |
||||
|
||||
&__content { |
||||
display: flex; |
||||
overflow-y: auto; |
||||
flex: 1; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
color: #7C808E; |
||||
|
||||
h1, h2 { |
||||
color: #4A4A4A; |
||||
display: flex; |
||||
justify-content: center; |
||||
text-align: center; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 16px; |
||||
line-height: 18px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 22px; |
||||
line-height: 26px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
p { |
||||
padding: 0 40px; |
||||
text-align: center; |
||||
font-size: 12px; |
||||
line-height: 18px; |
||||
} |
||||
|
||||
a, a:hover { |
||||
color: $dodger-blue; |
||||
} |
||||
|
||||
.provider-approval-visual { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
position: relative; |
||||
margin: 0 32px; |
||||
|
||||
section { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
flex: 1; |
||||
} |
||||
|
||||
h1 { |
||||
font-size: 14px; |
||||
line-height: 18px; |
||||
padding: 8px 0 0; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 10px; |
||||
line-height: 14px; |
||||
padding: 0; |
||||
color: #A2A4AC; |
||||
} |
||||
|
||||
&__check { |
||||
width: 40px; |
||||
height: 40px; |
||||
background: white url("/images/provider-approval-check.svg") no-repeat; |
||||
margin-top: 14px; |
||||
} |
||||
|
||||
&__identicon { |
||||
width: 64px; |
||||
height: 64px; |
||||
|
||||
&--default { |
||||
background-color: lightgray; |
||||
width: 64px; |
||||
height: 64px; |
||||
border-radius: 32px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
&:before { |
||||
border-top: 2px dashed #CDD1E4; |
||||
content: ""; |
||||
margin: 0 auto; |
||||
position: absolute; |
||||
top: 32px; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
width: 65%; |
||||
z-index: -1; |
||||
} |
||||
} |
||||
|
||||
.secure-badge { |
||||
display: flex; |
||||
justify-content: center; |
||||
padding: 25px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export {default} from './provider-page-container-content.container' |
||||
@ -0,0 +1,71 @@ |
||||
import PropTypes from 'prop-types' |
||||
import React, {PureComponent} from 'react' |
||||
import Identicon from '../../identicon' |
||||
|
||||
export default class ProviderPageContainerContent extends PureComponent { |
||||
static propTypes = { |
||||
origin: PropTypes.string.isRequired, |
||||
selectedIdentity: PropTypes.string.isRequired, |
||||
siteImage: PropTypes.string, |
||||
siteTitle: PropTypes.string.isRequired, |
||||
} |
||||
|
||||
static contextTypes = { |
||||
t: PropTypes.func, |
||||
}; |
||||
|
||||
renderConnectVisual = () => { |
||||
const { origin, selectedIdentity, siteImage, siteTitle } = this.props |
||||
|
||||
return ( |
||||
<div className="provider-approval-visual"> |
||||
<section> |
||||
{siteImage ? ( |
||||
<img |
||||
className="provider-approval-visual__identicon" |
||||
src={siteImage} |
||||
/> |
||||
) : ( |
||||
<i className="provider-approval-visual__identicon--default"> |
||||
{siteTitle.charAt(0).toUpperCase()} |
||||
</i> |
||||
)} |
||||
<h1>{siteTitle}</h1> |
||||
<h2>{origin}</h2> |
||||
</section> |
||||
<span className="provider-approval-visual__check" /> |
||||
<section> |
||||
<Identicon |
||||
className="provider-approval-visual__identicon" |
||||
address={selectedIdentity.address} |
||||
diameter={64} |
||||
/> |
||||
<h1>{selectedIdentity.name}</h1> |
||||
</section> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
render () { |
||||
const { siteTitle } = this.props |
||||
const { t } = this.context |
||||
|
||||
return ( |
||||
<div className="provider-approval-container__content"> |
||||
<section> |
||||
<h2>{t('connectRequest')}</h2> |
||||
{this.renderConnectVisual()} |
||||
<h1>{t('providerRequest', [siteTitle])}</h1> |
||||
<p> |
||||
{t('providerRequestInfo')} |
||||
<br/> |
||||
<a href="#">{t('learnMore')}.</a> |
||||
</p> |
||||
</section> |
||||
<section className="secure-badge"> |
||||
<img src="/images/mm-secure.svg" /> |
||||
</section> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import { connect } from 'react-redux' |
||||
import ProviderPageContainerContent from './provider-page-container-content.component' |
||||
import { getSelectedIdentity } from '../../../selectors' |
||||
|
||||
const mapStateToProps = (state) => { |
||||
return { |
||||
selectedIdentity: getSelectedIdentity(state), |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToProps)(ProviderPageContainerContent) |
||||
@ -0,0 +1 @@ |
||||
export {default} from './provider-page-container-header.component' |
||||
@ -0,0 +1,12 @@ |
||||
import React, {PureComponent} from 'react' |
||||
import NetworkDisplay from '../../network-display' |
||||
|
||||
export default class ProviderPageContainerHeader extends PureComponent { |
||||
render () { |
||||
return ( |
||||
<div className="provider-approval-container__header"> |
||||
<NetworkDisplay colored={false} /> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
@ -0,0 +1,50 @@ |
||||
import PropTypes from 'prop-types' |
||||
import React, {PureComponent} from 'react' |
||||
import { ProviderPageContainerContent, ProviderPageContainerHeader } from './' |
||||
import { PageContainerFooter } from '../page-container' |
||||
|
||||
export default class ProviderPageContainer extends PureComponent { |
||||
static propTypes = { |
||||
approveProviderRequest: PropTypes.func.isRequired, |
||||
origin: PropTypes.string.isRequired, |
||||
rejectProviderRequest: PropTypes.func.isRequired, |
||||
siteImage: PropTypes.string, |
||||
siteTitle: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
static contextTypes = { |
||||
t: PropTypes.func, |
||||
}; |
||||
|
||||
onCancel = () => { |
||||
const { origin, rejectProviderRequest } = this.props |
||||
rejectProviderRequest(origin) |
||||
} |
||||
|
||||
onSubmit = () => { |
||||
const { approveProviderRequest, origin } = this.props |
||||
approveProviderRequest(origin) |
||||
} |
||||
|
||||
render () { |
||||
const {origin, siteImage, siteTitle} = this.props |
||||
|
||||
return ( |
||||
<div className="page-container provider-approval-container"> |
||||
<ProviderPageContainerHeader /> |
||||
<ProviderPageContainerContent |
||||
origin={origin} |
||||
siteImage={siteImage} |
||||
siteTitle={siteTitle} |
||||
/> |
||||
<PageContainerFooter |
||||
onCancel={() => this.onCancel()} |
||||
cancelText={this.context.t('cancel')} |
||||
onSubmit={() => this.onSubmit()} |
||||
submitText={this.context.t('connect')} |
||||
submitButtonType="confirm" |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
} |
||||
Loading…
Reference in new issue