Add Breadcrumbs

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