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

CreatePasswordScreen

Browse Source
This commit is contained in:
Jacky Chan 2017-08-18 04:51:52 -07:00 committed by Chi Kei Chan
parent 0264ecaad7
commit 537f8a6ce1
4 changed files with 105 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,42 @@ import React, {Component, PropTypes} from 'react'
export default class CreatePasswordScreen extends Component {
state = {
password: '',
confirmPassword: ''
}
render() {
return (
<div>
<div className="create-password">
<div className="create-password__title">
Create Password
</div>
<input
className="first-time-flow__input"
type="password"
placeholder="New Password (min 8 characters)"
onChange={e => this.setState({password: e.target.value})}
/>
<input
className="first-time-flow__input create-password__confirm-input"
type="password"
placeholder="Confirm Password"
onChange={e => this.setState({confirmPassword: e.target.value})}
/>
<button
className="first-time-flow__button"
>
Create
</button>
<a
href=""
className="first-time-flow__link"
onClick={e => e.preventDefault()}
>
Import an account
</a>
<div />
</div>
)
}

65
mascara/src/app/first-time/index.css Normal file
View File

@ -0,0 +1,65 @@
.first-time-flow {
height: 100vh;
width: 100vw;
background-color: #FFF;
}
.create-password {
display: flex;
flex-flow: column nowrap;
margin: 67px 0 0 146px;
max-width: 350px;
}
.create-password__title {
height: 102px;
width: 280px;
color: #1B344D;
font-size: 40px;
font-weight: 500;
line-height: 51px;
margin-bottom: 24px;
}
.create-password__confirm-input {
margin-top: 15px;
}
.first-time-flow__input {
width: 350px;
font-size: 18px;
line-height: 24px;
padding: 15px 28px;
border: 1px solid #CDCDCD;
background-color: #FFFFFF;
}
.first-time-flow__input::placeholder {
color: #9B9B9B;
font-weight: 200;
}
.first-time-flow__button {
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
color: #FFFFFF;
font-size: 20px;
font-weight: 500;
line-height: 26px;
text-align: center;
text-transform: uppercase;
margin: 35px 0 14px;
transition: 200ms ease-in-out;
}
button.first-time-flow__button:hover {
transform: scale(1);
background-color: rgba(247, 134, 28, 0.9);
}
.first-time-flow__link {
color: #1B344D;
font-size: 18px;
line-height: 23px;
}

6
mascara/src/app/first-time/index.js
View File

@ -48,7 +48,11 @@ export default class FirstTimeFlow extends Component {
}
render() {
return <div>{this.renderScreen()}</div>
return (
<div className="first-time-flow">
{this.renderScreen()}
</div>
)
}
}

1
ui/css.js
View File

@ -9,6 +9,7 @@ var cssFiles = {
'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'),
'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'),
'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'),
'first-time.css': fs.readFileSync(path.join(__dirname, '../mascara/src/app/first-time/index.css'), 'utf8'),
'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'),
'react-css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-select', 'dist', 'react-select.css'), 'utf8'),
}