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
This commit is contained in:
parent
74e51345a4
commit
81c817600f
|
@ -1,4 +1,4 @@
|
||||||
@import "common/sass/variables";
|
@import 'common/sass/variables';
|
||||||
|
|
||||||
// footer
|
// footer
|
||||||
.Footer {
|
.Footer {
|
||||||
|
@ -40,6 +40,20 @@
|
||||||
max-width: 28rem;
|
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 {
|
p {
|
||||||
margin: $space-xs 0 $space-sm;
|
margin: $space-xs 0 $space-sm;
|
||||||
}
|
}
|
||||||
|
@ -57,7 +71,7 @@
|
||||||
margin: $font-size-small 0 0;
|
margin: $font-size-small 0 0;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: .25em;
|
margin-right: 0.25em;
|
||||||
|
|
||||||
@media (min-width: $screen-sm-min) {
|
@media (min-width: $screen-sm-min) {
|
||||||
margin-left: -1.5em;
|
margin-left: -1.5em;
|
||||||
|
@ -79,8 +93,12 @@
|
||||||
|
|
||||||
@media screen and (max-width: $grid-float-breakpoint) {
|
@media screen and (max-width: $grid-float-breakpoint) {
|
||||||
.row {
|
.row {
|
||||||
margin-left: -.5rem;
|
margin-left: -0.5rem;
|
||||||
margin-right: -.5rem;
|
margin-right: -0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Modal {
|
||||||
|
color: #000;
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import React, { Component } from 'react';
|
||||||
import translate from 'translations';
|
import translate from 'translations';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
import PreFooter from './PreFooter';
|
import PreFooter from './PreFooter';
|
||||||
|
import Modal, { IButton } from 'components/ui/Modal';
|
||||||
|
|
||||||
const LINKS_LEFT = [
|
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() {
|
public render() {
|
||||||
|
const buttons: IButton[] = [
|
||||||
|
{ text: 'Okay', type: 'default', onClick: this.closeModal }
|
||||||
|
];
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PreFooter />
|
<PreFooter />
|
||||||
|
@ -110,12 +131,8 @@ export default class Footer extends Component {
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<p className="Footer-about-text">
|
<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>
|
</p>
|
||||||
|
|
||||||
{LINKS_LEFT.map(link => {
|
{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>© 2017 MyEtherWallet, LLC</p>
|
<p>© 2017 MyEtherWallet, LLC</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -155,12 +244,12 @@ export default class Footer extends Component {
|
||||||
</h5>
|
</h5>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
{' '}ETH:{' '}
|
{' '}
|
||||||
<span className="mono wrap">{donationAddressMap.ETH}</span>
|
ETH: <span className="mono wrap">{donationAddressMap.ETH}</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
{' '}BTC:{' '}
|
{' '}
|
||||||
<span className="mono wrap">{donationAddressMap.BTC}</span>
|
BTC: <span className="mono wrap">{donationAddressMap.BTC}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
@import "common/sass/variables";
|
@import 'common/sass/variables';
|
||||||
@import "common/sass/mixins";
|
@import 'common/sass/mixins';
|
||||||
|
|
||||||
$m-background: #fff;
|
$m-background: #fff;
|
||||||
$m-window-padding: 20px;
|
$m-window-padding: 20px;
|
||||||
$m-header-padding: 15px;
|
$m-header-padding: 15px;
|
||||||
$m-header-height: 62px;
|
$m-header-height: 62px;
|
||||||
$m-content-padding: 20px;
|
$m-content-padding: 20px;
|
||||||
$m-footer-height: 58px;
|
|
||||||
$m-close-size: 26px;
|
$m-close-size: 26px;
|
||||||
$m-anim-speed: 400ms;
|
$m-anim-speed: 400ms;
|
||||||
|
|
||||||
|
@ -117,7 +116,6 @@ $m-anim-speed: 400ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-footer {
|
&-footer {
|
||||||
height: $m-footer-height;
|
|
||||||
padding: 7px 10px;
|
padding: 7px 10px;
|
||||||
border-top: 1px solid $gray-lighter;
|
border-top: 1px solid $gray-lighter;
|
||||||
background: $m-background;
|
background: $m-background;
|
||||||
|
@ -129,4 +127,8 @@ $m-anim-speed: 400ms;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width: 820px) {
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -52,20 +52,15 @@ export default class Modal extends Component<Props, {}> {
|
||||||
<div className={`Modalshade ${isOpen ? 'is-open' : ''}`} />
|
<div className={`Modalshade ${isOpen ? 'is-open' : ''}`} />
|
||||||
<div className={`Modal ${isOpen ? 'is-open' : ''}`}>
|
<div className={`Modal ${isOpen ? 'is-open' : ''}`}>
|
||||||
<div className="Modal-header">
|
<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}>
|
<button className="Modal-header-close" onClick={handleClose}>
|
||||||
<img className="Modal-header-close-icon" src={closeIcon} />
|
<img className="Modal-header-close-icon" src={closeIcon} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
// Form overrides
|
// Form overrides
|
||||||
@import "common/sass/variables";
|
@import 'common/sass/variables';
|
||||||
|
|
||||||
label {
|
label {
|
||||||
margin-top: $space-sm;
|
margin-top: $space-sm;
|
||||||
|
@ -13,8 +13,8 @@ label + textarea {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"],
|
input[type='radio'],
|
||||||
input[type="checkbox"] {
|
input[type='checkbox'] {
|
||||||
margin: 3px 0 0;
|
margin: 3px 0 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
@ -32,7 +32,7 @@ input[readonly] {
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: $input-border-focus;
|
border-color: $input-border-focus;
|
||||||
outline: 0;
|
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%);
|
0 0 2px fadeout($brand-primary, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -53,33 +53,33 @@ input[readonly] {
|
||||||
.form-control {
|
.form-control {
|
||||||
&.is-valid {
|
&.is-valid {
|
||||||
border-color: lighten($brand-success, 25%);
|
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);
|
0 0 1px rgba($brand-success, 0.5);
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: lighten($brand-success, 15%);
|
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);
|
0 0 3px rgba($brand-success, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-invalid {
|
&.is-invalid {
|
||||||
border-color: lighten($brand-danger, 25%);
|
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);
|
0 0 1px rgba($brand-danger, 0.5);
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: lighten($brand-danger, 15%);
|
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);
|
0 0 3px rgba($brand-danger, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-semivalid {
|
&.is-semivalid {
|
||||||
border-color: lighten($brand-warning, 25%);
|
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);
|
0 0 1px rgba($brand-warning, 0.5);
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: lighten($brand-warning, 15%);
|
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);
|
0 0 3px rgba($brand-warning, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue