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 ( +
+ {Array(total).fill().map((_, i) => ( +
+ ))} +
+ ); + } + +} 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 { e.preventDefault()} > Import an account -
+
) } 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