status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-02-09 01:33:37 +00:00
Code Issues Projects Releases Wiki Activity

Add Pre-footer (#199)

Browse Source 
* create PreFooter components and styles

* add PreFooter to main Footer Component and adjust Footer styles
This commit is contained in:
Daniel Ternyak 2017-09-15 14:38:11 -07:00 committed by GitHub
parent c88e96d603
commit c0cd228336
4 changed files with 123 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
common/components/Footer/PreFooter.jsx Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import './PreFooter.scss';
const PreFooter = () => {
return (
<section className="pre-footer">
<div className="container">
<p>
MyEtherWallet.com does not hold your keys for you. We cannot access
accounts, recover keys, reset passwords, nor reverse transactions.
Protect your keys &amp; always check that you are on correct URL.
<a href="#"> You are responsible for your security.</a>
</p>
</div>
</section>
);
};
export default PreFooter;

12
common/components/Footer/PreFooter.scss Normal file
View File

@ -0,0 +1,12 @@
@import "common/sass/variables";
.pre-footer {
padding: 1rem;
box-shadow: 16px 16px 47px 0 rgba(0, 0, 0, .07);
margin-top: 5rem;
background-color: white;
text-align: center;
p {
font-size: $font-size-medium;
}
}

180
common/components/Footer/index.jsx
View File

@ -3,6 +3,7 @@ import translate from 'translations';
import { donationAddressMap } from 'config/data'; import { donationAddressMap } from 'config/data';
import logo from 'assets/images/logo-myetherwallet.svg'; import logo from 'assets/images/logo-myetherwallet.svg';
import { bityReferralURL } from 'config/data'; import { bityReferralURL } from 'config/data';
import PreFooter from './PreFooter';
import './index.scss'; import './index.scss';
const LINKS_LEFT = [ const LINKS_LEFT = [
@ -94,102 +95,105 @@ const LINKS_SOCIAL = [
export default class Footer extends Component { export default class Footer extends Component {
render() { render() {
return ( return (
<footer className="Footer" role="contentinfo" aria-label="footer"> <div>
<div className="Footer-column Footer-about"> <PreFooter />
<p aria-hidden="true"> <footer className="Footer" role="contentinfo" aria-label="footer">
<a href="/"> <div className="Footer-column Footer-about">
<img <p aria-hidden="true">
className="Footer-about-logo" <a href="/">
src={logo} <img
height="55px" className="Footer-about-logo"
width="auto" src={logo}
alt="MyEtherWallet" height="55px"
/> width="auto"
</a> alt="MyEtherWallet"
</p> />
<p className="Footer-about-text"> </a>
<span> </p>
{translate('FOOTER_1')} <p className="Footer-about-text">
</span> <span>
<span> {translate('FOOTER_1')}
{translate('FOOTER_1b')} </span>
</span> <span>
</p> {translate('FOOTER_1b')}
</span>
</p>
{LINKS_LEFT.map(link => { {LINKS_LEFT.map(link => {
return (
<p key={link.href}>
<a href={link.href} target="_blank" rel="noopener">
{link.text}
</a>
</p>
);
})}
<p>&copy; 2017 MyEtherWallet, LLC</p>
</div>
<div className="Footer-column 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>
{LINKS_SUPPORT.map(link => {
return ( return (
<li key={link.href}> <p key={link.href}>
<a href={link.href} target="_blank" rel="noopener">
{link.text}
</a>
</p>
);
})}
<p>&copy; 2017 MyEtherWallet, LLC</p>
</div>
<div className="Footer-column 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>
{LINKS_SUPPORT.map(link => {
return (
<li key={link.href}>
<a href={link.href} target="_blank">
{link.text}
</a>
</li>
);
})}
</ul>
<h5>
<i aria-hidden="true">💝</i>
{translate('FOOTER_2')}
</h5>
<ul>
<li>
{' '}ETH:{' '}
<span className="mono wrap">{donationAddressMap.ETH}</span>
</li>
<li>
{' '}BTC:{' '}
<span className="mono wrap">{donationAddressMap.BTC}</span>
</li>
</ul>
</div>
<div className="Footer-column Footer-links">
{LINKS_RIGHT.map(link => {
return (
<p key={link.href}>
<a href={link.href} target="_blank"> <a href={link.href} target="_blank">
{link.text} {link.text}
</a> </a>
</li> </p>
); );
})} })}
</ul> <p>
{LINKS_SOCIAL.map((link, i) => {
return (
<span key={link.href}>
<a key={link.href} href={link.href} target="_blank">
{link.text}
</a>
{i !== LINKS_SOCIAL.length - 1 && ' · '}
</span>
);
})}
</p>
<h5> {/* TODO: Fix me */}
<i aria-hidden="true">💝</i> <p>Latest Block#: ?????</p>
{translate('FOOTER_2')} </div>
</h5> </footer>
<ul> </div>
<li>
{' '}ETH:{' '}
<span className="mono wrap">{donationAddressMap.ETH}</span>
</li>
<li>
{' '}BTC:{' '}
<span className="mono wrap">{donationAddressMap.BTC}</span>
</li>
</ul>
</div>
<div className="Footer-column Footer-links">
{LINKS_RIGHT.map(link => {
return (
<p key={link.href}>
<a href={link.href} target="_blank">
{link.text}
</a>
</p>
);
})}
<p>
{LINKS_SOCIAL.map((link, i) => {
return (
<span key={link.href}>
<a key={link.href} href={link.href} target="_blank">
{link.text}
</a>
{i !== LINKS_SOCIAL.length - 1 && ' · '}
</span>
);
})}
</p>
{/* TODO: Fix me */}
<p>Latest Block#: ?????</p>
</div>
</footer>
); );
} }
} }

1
common/components/Footer/index.scss
View File

@ -4,7 +4,6 @@
.Footer { .Footer {
background-color: $ether-navy; background-color: $ether-navy;
color: white; color: white;
margin-top: 100px;
padding-top: $space-xs; padding-top: $space-xs;
padding-bottom: $space-sm; padding-bottom: $space-sm;
display: flex; display: flex;