Update Header & Footer (#1020)
* Adjust header styles. * Update footer. * tscheck * Convert header to jpg for mad file size savings.
This commit is contained in:
William O'Beirne
Daniel Ternyak
parent
785901d671
commit
82cd123632
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,86 @@
|
|||
import React from 'react';
|
||||
import Modal, { IButton } from 'components/ui/Modal';
|
||||
import { HelpLink } from 'components/ui';
|
||||
import { HELP_ARTICLE } from 'config';
|
||||
|
||||
interface State {
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export default class DisclaimerModal extends React.Component<{}, State> {
|
||||
public state: State = {
|
||||
isOpen: false
|
||||
};
|
||||
|
||||
public render() {
|
||||
const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }];
|
||||
return (
|
||||
<React.Fragment>
|
||||
<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>
|
||||
<HelpLink article={HELP_ARTICLE.SECURING_YOUR_ETH}>
|
||||
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.
|
||||
</HelpLink>
|
||||
</p>
|
||||
<p>
|
||||
<b>Always backup your keys: </b>
|
||||
MyCrypto.com & MyCrypto 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, MyCrypto.com & MyCrypto 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 MyCrypto: </b>
|
||||
The community has done an amazing job translating MyCrypto into a variety of languages.
|
||||
However, MyCrypto 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 MyCrypto 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>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
private openModal = () => this.setState({ isOpen: true });
|
||||
private closeModal = () => this.setState({ isOpen: false });
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
justify-content: space-around;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border-top: 3px solid $brand-primary;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
flex-direction: row;
|
||||
|
|
@ -23,7 +24,12 @@
|
|||
}
|
||||
|
||||
&-social-media-wrap {
|
||||
margin-top: 32px;
|
||||
margin-top: $space;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-top: $space-md;
|
||||
}
|
||||
|
||||
& .Footer-social-media-link {
|
||||
transition: opacity 0.3s;
|
||||
color: white;
|
||||
|
|
@ -40,8 +46,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-affiliate-wrap {
|
||||
& .Footer-affiliate-tag {
|
||||
// Don't use &, needs to override styles
|
||||
.Footer-affiliate-tag {
|
||||
background-color: #0e97c0;
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
|
|
@ -60,7 +66,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-column {
|
||||
padding: 1rem 2rem;
|
||||
|
|
@ -69,10 +74,10 @@
|
|||
&-about {
|
||||
&-logo {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
padding: 0 10px 0 0;
|
||||
padding-top: 0;
|
||||
height: auto;
|
||||
max-width: 20rem;
|
||||
max-width: 12rem;
|
||||
}
|
||||
&-text {
|
||||
max-width: 50ch;
|
||||
|
|
@ -84,7 +89,7 @@
|
|||
&-info {
|
||||
& > a {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -104,6 +109,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-copyright {
|
||||
&-spacer {
|
||||
margin: 0 $space-xs;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $space-xs 0 $space-sm;
|
||||
}
|
||||
|
|
@ -122,26 +133,22 @@
|
|||
|
||||
h5 {
|
||||
font-size: $font-size-bump;
|
||||
margin: $font-size-small 0 0;
|
||||
margin: $space-md 0;
|
||||
|
||||
i {
|
||||
margin-right: 0.25em;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0 0 $space-xs 0;
|
||||
margin: 0 0 $space-md 0;
|
||||
}
|
||||
|
||||
li,
|
||||
p {
|
||||
font-size: $font-size-small;
|
||||
font-size: 0.8rem;
|
||||
margin: $space-sm 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import logo from 'assets/images/logo-mycrypto.svg';
|
||||
import {
|
||||
bityReferralURL,
|
||||
ledgerReferralURL,
|
||||
trezorReferralURL,
|
||||
bitboxReferralURL,
|
||||
|
|
@ -12,7 +11,7 @@ import React from 'react';
|
|||
import translate from 'translations';
|
||||
import './index.scss';
|
||||
import PreFooter from './PreFooter';
|
||||
import Modal, { IButton } from 'components/ui/Modal';
|
||||
import Disclaimer from './Disclaimer';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import OnboardModal from 'containers/OnboardModal';
|
||||
|
||||
|
|
@ -65,6 +64,15 @@ const SOCIAL_MEDIA: Link[] = [
|
|||
];
|
||||
|
||||
const PRODUCT_INFO: Link[] = [
|
||||
{
|
||||
link: knowledgeBaseURL,
|
||||
text: 'Knowledge Base'
|
||||
},
|
||||
{
|
||||
link: 'https://www.mycrypto.com/helpers.html',
|
||||
text: 'Helpers & ENS Debugging'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://github.com/MyCryptoHQ/MyCrypto',
|
||||
text: 'Github: Current Site'
|
||||
|
|
@ -78,11 +86,6 @@ const PRODUCT_INFO: Link[] = [
|
|||
text: 'Github: Latest Release'
|
||||
},
|
||||
|
||||
{
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/myetherwallet-cx/nlbmnnijcnlegkjjpcfjclmcfggfefdm?hl=en',
|
||||
text: 'MyEtherWallet Extension'
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
|
||||
|
|
@ -99,26 +102,8 @@ interface Props {
|
|||
latestBlock: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
isOpen: boolean;
|
||||
}
|
||||
|
||||
export default class Footer extends React.PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = { isOpen: false };
|
||||
}
|
||||
|
||||
public openModal = () => {
|
||||
this.setState({ isOpen: true });
|
||||
};
|
||||
|
||||
public closeModal = () => {
|
||||
this.setState({ isOpen: false });
|
||||
};
|
||||
|
||||
export default class Footer extends React.PureComponent<Props> {
|
||||
public render() {
|
||||
const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }];
|
||||
return (
|
||||
<div>
|
||||
<OnboardModal />
|
||||
|
|
@ -137,94 +122,23 @@ export default class Footer extends React.PureComponent<Props, State> {
|
|||
</NewTabLink>
|
||||
</p>
|
||||
<p className="Footer-about-text">{translate('FOOTER_1')}</p>
|
||||
<NewTabLink href={knowledgeBaseURL}>Knowledge Base</NewTabLink>
|
||||
<NewTabLink href="https://www.myetherwallet.com/helpers">
|
||||
Helpers & ENS Debugging
|
||||
</NewTabLink>
|
||||
|
||||
<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>
|
||||
<NewTabLink href={`${knowledgeBaseURL}/security/securing-your-ethereum`}>
|
||||
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.
|
||||
</NewTabLink>
|
||||
<p className="Footer-copyright">
|
||||
© {new Date().getFullYear()} MyCrypto, LLC{' '}
|
||||
<span className="Footer-copyright-spacer">·</span> v{VERSION}
|
||||
</p>
|
||||
<p>
|
||||
<b>Always backup your keys: </b>
|
||||
MyCrypto.com & MyCrypto 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, MyCrypto.com & MyCrypto 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 MyCrypto: </b>
|
||||
The community has done an amazing job translating MyCrypto into a variety of
|
||||
languages. However, MyCrypto 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 MyCrypto 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>Latest Block#: {this.props.latestBlock}</p>
|
||||
<p>v{VERSION}</p>
|
||||
<p>© {new Date().getFullYear()} MyCrypto, LLC</p>
|
||||
|
||||
<Disclaimer />
|
||||
</div>
|
||||
|
||||
<div className="Footer-info">
|
||||
<h5>
|
||||
<i aria-hidden="true">👫</i>
|
||||
You can support us by supporting our blockchain-family.
|
||||
</h5>
|
||||
<p>Consider using our affiliate links to</p>
|
||||
<ul className="Footer-affiliate-wrap">
|
||||
<AffiliateTag link={bityReferralURL} text="Swap ETH/BTC/EUR/CHF via Bity.com" />
|
||||
</ul>
|
||||
<p>Buy a</p>
|
||||
<ul className="Footer-affiliate-wrap">
|
||||
<h5>You can support us by buying a...</h5>
|
||||
<ul>
|
||||
<AffiliateTag link={ledgerReferralURL} text="Ledger Nano S" />
|
||||
<AffiliateTag link={trezorReferralURL} text="TREZOR" />
|
||||
<AffiliateTag link={bitboxReferralURL} text="Digital Bitbox" />
|
||||
</ul>
|
||||
|
||||
<h5>
|
||||
<i aria-hidden="true">💝</i>
|
||||
{translate('FOOTER_2')}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
border-top: .25rem solid $brand-primary;
|
||||
border-top: 3px solid $brand-primary;
|
||||
transition: border 300ms ease;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
import React from 'react';
|
||||
import { VERSION } from 'config/data';
|
||||
|
||||
const Version: React.SFC<{}> = () => <div className="Version">v{VERSION}</div>;
|
||||
|
||||
export default Version;
|
||||
|
|
@ -80,10 +80,15 @@ $small-size: 900px;
|
|||
&-branding {
|
||||
color: white;
|
||||
padding: 0;
|
||||
@include bg-gradient;
|
||||
background: #274e7e;
|
||||
background-image: url('~assets/images/header-bg.jpg'),
|
||||
linear-gradient(130deg, #37709e, #274e7e);
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
|
||||
@include small-query {
|
||||
text-align: center;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
|
|
@ -106,6 +111,8 @@ $small-size: 900px;
|
|||
width: auto;
|
||||
padding: 8px;
|
||||
padding-right: 0;
|
||||
filter: drop-shadow(0 1px 0 rgba(#000, 0.12))
|
||||
drop-shadow(1px 1px 0 rgba(#000, 0.12));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import {
|
|||
import Navigation from './components/Navigation';
|
||||
import CustomNodeModal from './components/CustomNodeModal';
|
||||
import OnlineStatus from './components/OnlineStatus';
|
||||
import Version from './components/Version';
|
||||
import { getKeyByValue } from 'utils/helpers';
|
||||
import { makeCustomNodeId } from 'utils/node';
|
||||
import { getNetworkConfigFromId } from 'utils/network';
|
||||
|
|
@ -122,10 +121,6 @@ export default class Header extends PureComponent<Props, State> {
|
|||
/>
|
||||
</Link>
|
||||
<div className="Header-branding-right">
|
||||
<span className="Header-branding-right-version hidden-xs">
|
||||
<Version />
|
||||
</span>
|
||||
|
||||
<div className="Header-branding-right-online">
|
||||
<OnlineStatus isOffline={isOffline} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
@import './variables';
|
||||
@import '~bootstrap-sass/assets/stylesheets/bootstrap/mixins';
|
||||
|
||||
@mixin bg-gradient {
|
||||
background: $ether-navy;
|
||||
background: linear-gradient(149deg, #132a45, #143a56, #21a4ce, #19b4ad);
|
||||
}
|
||||
|
||||
@mixin reset-button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue