From 408c0011caf1cd79eb8d29e632096ca68292aa4d Mon Sep 17 00:00:00 2001 From: William O'Beirne Date: Sat, 10 Feb 2018 13:56:05 -0500 Subject: [PATCH] Update Footer to Prod Styles (#1044) --- common/components/Footer/Disclaimer.tsx | 86 ------ common/components/Footer/DisclaimerModal.scss | 15 ++ common/components/Footer/DisclaimerModal.tsx | 69 +++++ common/components/Footer/PreFooter.tsx | 11 +- common/components/Footer/index.scss | 252 +++++++++--------- common/components/Footer/index.tsx | 230 +++++++++------- common/config/data.tsx | 6 +- common/sass/variables/typography.scss | 1 + 8 files changed, 368 insertions(+), 302 deletions(-) delete mode 100644 common/components/Footer/Disclaimer.tsx create mode 100644 common/components/Footer/DisclaimerModal.scss create mode 100644 common/components/Footer/DisclaimerModal.tsx diff --git a/common/components/Footer/Disclaimer.tsx b/common/components/Footer/Disclaimer.tsx deleted file mode 100644 index fbaf6635..00000000 --- a/common/components/Footer/Disclaimer.tsx +++ /dev/null @@ -1,86 +0,0 @@ -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 ( - - - -

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

-

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

-

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

-

- MIT License Copyright © 2015-2017 MyCrypto 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. - - - - ); - } - - private openModal = () => this.setState({ isOpen: true }); - private closeModal = () => this.setState({ isOpen: false }); -} diff --git a/common/components/Footer/DisclaimerModal.scss b/common/components/Footer/DisclaimerModal.scss new file mode 100644 index 00000000..d3e1a00b --- /dev/null +++ b/common/components/Footer/DisclaimerModal.scss @@ -0,0 +1,15 @@ +@import 'common/sass/variables'; +@import 'common/sass/mixins'; + +.Disclaimer { + color: $text-color; + + &-button { + @include reset-button; + color: #FFF; + + &:hover { + opacity: 0.8; + } + } +} diff --git a/common/components/Footer/DisclaimerModal.tsx b/common/components/Footer/DisclaimerModal.tsx new file mode 100644 index 00000000..8ec1b62b --- /dev/null +++ b/common/components/Footer/DisclaimerModal.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import Modal, { IButton } from 'components/ui/Modal'; +import { HelpLink } from 'components/ui'; +import { HELP_ARTICLE } from 'config'; +import './DisclaimerModal.scss'; + +interface Props { + isOpen: boolean; + handleClose(): void; +} + +const DisclaimerModal: React.SFC = ({ isOpen, handleClose }) => { + const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: handleClose }]; + return ( + +

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

+

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

+

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

+

+ MIT License Copyright © 2015-2017 MyCrypto 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. + + + ); +}; + +export default DisclaimerModal; diff --git a/common/components/Footer/PreFooter.tsx b/common/components/Footer/PreFooter.tsx index 75443858..d502110d 100644 --- a/common/components/Footer/PreFooter.tsx +++ b/common/components/Footer/PreFooter.tsx @@ -1,15 +1,18 @@ import React from 'react'; import './PreFooter.scss'; -const PreFooter: React.SFC<{}> = () => { +interface Props { + openModal(): void; +} + +const PreFooter: React.SFC = ({ openModal }) => { return (

MyCrypto.com does not hold your keys for you. We cannot access accounts, recover keys, - reset passwords, nor reverse transactions. Protect your keys & always check that you - are on correct URL. - You are responsible for your security. + reset passwords, nor reverse transactions. Protect your keys & always check that you are + on correct URL. You are responsible for your security.

diff --git a/common/components/Footer/index.scss b/common/components/Footer/index.scss index 406c70f5..cf7ac9d5 100644 --- a/common/components/Footer/index.scss +++ b/common/components/Footer/index.scss @@ -1,158 +1,172 @@ @import 'common/sass/variables'; +@import 'common/sass/mixins'; + +$footer-link-color: #fff; -// footer .Footer { background-color: $ether-navy; - color: white; - padding-top: $space-xs; - padding-bottom: $space-sm; + padding: $space-sm $space-sm 0; display: flex; - flex-direction: column; - justify-content: space-around; - text-align: center; - align-items: center; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; border-top: 3px solid $brand-primary; - @media (min-width: $screen-sm-min) { - flex-direction: row; + &-section { + color: #fff; + padding: $space; + } + + // Responsive ordering behavior + &-links { + order: 1; text-align: left; - align-items: flex-start; + } + &-about { + order: 2; + text-align: center; + } + &-support { + order: 3; + text-align: right; } - & > div { - padding: 8px 16px; + @media (max-width: 75rem) { + justify-content: center; + + &-links { + text-align: center; + order: 2; + } + &-about { + order: 1; + width: 100%; + padding-bottom: $space * 2; + margin-bottom: $space * 2; + border-bottom: 1px solid rgba(#fff, 0.2); + } + &-support { + text-align: center; + order: 3; + } } - &-social-media-wrap { - margin-top: $space; - @media (min-width: $screen-sm-min) { - margin-top: $space-md; + &-links { + &-social { + margin-bottom: $space; + margin-left: -$space-xs; } - & .Footer-social-media-link { - transition: opacity 0.3s; - color: white; - margin: 1rem; - margin-left: 0; - &:hover { - opacity: 0.8; - color: white; - } - &:focus { - opacity: 0.8; - color: white; + &-links { + a { + display: block; + font-size: $font-size-small; + color: $footer-link-color; + margin-bottom: $space-md; } } } - // Don't use &, needs to override styles - .Footer-affiliate-tag { - background-color: #0e97c0; - display: inline-block; - padding: 4px 12px; - border-radius: 30px; - margin: 0rem 0.5rem 0.5rem 0px; - transition: color 0.3s, background-color 0.3s; - &:hover { - background-color: white; - color: #0e97c0; - } - & a { - transition: color 0s; - color: inherit; - &:hover { - color: inherit; - } - } - } - - &-column { - padding: 1rem 2rem; - } &-about { &-logo { - width: 100%; - padding: 0 10px 0 0; - padding-top: 0; - height: auto; - max-width: 12rem; - } - &-text { - max-width: 50ch; - } - } - - &-about, - &-links, - &-info { - & > a { display: block; - font-size: 0.8rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; + width: 100%; + max-width: 245px; + margin: -$space-xs auto $space * 1.25; + text-align: center; + } + + &-links { + margin-bottom: $space; + + > a { + margin: 0 $space-md; + color: $footer-link-color; + font-size: $font-size-bump; + } + } + + &-text { + font-size: $font-size-xs; + opacity: 0.8; + margin: 0 auto $space; + max-width: 530px; + } + + &-legal { + font-size: $font-size-xs-bump; + + &-text { + display: inline-block; + margin: 0 $space-sm; + + > a { + color: $footer-link-color; + } + } } } - &-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; + + &-support { + &-title { + margin: 0 0 $space-sm; + font-size: $font-size-base; } - } - &-copyright { - &-spacer { - margin: 0 $space-xs; + &-affiliates { + margin-bottom: $space-sm; + + > a { + display: block; + font-size: $font-size-xs-bump; + margin-bottom: $space-xs; + color: $footer-link-color; + } } - } - p { - margin: $space-xs 0 $space-sm; - } + &-donate { + margin-bottom: $space-sm; - a, - .Footer-modal-button { - color: #7fe5ff; - font-weight: 400; - transition: color 0.3s; - &:hover, - &:focus { - opacity: 1; - color: darken(#4ac8ed, 5%); + &-address { + font-size: 0.7rem; + opacity: 0.8; + } } - } - h5 { - font-size: $font-size-bump; - margin: $space-md 0; + &-friends { + > a { + display: inline-block; + font-size: $font-size-xs; + color: $footer-link-color; - i { - margin-right: 0.25em; + &:after { + content: '·'; + margin: 0 $space-sm; + } + + &:last-child:after { + display: none; + } + } } } - - ul { - list-style: none; - padding-left: 0; - margin: 0 0 $space-md 0; - } - - > li, - > p { - font-size: 0.8rem; - margin: $space-sm 0; - } } -.Modal { - color: #000; +.SocialMediaLink { + transition: opacity 0.3s; + color: #fff; + margin: 0.65rem; + + > i { + font-size: 1.2rem; + } + + &:hover, + &:focus { + opacity: 0.8; + color: #fff; + } } diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 2064ba88..46e2e9f1 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -2,94 +2,105 @@ import logo from 'assets/images/logo-mycrypto.svg'; import { ledgerReferralURL, trezorReferralURL, - bitboxReferralURL, + ethercardReferralURL, donationAddressMap, VERSION, knowledgeBaseURL } from 'config'; import React from 'react'; -import translate from 'translations'; -import './index.scss'; import PreFooter from './PreFooter'; -import Disclaimer from './Disclaimer'; +import DisclaimerModal from './DisclaimerModal'; import { NewTabLink } from 'components/ui'; import OnboardModal from 'containers/OnboardModal'; - -const AffiliateTag = ({ link, text }: Link) => { - return ( -
  • - {text} -
    • - ); -}; +import './index.scss'; const SocialMediaLink = ({ link, text }: Link) => { return ( - - + + ); }; const SOCIAL_MEDIA: Link[] = [ - { - link: 'https://www.reddit.com/r/mycrypto/', - text: 'reddit' - }, - { link: 'https://twitter.com/mycrypto', text: 'twitter' }, - { link: 'https://www.facebook.com/MyCrypto/', text: 'facebook' }, - { link: 'https://medium.com/@mycrypto', text: 'medium' }, - { link: 'https://www.linkedin.com/company/mycrypto', text: 'linkedin' }, - { link: 'https://github.com/MyCryptoHQ', text: 'github' + }, + { + link: 'https://www.reddit.com/r/mycrypto/', + text: 'reddit' } ]; const PRODUCT_INFO: Link[] = [ { - link: knowledgeBaseURL, - text: 'Knowledge Base' + link: + 'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn', + text: 'Ether Address Lookup' + }, + { + link: + 'https://chrome.google.com/webstore/detail/ethersecuritylookup/bhhfhgpgmifehjdghlbbijjaimhmcgnf', + text: 'Ether Security Lookup' + }, + { + link: 'https://etherscamdb.info/', + text: 'EtherScamDB' }, { link: 'https://www.mycrypto.com/helpers.html', text: 'Helpers & ENS Debugging' }, + { + link: 'mailto:press@mycrypto.com', + text: 'Press Inquiries' + } +]; +const AFFILIATES: Link[] = [ { - link: 'https://github.com/MyCryptoHQ/MyCrypto', - text: 'Github: Current Site' + link: ledgerReferralURL, + text: 'Buy a Ledger Wallet' }, { - link: 'https://github.com/MyCryptoHQ', - text: 'Github: MyCrypto Org' + link: trezorReferralURL, + text: 'Buy a TREZOR' }, { - link: 'https://github.com/MyCryptoHQ/MyCrypto/releases/latest', - text: 'Github: Latest Release' - }, + link: ethercardReferralURL, + text: 'Get an ether.card' + } +]; +const FRIENDS: Link[] = [ { - link: - 'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn', - text: 'Anti - Phishing Extension' + link: 'https://metamask.io/', + text: 'MetaMask' + }, + { + link: 'https://infura.io/', + text: 'Infura' + }, + { + link: 'https://etherscan.io/', + text: 'Etherscan' } ]; @@ -102,66 +113,22 @@ interface Props { latestBlock: string; } -export default class Footer extends React.PureComponent { +interface State { + isDisclaimerOpen: boolean; +} + +export default class Footer extends React.PureComponent { + public state: State = { + isDisclaimerOpen: false + }; + public render() { return (
    - - +
    -
    - -

    {translate('FOOTER_1')}

    - -

    - © {new Date().getFullYear()} MyCrypto, LLC{' '} - · {VERSION} -

    - - -
    - -
    -
    You can support us by buying a...
    -
      - - - -
    - -
    - - {translate('FOOTER_2')} -
    -
      -
    • - ETH: {donationAddressMap.ETH} -
      • -
    • - {' '} - BTC: {donationAddressMap.BTC} -
      • -
    -
    - -
    - {PRODUCT_INFO.map((productInfoItem, idx) => ( - - {productInfoItem.text} - - ))} - -
    +
    +
    {SOCIAL_MEDIA.map((socialMediaItem, idx) => ( { /> ))}
    + +
    + {PRODUCT_INFO.map((productInfoItem, idx) => ( + + {productInfoItem.text} + + ))} +
    +
    + +
    + + MyCrypto logo + + +
    + MyCrypto.com + Help & Support + Our Team +
    + +

    + MyCrypto is an open-source, client-side tool for generating Ether Wallets, handling + ERC-20 tokens, and interacting with the blockchain more easily. Developed by and for + the community since 2015, we’re focused on building awesome products that put the + power in people’s hands. +

    + +
    +
    + © {new Date().getFullYear()} MyCrypto, Inc. +
    + +
    v{VERSION}
    +
    +
    + +
    +
    Support Us & Our Friends
    +
    + {AFFILIATES.map(link => ( + + {link.text} + + ))} +
    + +
    +
    Donate ETH
    +
    {donationAddressMap.ETH}
    +
    + +
    +
    Donate BTC
    +
    {donationAddressMap.BTC}
    +
    + +
    + {FRIENDS.map(link => ( + + {link.text} + + ))} +
    + + +
    ); } + + private toggleModal = () => { + this.setState(state => { + this.setState({ isDisclaimerOpen: !state.isDisclaimerOpen }); + }); + }; } diff --git a/common/config/data.tsx b/common/config/data.tsx index 01ac1a9d..2adcf339 100644 --- a/common/config/data.tsx +++ b/common/config/data.tsx @@ -3,8 +3,8 @@ import { getValues } from '../utils/helpers'; export const languages = require('./languages.json'); -// Displays in the header -export const VERSION = '(BETA) 0.1.0'; +// Displays in the footer +export const VERSION = '0.1.0 (BETA)'; export const N_FACTOR = 8192; // Displays at the top of the site, make message empty string to remove. @@ -56,6 +56,8 @@ export const bitboxReferralURL = 'https://digitalbitbox.com/?ref=mycrypto'; export const bityReferralURL = 'https://bity.com/af/jshkb37v'; // TODO - add the real referral url once you know it export const shapeshiftReferralURL = 'https://shapeshift.io'; +export const ethercardReferralURL = + 'https://ether.cards/?utm_source=mycrypto&utm_medium=cpm&utm_campaign=site'; export enum SecureWalletName { WEB3 = 'web3', diff --git a/common/sass/variables/typography.scss b/common/sass/variables/typography.scss index 7ceccd0a..7a79b392 100644 --- a/common/sass/variables/typography.scss +++ b/common/sass/variables/typography.scss @@ -16,6 +16,7 @@ $font-size-bump-more: 1.15rem; // 17.25 $font-size-bump: 1.07rem; // 16.05 $font-size-base: 1rem; // 15 $font-size-small: 0.9rem; // 13.8 +$font-size-xs-bump: 0.8rem; // 12.8 $font-size-xs: 0.75rem; // 12 $font-size-h1: $font-size-large-bump;