mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
Update margins for consistency in first time flow (#3588)
This commit is contained in:
Alexander Tseung
GitHub
parent
e2f340b324
commit
7fb27cf0c7
@ -89,7 +89,7 @@ class BackupPhraseScreen extends Component {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
renderSecretScreen () {
|
||||
@ -97,7 +97,7 @@ class BackupPhraseScreen extends Component {
|
||||
|
||||
return (
|
||||
<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__body-text">
|
||||
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.
|
||||
</div>
|
||||
{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 className="backup-phrase__tips">
|
||||
<div className="backup-phrase__tips-text">Tips:</div>
|
||||
@ -130,6 +119,19 @@ class BackupPhraseScreen extends Component {
|
||||
Memorize this phrase.
|
||||
</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>
|
||||
)
|
||||
}
|
||||
@ -231,11 +233,15 @@ class BackupPhraseScreen extends Component {
|
||||
return this.props.isLoading
|
||||
? <LoadingScreen loadingMessage="Creating your new account" />
|
||||
: (
|
||||
<div className="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<div className="backup-phrase">
|
||||
{this.renderBack()}
|
||||
<Identicon address={this.props.address} diameter={70} />
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,6 +79,8 @@ class ImportSeedPhraseScreen extends Component {
|
||||
const { warning } = this.props
|
||||
const importDisabled = warning || !seedPhrase || !password || !confirmPassword
|
||||
return (
|
||||
<div className="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<div className="import-account">
|
||||
<a
|
||||
className="import-account__back-button"
|
||||
@ -121,7 +123,6 @@ class ImportSeedPhraseScreen extends Component {
|
||||
</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,
|
||||
})}
|
||||
@ -144,6 +145,8 @@ class ImportSeedPhraseScreen extends Component {
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,12 +17,34 @@
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.alpha-warning__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: #f7861c;
|
||||
}
|
||||
|
||||
.alpha-warning,
|
||||
.alpha-warning-welcome-screen {
|
||||
background: #f7861c;
|
||||
color: #fff;
|
||||
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 {
|
||||
@ -33,26 +55,22 @@
|
||||
.first-view-main-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-left: 10vw;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.first-view-main,
|
||||
.first-view-main__mascara {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.first-view-main__mascara {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.first-view-main-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
.first-view-main {
|
||||
width: 62vw;
|
||||
@ -83,12 +101,8 @@
|
||||
.buy-ether {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin: 67px 0 50px;
|
||||
max-width: 35rem;
|
||||
}
|
||||
|
||||
.create-password {
|
||||
margin: 67px 0 50px;
|
||||
margin: 60px 0 30px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.import-account {
|
||||
@ -133,10 +147,6 @@
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.first-view-main .create-password {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.mascara-info {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
@ -212,7 +222,7 @@
|
||||
}
|
||||
|
||||
.backup-phrase {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.create-password__title,
|
||||
@ -298,7 +308,18 @@
|
||||
|
||||
.backup-phrase__content-wrapper {
|
||||
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 {
|
||||
@ -306,8 +327,10 @@
|
||||
}
|
||||
|
||||
.backup-phrase__tips {
|
||||
margin: 40px 85px;
|
||||
margin-top: 40px;
|
||||
width: 285px;
|
||||
flex-grow: .5;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.backup-phrase__tips-text {
|
||||
@ -315,6 +338,22 @@
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
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 {
|
||||
@ -371,13 +410,17 @@
|
||||
}
|
||||
|
||||
.backup-phrase__back-button,
|
||||
.backup-phrase__back-button:hover,
|
||||
.import-account__back-button,
|
||||
.import-account__back-button:hover {
|
||||
.import-account__back-button {
|
||||
margin-bottom: 18px;
|
||||
color: #22232C;
|
||||
color: #22232c;
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
}
|
||||
|
||||
.backup-phrase__back-button {
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
button.backup-phrase__reveal-button:hover {
|
||||
|
||||
@ -63,7 +63,10 @@ class NoticeScreen extends Component {
|
||||
return (
|
||||
isLoading
|
||||
? <LoadingScreen />
|
||||
: <div
|
||||
: (
|
||||
<div className="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<div
|
||||
className="tou"
|
||||
onScroll={this.onScroll}
|
||||
>
|
||||
@ -83,6 +86,9 @@ class NoticeScreen extends Component {
|
||||
</button>
|
||||
<Breadcrumbs total={3} currentIndex={2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,8 @@ class UniqueImageScreen extends Component {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="first-view-main-wrapper">
|
||||
<div className="first-view-main">
|
||||
<div className="unique-image">
|
||||
<Identicon address={this.props.address} diameter={70} />
|
||||
<div className="unique-image__title">Your unique account image</div>
|
||||
@ -29,6 +31,8 @@ class UniqueImageScreen extends Component {
|
||||
</button>
|
||||
<Breadcrumbs total={3} currentIndex={1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -329,12 +329,14 @@ App.prototype.renderAppBar = function () {
|
||||
]),
|
||||
]),
|
||||
|
||||
!isInitialized && !isPopup && betaUI && h('h2', {
|
||||
!isInitialized && !isPopup && betaUI && h('.alpha-warning__container', {}, [
|
||||
h('h2', {
|
||||
className: classnames({
|
||||
'alpha-warning': welcomeScreenSeen,
|
||||
'alpha-warning-welcome-screen': !welcomeScreenSeen,
|
||||
}),
|
||||
}, 'Please be aware that this version is still under development'),
|
||||
]),
|
||||
|
||||
])
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user