m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Change styling of Import Account with Seed Phrease (#3182)

Browse Source
This commit is contained in:
Alexander Tseung 2018-02-05 12:39:33 -08:00 committed by GitHub
parent 78bce55858
commit e4895df953
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mascara/src/app/first-time/create-password-screen.js
View File

@ -58,7 +58,7 @@ class CreatePasswordScreen extends Component {
? <LoadingScreen loadingMessage="Creating your new account" /> ? <LoadingScreen loadingMessage="Creating your new account" />
: ( : (
<div> <div>
<h2 className="alpha-warning">Warning This is Experemental software and is a Developer BETA </h2> <h2 className="alpha-warning">Warning: This is Experimental software and is a Developer BETA</h2>
<div className="first-view-main"> <div className="first-view-main">
<div className="mascara-info"> <div className="mascara-info">
<Mascot <Mascot

42
mascara/src/app/first-time/import-seed-phrase-screen.js
View File

@ -67,27 +67,37 @@ class ImportSeedPhraseScreen extends Component {
<div className="import-account__selector-label"> <div className="import-account__selector-label">
Enter your secret twelve word phrase here to restore your vault. Enter your secret twelve word phrase here to restore your vault.
</div> </div>
<textarea <div className="import-account__input-wrapper">
className="import-account__secret-phrase" <label className="import-account__input-label">Wallet Seed</label>
onChange={e => this.setState({seedPhrase: e.target.value})} <textarea
/> className="import-account__secret-phrase"
onChange={e => this.setState({seedPhrase: e.target.value})}
placeholder="Separate each word with a single space"
/>
</div>
<span <span
className="error" className="error"
> >
{this.props.warning} {this.props.warning}
</span> </span>
<input <div className="import-account__input-wrapper">
className="first-time-flow__input" <label className="import-account__input-label">New Password</label>
type="password" <input
placeholder="New Password (min 8 characters)" className="first-time-flow__input"
onChange={e => this.setState({password: e.target.value})} type="password"
/> placeholder="New Password (min 8 characters)"
<input onChange={e => this.setState({password: e.target.value})}
className="first-time-flow__input create-password__confirm-input" />
type="password" </div>
placeholder="Confirm Password" <div className="import-account__input-wrapper">
onChange={e => this.setState({confirmPassword: e.target.value})} <label className="import-account__input-label">Confirm Password</label>
/> <input
className="first-time-flow__input"
type="password"
placeholder="Confirm Password"
onChange={e => this.setState({confirmPassword: e.target.value})}
/>
</div>
<button <button
className="first-time-flow__button" className="first-time-flow__button"
onClick={this.onClick} onClick={this.onClick}

29
mascara/src/app/first-time/index.css
View File

@ -44,10 +44,14 @@
.buy-ether { .buy-ether {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
margin: 67px 0 0 146px; margin: 67px 0 50px 146px;
max-width: 35rem; max-width: 35rem;
} }
.import-account {
max-width: initial;
}
@media only screen and (max-width: 575px) { @media only screen and (max-width: 575px) {
.create-password, .create-password,
.unique-image, .unique-image,
@ -135,14 +139,16 @@
.backup-phrase__title, .backup-phrase__title,
.import-account__title, .import-account__title,
.buy-ether__title { .buy-ether__title {
width: 280px;
color: #1B344D; color: #1B344D;
font-size: 40px; font-size: 40px;
font-weight: 500;
line-height: 51px; line-height: 51px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.import-account__title {
margin-bottom: 10px;
}
.tou__title, .tou__title,
.backup-phrase__title { .backup-phrase__title {
width: 480px; width: 480px;
@ -288,9 +294,7 @@
.import-account__back-button:hover { .import-account__back-button:hover {
margin-bottom: 18px; margin-bottom: 18px;
color: #22232C; color: #22232C;
font-family: Montserrat Regular;
font-size: 16px; font-size: 16px;
font-weight: 500;
line-height: 21px; line-height: 21px;
} }
@ -311,6 +315,12 @@ button.backup-phrase__reveal-button:hover {
.import-account__secret-phrase { .import-account__secret-phrase {
font-size: 16px; font-size: 16px;
margin: initial;
}
.import-account__secret-phrase::placeholder {
color: #9B9B9B;
font-weight: 200;
} }
.backup-phrase__confirm-seed-options { .backup-phrase__confirm-seed-options {
@ -350,9 +360,7 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__selector-label { .import-account__selector-label {
color: #1B344D; color: #1B344D;
font-family: Montserrat Light; font-size: 16px;
font-size: 18px;
line-height: 23px;
} }
.import-account__dropdown { .import-account__dropdown {
@ -394,7 +402,6 @@ button.backup-phrase__confirm-seed-option:hover {
margin-top: 10px; margin-top: 10px;
width: 422px; width: 422px;
color: #FF001F; color: #FF001F;
font-family: Montserrat Light;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
} }
@ -402,10 +409,8 @@ button.backup-phrase__confirm-seed-option:hover {
.import-account__input-label { .import-account__input-label {
margin-bottom: 9px; margin-bottom: 9px;
color: #1B344D; color: #1B344D;
font-family: Montserrat Light;
font-size: 18px; font-size: 18px;
line-height: 23px; line-height: 23px;
text-transform: uppercase;
} }
.import-account__input { .import-account__input {
@ -549,7 +554,7 @@ button.backup-phrase__confirm-seed-option:hover {
width: 350px; width: 350px;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
padding: 15px 28px; padding: 15px;
border: 1px solid #CDCDCD; border: 1px solid #CDCDCD;
background-color: #FFFFFF; background-color: #FFFFFF;
} }