diff --git a/docker-compose.yml b/docker-compose.yml index 58c046c32..9a57617dd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -4,8 +4,8 @@ metamascara: ports: - "9001" environment: - MASCARA_ORIGIN: "https://zero.metamask.io" + MASCARA_ORIGIN: "https://wallet.metamask.io" VIRTUAL_PORT: "9001" - VIRTUAL_HOST: "zero.metamask.io" - LETSENCRYPT_HOST: "zero.metamask.io" + VIRTUAL_HOST: "wallet.metamask.io" + LETSENCRYPT_HOST: "wallet.metamask.io" LETSENCRYPT_EMAIL: "admin@metamask.io" \ No newline at end of file diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 2f4b81e7c..21d29d72b 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,8 +1,10 @@ +import EventEmitter from 'events' import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux'; import {createNewVaultAndKeychain} from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' +import Mascot from '../../../../ui/app/components/mascot' class CreatePasswordScreen extends Component { static propTypes = { @@ -18,6 +20,11 @@ class CreatePasswordScreen extends Component { confirmPassword: '' } + constructor () { + super() + this.animationEventEmitter = new EventEmitter() + } + isValid() { const {password, confirmPassword} = this.state; @@ -50,52 +57,70 @@ class CreatePasswordScreen extends Component { return isLoading ? : ( -
-
- Create Password +
+

Warning This is Experemental software and is a Developer BETA

+
+
+ +
+ MetaMask is a secure identity vault for Ethereum. +
+
+ It allows you to hold ether & tokens, and interact with decentralized applications. +
+
+
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + goToImportWithSeedPhrase() + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + goToImportAccount() + }} + > + Import an account + + { */ } + +
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - - { */ } -
) } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 28aa3060a..c55edd79a 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -1,3 +1,4 @@ + .first-time-flow { height: 100vh; width: 100vw; @@ -5,6 +6,36 @@ overflow: auto; } +.alpha-warning { + background: #f7861c; + color: #fff; + line-height: 2em; + padding-left: 2em; +} + +.first-view-main { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; +} + +.mascara-info { + display: flex; + flex-flow: column; + margin-top: 70px; + margin-right: 10vw; + width: 35vw; + max-width: 550px; +} + +.mascara-info :first-child { + align-self: flex-end; +} + +.info { + font-size: 19px; +} + .create-password, .unique-image, .tou, @@ -75,7 +106,7 @@ .backup-phrase__tips { margin: 40px 0 !important; - width: initial !important; + width: initial !important; } .backup-phrase__confirm-secret, @@ -337,7 +368,7 @@ button.backup-phrase__confirm-seed-option:hover { padding: 14px 21px; appearance: none; -webkit-appearance: none; - -moz-appearance: none; + -moz-appearance: none; cursor: pointer; } diff --git a/package.json b/package.json index 12c839739..fae0881b8 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./", "watch": "mocha watch --recursive \"test/unit/**/*.js\"", - "mascara": "METAMASK_DEBUG=true node ./mascara/example/server", + "mascara": "gulp build && METAMASK_DEBUG=true node ./mascara/example/server", "dist": "npm run dist:clear && npm install && gulp dist", "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect", "test": "npm run lint && npm run test:coverage && npm run test:integration", diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js index 973ec2cad..3b0d3e31b 100644 --- a/ui/app/components/mascot.js +++ b/ui/app/components/mascot.js @@ -7,13 +7,13 @@ const debounce = require('debounce') module.exports = Mascot inherits(Mascot, Component) -function Mascot () { +function Mascot ({width = '200', height = '200'}) { Component.call(this) this.logo = metamaskLogo({ followMouse: true, pxNotRatio: true, - width: 200, - height: 200, + width, + height, }) this.refollowMouse = debounce(this.logo.setFollowMouse.bind(this.logo, true), 1000)