Update Header & Footer (#1020)

* Adjust header styles.

* Update footer.

* tscheck

* Convert header to jpg for mad file size savings.

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 (
+      <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 });
+}

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,8 +46,8 @@
     }
   }
 
-  &-affiliate-wrap {
+  // Don't use &, needs to override styles
-    & .Footer-affiliate-tag {
+  .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;
   }
 }

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 {
+export default class Footer extends React.PureComponent<Props> {
-  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 });
-  };
-
   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}>
+            <p className="Footer-copyright">
-              Disclaimer
+              &copy; {new Date().getFullYear()} MyCrypto, LLC{' '}
-            </button>
+              <span className="Footer-copyright-spacer">&middot;</span> v{VERSION}
-            <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>
-              <p>
+
-                <b>Always backup your keys: </b>
+            <Disclaimer />
-                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>&copy; {new Date().getFullYear()} MyCrypto, LLC</p>
           </div>
 
           <div className="Footer-info">
-            <h5>
+            <h5>You can support us by buying a...</h5>
-              <i aria-hidden="true">👫</i>
+            <ul>
-              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">
               <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')}

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;

common/components/Header/components/Version.tsx

@@ -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;

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));
       }
     }
 

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

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;