Add an alpha agreement screen cover. Bump up announcement size by a bit. (#139)

common/components/AlphaAgreement/index.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import './index.scss';
+
+const LS_KEY = 'acknowledged-alpha';
+
+export default class AlphaAgreement extends React.Component {
+  state = {
+    isFading: false,
+    hasAcknowledged: false
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hasAcknowledged: localStorage.getItem(LS_KEY),
+      isFading: false
+    };
+  }
+
+  _continue = () => {
+    localStorage.setItem(LS_KEY, true);
+    this.setState({ isFading: true });
+
+    setTimeout(() => {
+      this.setState({ hasAcknowledged: true });
+    }, 1000);
+  };
+
+  _reject = () => {
+    window.location = 'https://myetherwallet.com';
+  };
+
+  render() {
+    if (this.state.hasAcknowledged) {
+      return null;
+    }
+
+    const isFading = this.state.isFading ? 'is-fading' : '';
+
+    return (
+      <div className={`AlphaAgreement ${isFading}`}>
+        <div className="AlphaAgreement-content">
+          <h2>This is an Unstable Version of MEW</h2>
+          <p>
+            You are about to access an alpha version of MyEtherWallet that is
+            currently in development. In its current state, it should only be
+            used for testing, not for important transactions.
+          </p>
+          <p>
+            Any wallets you generate should not hold a significant value, and
+            any transactions you make should be for small amounts. MEW does not
+            claim responsibility for any issues that happen while using the
+            alpha version.
+          </p>
+          <p>Are you sure you would like to continue?</p>
+
+          <div className="AlphaAgreement-content-buttons">
+            <button
+              className="AlphaAgreement-content-buttons-btn is-reject"
+              onClick={this._reject}
+            >
+              No, Take Me to v3
+            </button>
+            <button
+              className="AlphaAgreement-content-buttons-btn is-continue"
+              onClick={this._continue}
+            >
+              Yes, Continue to v4
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

common/components/AlphaAgreement/index.scss

@@ -0,0 +1,82 @@
+@import "common/sass/variables";
+
+.AlphaAgreement {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: $brand-warning;
+  overflow: auto;
+  z-index: 10000;
+
+  &-content {
+    max-width: 520px;
+    padding: 20px;
+    margin: 0 auto;
+    color: #fff;
+    text-shadow: 1px 1px 1px rgba(#000, 0.12);
+    overflow: auto;
+
+    h2 {
+      font-size: 42px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      font-size: 20px;
+      margin-bottom: 15px;
+    }
+
+    &-buttons {
+      padding-top: 20px;
+
+      &-btn {
+        display: block;
+        width: 100%;
+        max-width: 240px;
+        margin: 0 auto;
+        border: none;
+        padding: 0;
+        outline: none;
+
+        &.is-reject {
+          height: 60px;
+          line-height: 60px;
+          font-size: 22px;
+          background: rgba(#fff, 0.96);
+          color: $gray;
+          border-radius: 4px;
+          margin-bottom: 20px;
+
+          &:hover {
+            background: #fff;
+          }
+        }
+
+        &.is-continue {
+          background: none;
+          color: #fff;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+
+  // Fade out
+  &.is-fading {
+    pointer-events: none;
+    opacity: 0;
+    background: #fff;
+    transition: all 500ms ease 400ms;
+
+    .AlphaAgreement-content {
+      opacity: 0;
+      transform: translateY(15px);
+      transition: all 500ms ease;
+    }
+  }
+}

common/components/Header/index.scss

@@ -18,9 +18,9 @@ $small-size: 900px;
 // Header
 .Header {
   &-announcement {
-    padding: 2px 10px;
-    line-height: 22px;
-    font-size: 14px;
+    padding: 4px 10px;
+    line-height: 26px;
+    font-size: 16px;
     text-align: center;
     font-weight: 300;
     color: #fff;

common/components/index.js

@@ -5,3 +5,4 @@ export { default as Footer } from './Footer';
 export { default as Root } from './Root';
 export { default as BalanceSidebar } from './BalanceSidebar';
 export { default as PaperWallet } from './PaperWallet';
+export { default as AlphaAgreement } from './AlphaAgreement';

common/containers/App/index.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Footer, Header } from 'components';
+import { Footer, Header, AlphaAgreement } from 'components';
 import Notifications from './Notifications';
 import * as actions from 'actions/config';
 
@@ -58,6 +58,7 @@ class App extends Component {
           <Footer />
         </main>
         <Notifications />
+        <AlphaAgreement />
       </div>
     );
   }