status-im/MyCrypto
2
0
Fork 0
mirror of https://github.com/status-im/MyCrypto.git synced 2025-02-02 14:23:42 +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 logo from 'assets/images/logo-myetherwallet.svg';
import { bityReferralURL } from 'config/data';
import PreFooter from './PreFooter';
import './index.scss';
const LINKS_LEFT = [
@ -94,102 +95,105 @@ const LINKS_SOCIAL = [
export default class Footer extends Component {
render() {
return (
<footer className="Footer" role="contentinfo" aria-label="footer">
<div className="Footer-column Footer-about">
<p aria-hidden="true">
<a href="/">
<img
className="Footer-about-logo"
src={logo}
height="55px"
width="auto"
alt="MyEtherWallet"
/>
</a>
</p>
<p className="Footer-about-text">
<span>
{translate('FOOTER_1')}
</span>
<span>
{translate('FOOTER_1b')}
</span>
</p>
<div>
<PreFooter />
<footer className="Footer" role="contentinfo" aria-label="footer">
<div className="Footer-column Footer-about">
<p aria-hidden="true">
<a href="/">
<img
className="Footer-about-logo"
src={logo}
height="55px"
width="auto"
alt="MyEtherWallet"
/>
</a>
</p>
<p className="Footer-about-text">
<span>
{translate('FOOTER_1')}
</span>
<span>
{translate('FOOTER_1b')}
</span>
</p>
{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 => {
{LINKS_LEFT.map(link => {
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">
{link.text}
</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>
<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">
{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>
{/* TODO: Fix me */}
<p>Latest Block#: ?????</p>
</div>
</footer>
</div>
);
}
}

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

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