diff --git a/common/components/Footer/index.scss b/common/components/Footer/index.scss index ec75b791..0f8bd4a7 100644 --- 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; +} \ No newline at end of file diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 6dbb84f7..4101dbbc 100644 --- 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 (
@@ -110,12 +131,8 @@ export default class Footer extends Component {

- - {translate('FOOTER_1')} - - - {translate('FOOTER_1b')} - + {translate('FOOTER_1')} + {translate('FOOTER_1b')}

{LINKS_LEFT.map(link => { @@ -128,6 +145,78 @@ export default class Footer extends Component { ); })} + + +

+ Be safe & secure: + + 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. + +

+

+ Always backup your keys: + 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. +

+

+ We are not responsible for any loss: + 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. +

+

+ Translations of MyEtherWallet: + 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. +

+

+ MIT License Copyright © 2015-2017 MyEtherWallet LLC +

+

+ 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: +

+

+ The above copyright notice and this permission notice shall be + included in all copies or substantial portions of the Software. +

+ + 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. + +
+

© 2017 MyEtherWallet, LLC

@@ -155,12 +244,12 @@ export default class Footer extends Component { diff --git a/common/components/ui/Modal.scss b/common/components/ui/Modal.scss index a1ab0333..e3e1fb4f 100644 --- 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); + } +} \ No newline at end of file diff --git a/common/components/ui/Modal.tsx b/common/components/ui/Modal.tsx index 39fafdf3..86e519dd 100644 --- a/common/components/ui/Modal.tsx +++ b/common/components/ui/Modal.tsx @@ -52,20 +52,15 @@ export default class Modal extends Component {
-

- {title} -

+

{title}

-
- {isOpen && children} -
- {hasButtons && -
- {this.renderButtons()} -
} +
{isOpen && children}
+ {hasButtons && ( +
{this.renderButtons()}
+ )}
); diff --git a/common/sass/styles/overrides/forms.scss b/common/sass/styles/overrides/forms.scss index 8a614254..a91b4394 100644 --- 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); } }