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
2017-10-05 15:22:41 -04:00 · 2017-10-05 15:22:41 -04:00 · 81c817600f
parent 74e51345a4
commit 81c817600f
5 changed files with 144 additions and 40 deletions
--- a/common/components/Footer/index.scss
+++ b/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-right: -.5rem;
+      margin-left: -0.5rem;
+      margin-right: -0.5rem;
    }
  }
 }
+
+.Modal {
+  color: #000;
+}
--- a/common/components/Footer/index.tsx
+++ b/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>
-                {translate('FOOTER_1')}
-              </span>
-              <span>
-                {translate('FOOTER_1b')}
-              </span>
+              <span>{translate('FOOTER_1')}</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>
--- a/common/components/ui/Modal.scss
+++ b/common/components/ui/Modal.scss
@ -1,12 +1,11 @@
-@import "common/sass/variables";
-@import "common/sass/mixins";
+@import 'common/sass/variables';
+@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);
+  }
+}
--- a/common/components/ui/Modal.tsx
+++ b/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">
-              {title}
-            </h2>
+            <h2 className="Modal-header-title">{title}</h2>
            <button className="Modal-header-close" onClick={handleClose}>
              <img className="Modal-header-close-icon" src={closeIcon} />
            </button>
          </div>
-          <div className="Modal-content">
-            {isOpen && children}
-          </div>
-          {hasButtons &&
-            <div className="Modal-footer">
-              {this.renderButtons()}
-            </div>}
+          <div className="Modal-content">{isOpen && children}</div>
+          {hasButtons && (
+            <div className="Modal-footer">{this.renderButtons()}</div>
+          )}
        </div>
      </div>
    );
--- a/common/sass/styles/overrides/forms.scss
+++ b/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="checkbox"] {
+input[type='radio'],
+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);
    }
  }