Add Breadcrumbs

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>
+    );
+  }
+
+}

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>
     )
   }

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;
 }