Add disclaimer modal to footer (#267)

* Add disclaimer modal to footer

* Remove duplicate code & unnecessary styles

* Fix formatting noise

* remove un-used css style

* Fix tslint error & add media query for modals

* Nest Media Query

common/components/Footer/index.scss

@@ -1,4 +1,4 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
 
 // footer
 .Footer {
@@ -40,6 +40,20 @@
     max-width: 28rem;
   }
 
+  &-modal-button {
+    color: #4ac8ed;
+    background-color: rgba(0, 0, 0, 0);
+    border: none;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+    font-weight: 300;
+    transition: 500ms all ease-in-out;
+    &:hover {
+      color: #0e97c0;
+    }
+  }
+
   p {
     margin: $space-xs 0 $space-sm;
   }
@@ -57,7 +71,7 @@
     margin: $font-size-small 0 0;
 
     i {
-      margin-right: .25em;
+      margin-right: 0.25em;
 
       @media (min-width: $screen-sm-min) {
         margin-left: -1.5em;
@@ -79,8 +93,12 @@
 
   @media screen and (max-width: $grid-float-breakpoint) {
     .row {
-      margin-left: -.5rem;
+      margin-left: -0.5rem;
-      margin-right: -.5rem;
+      margin-right: -0.5rem;
     }
   }
 }
+
+.Modal {
+  color: #000;
+}

common/components/Footer/index.tsx

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import translate from 'translations';
 import './index.scss';
 import PreFooter from './PreFooter';
+import Modal, { IButton } from 'components/ui/Modal';
 
 const LINKS_LEFT = [
   {
@@ -91,8 +92,28 @@ const LINKS_SOCIAL = [
   }
 ];
 
-export default class Footer extends Component {
+interface ComponentState {
+  isOpen: boolean;
+}
+
+export default class Footer extends React.Component<{}, ComponentState> {
+  constructor(props) {
+    super(props);
+    this.state = { isOpen: false };
+  }
+
+  public openModal = () => {
+    this.setState({ isOpen: true });
+  };
+
+  public closeModal = () => {
+    this.setState({ isOpen: false });
+  };
+
   public render() {
+    const buttons: IButton[] = [
+      { text: 'Okay', type: 'default', onClick: this.closeModal }
+    ];
     return (
       <div>
         <PreFooter />
@@ -110,12 +131,8 @@ export default class Footer extends Component {
               </a>
             </p>
             <p className="Footer-about-text">
-              <span>
+              <span>{translate('FOOTER_1')}</span>
-                {translate('FOOTER_1')}
+              <span>{translate('FOOTER_1b')}</span>
-              </span>
-              <span>
-                {translate('FOOTER_1b')}
-              </span>
             </p>
 
             {LINKS_LEFT.map(link => {
@@ -128,6 +145,78 @@ export default class Footer extends Component {
               );
             })}
 
+            <button className="Footer-modal-button" onClick={this.openModal}>
+              Disclaimer
+            </button>
+            <Modal
+              isOpen={this.state.isOpen}
+              title="Disclaimer"
+              buttons={buttons}
+              handleClose={this.closeModal}
+            >
+              <p>
+                <b>Be safe & secure: </b>
+                <a href="https://myetherwallet.groovehq.com/knowledge_base/topics/protecting-yourself-and-your-funds">
+                  We highly recommend that you read our guide on How to Prevent
+                  Loss & Theft for some recommendations on how to be proactive
+                  about your security.
+                </a>
+              </p>
+              <p>
+                <b>Always backup your keys: </b>
+                MyEtherWallet.com & MyEtherWallet CX are not "web wallets". You
+                do not create an account or give us your funds to hold onto. No
+                data leaves your computer / your browser. We make it easy for
+                you to create, save, and access your information and interact
+                with the blockchain.
+              </p>
+              <p>
+                <b>We are not responsible for any loss: </b>
+                Ethereum, MyEtherWallet.com & MyEtherWallet CX, and some of the
+                underlying Javascript libraries we use are under active
+                development. While we have thoroughly tested & tens of thousands
+                of wallets have been successfully created by people all over the
+                globe, there is always the possibility something unexpected
+                happens that causes your funds to be lost. Please do not invest
+                more than you are willing to lose, and please be careful.
+              </p>
+              <p>
+                <b>Translations of MyEtherWallet: </b>
+                The community has done an amazing job translating MyEtherWallet
+                into a variety of languages. However, MyEtherWallet can only
+                verify the validity and accuracy of the information provided in
+                English and, because of this, the English version of our website
+                is the official text.
+              </p>
+              <p>
+                <b>MIT License</b> Copyright © 2015-2017 MyEtherWallet LLC
+              </p>
+              <p>
+                Permission is hereby granted, free of charge, to any person
+                obtaining a copy of this software and associated documentation
+                files (the "Software"), to deal in the Software without
+                restriction, including without limitation the rights to use,
+                copy, modify, merge, publish, distribute, sublicense, and/or
+                sell copies of the Software, and to permit persons to whom the
+                Software is furnished to do so, subject to the following
+                conditions:
+              </p>
+              <p>
+                The above copyright notice and this permission notice shall be
+                included in all copies or substantial portions of the Software.
+              </p>
+              <b>
+                THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+                EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+                OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+                NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+                HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+                WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+                FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+                OTHER DEALINGS IN THE SOFTWARE.
+              </b>
+            </Modal>
+
             <p>&copy; 2017 MyEtherWallet, LLC</p>
           </div>
 
@@ -155,12 +244,12 @@ export default class Footer extends Component {
             </h5>
             <ul>
               <li>
-                {' '}ETH:{' '}
+                {' '}
-                <span className="mono wrap">{donationAddressMap.ETH}</span>
+                ETH: <span className="mono wrap">{donationAddressMap.ETH}</span>
               </li>
               <li>
-                {' '}BTC:{' '}
+                {' '}
-                <span className="mono wrap">{donationAddressMap.BTC}</span>
+                BTC: <span className="mono wrap">{donationAddressMap.BTC}</span>
               </li>
             </ul>
           </div>

common/components/ui/Modal.scss

@@ -1,12 +1,11 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
-@import "common/sass/mixins";
+@import 'common/sass/mixins';
 
 $m-background: #fff;
 $m-window-padding: 20px;
 $m-header-padding: 15px;
 $m-header-height: 62px;
 $m-content-padding: 20px;
-$m-footer-height: 58px;
 $m-close-size: 26px;
 $m-anim-speed: 400ms;
 
@@ -117,7 +116,6 @@ $m-anim-speed: 400ms;
   }
 
   &-footer {
-    height: $m-footer-height;
     padding: 7px 10px;
     border-top: 1px solid $gray-lighter;
     background: $m-background;
@@ -129,4 +127,8 @@ $m-anim-speed: 400ms;
       min-width: 100px;
     }
   }
-}
+
+  @media(max-width: 820px) {
+    width: calc(100% - 40px);
+  }
+}

common/components/ui/Modal.tsx

@@ -52,20 +52,15 @@ export default class Modal extends Component<Props, {}> {
         <div className={`Modalshade ${isOpen ? 'is-open' : ''}`} />
         <div className={`Modal ${isOpen ? 'is-open' : ''}`}>
           <div className="Modal-header">
-            <h2 className="Modal-header-title">
+            <h2 className="Modal-header-title">{title}</h2>
-              {title}
-            </h2>
             <button className="Modal-header-close" onClick={handleClose}>
               <img className="Modal-header-close-icon" src={closeIcon} />
             </button>
           </div>
-          <div className="Modal-content">
+          <div className="Modal-content">{isOpen && children}</div>
-            {isOpen && children}
+          {hasButtons && (
-          </div>
+            <div className="Modal-footer">{this.renderButtons()}</div>
-          {hasButtons &&
+          )}
-            <div className="Modal-footer">
-              {this.renderButtons()}
-            </div>}
         </div>
       </div>
     );

common/sass/styles/overrides/forms.scss

@@ -1,5 +1,5 @@
 // Form overrides
-@import "common/sass/variables";
+@import 'common/sass/variables';
 
 label {
   margin-top: $space-sm;
@@ -13,8 +13,8 @@ label + textarea {
   margin-top: 0;
 }
 
-input[type="radio"],
+input[type='radio'],
-input[type="checkbox"] {
+input[type='checkbox'] {
   margin: 3px 0 0;
   line-height: normal;
 }
@@ -32,7 +32,7 @@ input[readonly] {
   &:focus {
     border-color: $input-border-focus;
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
       0 0 2px fadeout($brand-primary, 50%);
   }
 }
@@ -53,33 +53,33 @@ input[readonly] {
 .form-control {
   &.is-valid {
     border-color: lighten($brand-success, 25%);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
       0 0 1px rgba($brand-success, 0.5);
     &:focus {
       border-color: lighten($brand-success, 15%);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
         0 0 3px rgba($brand-success, 0.5);
     }
   }
 
   &.is-invalid {
     border-color: lighten($brand-danger, 25%);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
       0 0 1px rgba($brand-danger, 0.5);
     &:focus {
       border-color: lighten($brand-danger, 15%);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
         0 0 3px rgba($brand-danger, 0.5);
     }
   }
 
   &.is-semivalid {
     border-color: lighten($brand-warning, 25%);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
       0 0 1px rgba($brand-warning, 0.5);
     &:focus {
       border-color: lighten($brand-warning, 15%);
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
         0 0 3px rgba($brand-warning, 0.5);
     }
   }