diff options
| -rw-r--r-- | mascara/src/app/first-time/breadcrumbs.js | 24 | ||||
| -rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 5 | ||||
| -rw-r--r-- | mascara/src/app/first-time/index.css | 20 |
3 files changed, 47 insertions, 2 deletions
diff --git a/mascara/src/app/first-time/breadcrumbs.js b/mascara/src/app/first-time/breadcrumbs.js new file mode 100644 index 000000000..cbd0da1a1 --- /dev/null +++ b/mascara/src/app/first-time/breadcrumbs.js @@ -0,0 +1,24 @@ +import React, {Component, PropTypes} from 'react' + +export default class Breadcrumbs extends Component { + + static propTypes = { + total: PropTypes.number, + currentIndex: PropTypes.number + }; + + render() { + const {total, currentIndex} = this.props + return ( + <div className="breadcrumbs"> + {Array(total).fill().map((_, i) => ( + <div + className="breadcrumb" + style={{backgroundColor: i === currentIndex ? '#D8D8D8' : '#FFFFFF'}} + /> + ))} + </div> + ); + } + +} diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 1313de561..4b4cea51d 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,4 +1,5 @@ import React, {Component, PropTypes} from 'react' +import Breadcrumbs from './breadcrumbs' export default class CreatePasswordScreen extends Component { @@ -32,12 +33,12 @@ export default class CreatePasswordScreen extends Component { </button> <a href="" - className="first-time-flow__link" + className="first-time-flow__link create-password__import-link" onClick={e => e.preventDefault()} > Import an account </a> - <div /> + <Breadcrumbs total={3} currentIndex={0} /> </div> ) } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 3d4f17dbb..dbcde5004 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -25,6 +25,10 @@ margin-top: 15px; } +.create-password__import-link { + margin-bottom: 54px; +} + .first-time-flow__input { width: 350px; font-size: 18px; @@ -62,4 +66,20 @@ button.first-time-flow__button:hover { color: #1B344D; font-size: 18px; line-height: 23px; +} + +.breadcrumbs { + display: flex; + flex-flow: row nowrap; +} + +.breadcrumb { + height: 10px; + width: 10px; + border: 1px solid #979797; + border-radius: 50%; +} + +.breadcrumb + .breadcrumb { + margin-left: 10px; }
\ No newline at end of file |