CreatePasswordScreen

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

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

mascara/src/app/first-time/index.css

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

mascara/src/app/first-time/index.js

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

ui/css.js

@@ -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'),
 }