diff --git a/common/assets/images/header-bg.jpg b/common/assets/images/header-bg.jpg new file mode 100644 index 00000000..03317e17 Binary files /dev/null and b/common/assets/images/header-bg.jpg differ diff --git a/common/components/Footer/Disclaimer.tsx b/common/components/Footer/Disclaimer.tsx new file mode 100644 index 00000000..fbaf6635 --- /dev/null +++ b/common/components/Footer/Disclaimer.tsx @@ -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 ( + + + +

+ 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/index.scss b/common/components/Footer/index.scss index e8af032f..92a9c282 100644 --- a/common/components/Footer/index.scss +++ b/common/components/Footer/index.scss @@ -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,24 +46,23 @@ } } - &-affiliate-wrap { - & .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; + // 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 { - background-color: white; - color: #0e97c0; - } - & a { - transition: color 0s; color: inherit; - &:hover { - color: inherit; - } } } } @@ -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; } } diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 1dfa4a89..6373bb63 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -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 { - 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 { public render() { - const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }]; return (
@@ -137,94 +122,23 @@ export default class Footer extends React.PureComponent {

{translate('FOOTER_1')}

- Knowledge Base - - Helpers & ENS Debugging - - - -

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

Latest Block#: {this.props.latestBlock}

-

v{VERSION}

-

© {new Date().getFullYear()} MyCrypto, LLC

+

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

+ +
-
- - You can support us by supporting our blockchain-family. -
-

Consider using our affiliate links to

-
    - -
-

Buy a

-
    +
    You can support us by buying a...
    +
    +
    {translate('FOOTER_2')} diff --git a/common/components/Header/components/Navigation.scss b/common/components/Header/components/Navigation.scss index 4b8b5ef2..989bfccf 100644 --- a/common/components/Header/components/Navigation.scss +++ b/common/components/Header/components/Navigation.scss @@ -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; diff --git a/common/components/Header/components/Version.tsx b/common/components/Header/components/Version.tsx deleted file mode 100644 index f50feba8..00000000 --- a/common/components/Header/components/Version.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { VERSION } from 'config/data'; - -const Version: React.SFC<{}> = () =>
    v{VERSION}
    ; - -export default Version; diff --git a/common/components/Header/index.scss b/common/components/Header/index.scss index 6611434f..24af876a 100644 --- a/common/components/Header/index.scss +++ b/common/components/Header/index.scss @@ -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)); } } diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx index 9ffa75c3..2c528c62 100644 --- a/common/components/Header/index.tsx +++ b/common/components/Header/index.tsx @@ -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 { />
    - - - -
    diff --git a/common/sass/mixins.scss b/common/sass/mixins.scss index de1be835..a995fd16 100644 --- a/common/sass/mixins.scss +++ b/common/sass/mixins.scss @@ -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;