mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Update margins for consistency in first time flow (#3588)
This commit is contained in:
parent
e2f340b324
commit
7fb27cf0c7
@ -89,15 +89,15 @@ class BackupPhraseScreen extends Component {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
renderSecretScreen() {
|
renderSecretScreen () {
|
||||||
const { isShowingSecret } = this.state
|
const { isShowingSecret } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="backup-phrase__content-wrapper">
|
<div className="backup-phrase__content-wrapper">
|
||||||
<div>
|
<div className="backup-phrase__phrase">
|
||||||
<div className="backup-phrase__title">Secret Backup Phrase</div>
|
<div className="backup-phrase__title">Secret Backup Phrase</div>
|
||||||
<div className="backup-phrase__body-text">
|
<div className="backup-phrase__body-text">
|
||||||
Your secret backup phrase makes it easy to back up and restore your account.
|
Your secret backup phrase makes it easy to back up and restore your account.
|
||||||
@ -106,17 +106,6 @@ class BackupPhraseScreen extends Component {
|
|||||||
WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
|
WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever.
|
||||||
</div>
|
</div>
|
||||||
{this.renderSecretWordsContainer()}
|
{this.renderSecretWordsContainer()}
|
||||||
<button
|
|
||||||
className="first-time-flow__button"
|
|
||||||
onClick={() => isShowingSecret && this.setState({
|
|
||||||
isShowingSecret: false,
|
|
||||||
page: BackupPhraseScreen.PAGE.CONFIRM
|
|
||||||
})}
|
|
||||||
disabled={!isShowingSecret}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
<Breadcrumbs total={3} currentIndex={1} />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="backup-phrase__tips">
|
<div className="backup-phrase__tips">
|
||||||
<div className="backup-phrase__tips-text">Tips:</div>
|
<div className="backup-phrase__tips-text">Tips:</div>
|
||||||
@ -130,6 +119,19 @@ class BackupPhraseScreen extends Component {
|
|||||||
Memorize this phrase.
|
Memorize this phrase.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="backup-phrase__next-button">
|
||||||
|
<button
|
||||||
|
className="first-time-flow__button"
|
||||||
|
onClick={() => isShowingSecret && this.setState({
|
||||||
|
isShowingSecret: false,
|
||||||
|
page: BackupPhraseScreen.PAGE.CONFIRM,
|
||||||
|
})}
|
||||||
|
disabled={!isShowingSecret}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
<Breadcrumbs total={3} currentIndex={1} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -231,10 +233,14 @@ class BackupPhraseScreen extends Component {
|
|||||||
return this.props.isLoading
|
return this.props.isLoading
|
||||||
? <LoadingScreen loadingMessage="Creating your new account" />
|
? <LoadingScreen loadingMessage="Creating your new account" />
|
||||||
: (
|
: (
|
||||||
<div className="backup-phrase">
|
<div className="first-view-main-wrapper">
|
||||||
{this.renderBack()}
|
<div className="first-view-main">
|
||||||
<Identicon address={this.props.address} diameter={70} />
|
<div className="backup-phrase">
|
||||||
{this.renderContent()}
|
{this.renderBack()}
|
||||||
|
<Identicon address={this.props.address} diameter={70} />
|
||||||
|
{this.renderContent()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -79,70 +79,73 @@ class ImportSeedPhraseScreen extends Component {
|
|||||||
const { warning } = this.props
|
const { warning } = this.props
|
||||||
const importDisabled = warning || !seedPhrase || !password || !confirmPassword
|
const importDisabled = warning || !seedPhrase || !password || !confirmPassword
|
||||||
return (
|
return (
|
||||||
<div className="import-account">
|
<div className="first-view-main-wrapper">
|
||||||
<a
|
<div className="first-view-main">
|
||||||
className="import-account__back-button"
|
<div className="import-account">
|
||||||
onClick={e => {
|
<a
|
||||||
e.preventDefault()
|
className="import-account__back-button"
|
||||||
this.props.back()
|
onClick={e => {
|
||||||
}}
|
e.preventDefault()
|
||||||
href="#"
|
this.props.back()
|
||||||
>
|
}}
|
||||||
{`< Back`}
|
href="#"
|
||||||
</a>
|
>
|
||||||
<div className="import-account__title">
|
{`< Back`}
|
||||||
Import an Account with Seed Phrase
|
</a>
|
||||||
|
<div className="import-account__title">
|
||||||
|
Import an Account with Seed Phrase
|
||||||
|
</div>
|
||||||
|
<div className="import-account__selector-label">
|
||||||
|
Enter your secret twelve word phrase here to restore your vault.
|
||||||
|
</div>
|
||||||
|
<div className="import-account__input-wrapper">
|
||||||
|
<label className="import-account__input-label">Wallet Seed</label>
|
||||||
|
<textarea
|
||||||
|
className="import-account__secret-phrase"
|
||||||
|
onChange={e => this.onChange({seedPhrase: e.target.value})}
|
||||||
|
value={this.state.seedPhrase}
|
||||||
|
placeholder="Separate each word with a single space"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="error"
|
||||||
|
>
|
||||||
|
{this.props.warning}
|
||||||
|
</span>
|
||||||
|
<div className="import-account__input-wrapper">
|
||||||
|
<label className="import-account__input-label">New Password</label>
|
||||||
|
<input
|
||||||
|
className="first-time-flow__input"
|
||||||
|
type="password"
|
||||||
|
placeholder="New Password (min 8 characters)"
|
||||||
|
onChange={e => this.onChange({password: e.target.value})}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="import-account__input-wrapper">
|
||||||
|
<label
|
||||||
|
className={classnames('import-account__input-label', {
|
||||||
|
'import-account__input-label__disabled': password.length < 8,
|
||||||
|
})}
|
||||||
|
>Confirm Password</label>
|
||||||
|
<input
|
||||||
|
className={classnames('first-time-flow__input', {
|
||||||
|
'first-time-flow__input__disabled': password.length < 8,
|
||||||
|
})}
|
||||||
|
type="password"
|
||||||
|
placeholder="Confirm Password"
|
||||||
|
onChange={e => this.onChange({confirmPassword: e.target.value})}
|
||||||
|
disabled={password.length < 8}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="first-time-flow__button"
|
||||||
|
onClick={() => !importDisabled && this.onClick()}
|
||||||
|
disabled={importDisabled}
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="import-account__selector-label">
|
|
||||||
Enter your secret twelve word phrase here to restore your vault.
|
|
||||||
</div>
|
|
||||||
<div className="import-account__input-wrapper">
|
|
||||||
<label className="import-account__input-label">Wallet Seed</label>
|
|
||||||
<textarea
|
|
||||||
className="import-account__secret-phrase"
|
|
||||||
onChange={e => this.onChange({seedPhrase: e.target.value})}
|
|
||||||
value={this.state.seedPhrase}
|
|
||||||
placeholder="Separate each word with a single space"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
className="error"
|
|
||||||
>
|
|
||||||
{this.props.warning}
|
|
||||||
</span>
|
|
||||||
<div className="import-account__input-wrapper">
|
|
||||||
<label className="import-account__input-label">New Password</label>
|
|
||||||
<input
|
|
||||||
className="first-time-flow__input"
|
|
||||||
type="password"
|
|
||||||
placeholder="New Password (min 8 characters)"
|
|
||||||
onChange={e => this.onChange({password: e.target.value})}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="import-account__input-wrapper">
|
|
||||||
<label
|
|
||||||
className="import-account__input-label"
|
|
||||||
className={classnames('import-account__input-label', {
|
|
||||||
'import-account__input-label__disabled': password.length < 8,
|
|
||||||
})}
|
|
||||||
>Confirm Password</label>
|
|
||||||
<input
|
|
||||||
className={classnames('first-time-flow__input', {
|
|
||||||
'first-time-flow__input__disabled': password.length < 8,
|
|
||||||
})}
|
|
||||||
type="password"
|
|
||||||
placeholder="Confirm Password"
|
|
||||||
onChange={e => this.onChange({confirmPassword: e.target.value})}
|
|
||||||
disabled={password.length < 8}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="first-time-flow__button"
|
|
||||||
onClick={() => !importDisabled && this.onClick()}
|
|
||||||
disabled={importDisabled}
|
|
||||||
>
|
|
||||||
Import
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -17,12 +17,34 @@
|
|||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.alpha-warning__container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f7861c;
|
||||||
|
}
|
||||||
|
|
||||||
.alpha-warning,
|
.alpha-warning,
|
||||||
.alpha-warning-welcome-screen {
|
.alpha-warning-welcome-screen {
|
||||||
background: #f7861c;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
padding-left: 10vw;
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
.alpha-warning {
|
||||||
|
width: 85vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) {
|
||||||
|
.alpha-warning {
|
||||||
|
width: 80vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1281px) {
|
||||||
|
.alpha-warning {
|
||||||
|
width: 62vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alpha-warning-welcome-screen {
|
.alpha-warning-welcome-screen {
|
||||||
@ -33,26 +55,22 @@
|
|||||||
.first-view-main-wrapper {
|
.first-view-main-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 10vw;
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first-view-main,
|
.first-view-main,
|
||||||
.first-view-main__mascara {
|
.first-view-main__mascara {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first-view-main__mascara {
|
.first-view-main__mascara {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
|
||||||
.first-view-main-wrapper {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 1281px) {
|
@media screen and (min-width: 1281px) {
|
||||||
.first-view-main {
|
.first-view-main {
|
||||||
width: 62vw;
|
width: 62vw;
|
||||||
@ -83,12 +101,8 @@
|
|||||||
.buy-ether {
|
.buy-ether {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
margin: 67px 0 50px;
|
margin: 60px 0 30px 0;
|
||||||
max-width: 35rem;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.create-password {
|
|
||||||
margin: 67px 0 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.import-account {
|
.import-account {
|
||||||
@ -133,10 +147,6 @@
|
|||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first-view-main .create-password {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mascara-info {
|
.mascara-info {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -212,7 +222,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase {
|
.backup-phrase {
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.create-password__title,
|
.create-password__title,
|
||||||
@ -298,7 +308,18 @@
|
|||||||
|
|
||||||
.backup-phrase__content-wrapper {
|
.backup-phrase__content-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: row nowrap;
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backup-phrase__phrase {
|
||||||
|
flex-grow: .5;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backup-phrase__next-button {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__body-text {
|
.backup-phrase__body-text {
|
||||||
@ -306,8 +327,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__tips {
|
.backup-phrase__tips {
|
||||||
margin: 40px 85px;
|
margin-top: 40px;
|
||||||
width: 285px;
|
width: 285px;
|
||||||
|
flex-grow: .5;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__tips-text {
|
.backup-phrase__tips-text {
|
||||||
@ -315,6 +338,22 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.backup-phrase__content-wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backup-phrase__phrase {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backup-phrase__tips {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__secret {
|
.backup-phrase__secret {
|
||||||
@ -371,13 +410,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.backup-phrase__back-button,
|
.backup-phrase__back-button,
|
||||||
.backup-phrase__back-button:hover,
|
.import-account__back-button {
|
||||||
.import-account__back-button,
|
|
||||||
.import-account__back-button:hover {
|
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
color: #22232C;
|
color: #22232c;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
|
position: absolute;
|
||||||
|
top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.backup-phrase__back-button {
|
||||||
|
top: -30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.backup-phrase__reveal-button:hover {
|
button.backup-phrase__reveal-button:hover {
|
||||||
|
@ -63,26 +63,32 @@ class NoticeScreen extends Component {
|
|||||||
return (
|
return (
|
||||||
isLoading
|
isLoading
|
||||||
? <LoadingScreen />
|
? <LoadingScreen />
|
||||||
: <div
|
: (
|
||||||
className="tou"
|
<div className="first-view-main-wrapper">
|
||||||
onScroll={this.onScroll}
|
<div className="first-view-main">
|
||||||
>
|
<div
|
||||||
<Identicon address={address} diameter={70} />
|
className="tou"
|
||||||
<div className="tou__title">{title}</div>
|
onScroll={this.onScroll}
|
||||||
<Markdown
|
>
|
||||||
className="tou__body markdown"
|
<Identicon address={address} diameter={70} />
|
||||||
source={body}
|
<div className="tou__title">{title}</div>
|
||||||
skipHtml
|
<Markdown
|
||||||
/>
|
className="tou__body markdown"
|
||||||
<button
|
source={body}
|
||||||
className="first-time-flow__button"
|
skipHtml
|
||||||
onClick={atBottom && this.acceptTerms}
|
/>
|
||||||
disabled={!atBottom}
|
<button
|
||||||
>
|
className="first-time-flow__button"
|
||||||
Accept
|
onClick={atBottom && this.acceptTerms}
|
||||||
</button>
|
disabled={!atBottom}
|
||||||
<Breadcrumbs total={3} currentIndex={2} />
|
>
|
||||||
</div>
|
Accept
|
||||||
|
</button>
|
||||||
|
<Breadcrumbs total={3} currentIndex={2} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,22 +12,26 @@ class UniqueImageScreen extends Component {
|
|||||||
|
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div className="unique-image">
|
<div className="first-view-main-wrapper">
|
||||||
<Identicon address={this.props.address} diameter={70} />
|
<div className="first-view-main">
|
||||||
<div className="unique-image__title">Your unique account image</div>
|
<div className="unique-image">
|
||||||
<div className="unique-image__body-text">
|
<Identicon address={this.props.address} diameter={70} />
|
||||||
This image was programmatically generated for you by your new account number.
|
<div className="unique-image__title">Your unique account image</div>
|
||||||
|
<div className="unique-image__body-text">
|
||||||
|
This image was programmatically generated for you by your new account number.
|
||||||
|
</div>
|
||||||
|
<div className="unique-image__body-text">
|
||||||
|
You’ll see this image everytime you need to confirm a transaction.
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="first-time-flow__button"
|
||||||
|
onClick={this.props.next}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
<Breadcrumbs total={3} currentIndex={1} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="unique-image__body-text">
|
|
||||||
You’ll see this image everytime you need to confirm a transaction.
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="first-time-flow__button"
|
|
||||||
onClick={this.props.next}
|
|
||||||
>
|
|
||||||
Next
|
|
||||||
</button>
|
|
||||||
<Breadcrumbs total={3} currentIndex={1} />
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -329,12 +329,14 @@ App.prototype.renderAppBar = function () {
|
|||||||
]),
|
]),
|
||||||
]),
|
]),
|
||||||
|
|
||||||
!isInitialized && !isPopup && betaUI && h('h2', {
|
!isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [
|
||||||
className: classnames({
|
h('h2', {
|
||||||
'alpha-warning': welcomeScreenSeen,
|
className: classnames({
|
||||||
'alpha-warning-welcome-screen': !welcomeScreenSeen,
|
'alpha-warning': welcomeScreenSeen,
|
||||||
}),
|
'alpha-warning-welcome-screen': !welcomeScreenSeen,
|
||||||
}, 'Please be aware that this version is still under development'),
|
}),
|
||||||
|
}, 'Please be aware that this version is still under development'),
|
||||||
|
]),
|
||||||
|
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user