diff --git a/common/assets/fonts/social-media.woff b/common/assets/fonts/social-media.woff index d4d0e518..7a4155b9 100644 Binary files a/common/assets/fonts/social-media.woff and b/common/assets/fonts/social-media.woff differ diff --git a/common/assets/fonts/social-media.woff2 b/common/assets/fonts/social-media.woff2 index f2acafc8..78e4b3ef 100644 Binary files a/common/assets/fonts/social-media.woff2 and b/common/assets/fonts/social-media.woff2 differ diff --git a/common/components/AlphaAgreement/index.tsx b/common/components/AlphaAgreement/index.tsx deleted file mode 100644 index 7ec4b42a..00000000 --- a/common/components/AlphaAgreement/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from 'react'; -import './index.scss'; - -const LS_KEY = 'acknowledged-alpha'; - -interface State { - isFading: boolean; - hasAcknowledged: boolean; -} -export default class AlphaAgreement extends React.PureComponent<{}, State> { - public state = { - hasAcknowledged: !!localStorage.getItem(LS_KEY), - isFading: false - }; - - public render() { - if (this.state.hasAcknowledged) { - return null; - } - - const isFading = this.state.isFading ? 'is-fading' : ''; - - return ( -
-
-

This is an Unstable Version of MyCrypto

-

- You are about to access a beta version of MyCrypto that is currently in development. In - its current state, it should only be used for testing, not for important transactions. -

-

- Any wallets you generate should not hold a significant value, and any transactions you - make should be for small amounts. MyCrypto does not claim responsibility for any issues - that happen while using the beta version. -

-

Are you sure you would like to continue?

- -
- - -
-
-
- ); - } - - private doContinue = () => { - localStorage.setItem(LS_KEY, 'true'); - this.setState({ isFading: true }); - - setTimeout(() => { - this.setState({ hasAcknowledged: true }); - }, 1000); - }; - - private reject = () => { - window.location.assign('https://mycrypto.com'); - }; -} diff --git a/common/components/AlphaAgreement/index.scss b/common/components/BetaAgreement/index.scss similarity index 79% rename from common/components/AlphaAgreement/index.scss rename to common/components/BetaAgreement/index.scss index 18665d51..f8171e20 100644 --- a/common/components/AlphaAgreement/index.scss +++ b/common/components/BetaAgreement/index.scss @@ -1,43 +1,50 @@ @import "common/sass/variables"; @import "common/sass/mixins"; -.AlphaAgreement { +.BetaAgreement { @include cover-message; background: $brand-info; &-content { + h2 { + text-align: center; + } + &-buttons { padding-top: 20px; &-btn { display: block; width: 100%; - max-width: 240px; + max-width: 280px; margin: 0 auto; border: none; padding: 0; outline: none; + transition: $transition; - &.is-reject { + &.is-continue { height: 60px; line-height: 60px; font-size: 22px; background: rgba(#fff, 0.96); - color: $gray; + color: $gray-dark; border-radius: 4px; margin-bottom: 20px; &:hover { background: #fff; + color: $gray-darker; } } - &.is-continue { + &.is-reject { background: none; color: #fff; + opacity: 0.7; &:hover { - text-decoration: underline; + opacity: 1; } } } @@ -51,7 +58,7 @@ background: #fff; transition: all 500ms ease 400ms; - .AlphaAgreement-content { + .BetaAgreement-content { opacity: 0; transform: translateY(15px); transition: all 500ms ease; diff --git a/common/components/BetaAgreement/index.tsx b/common/components/BetaAgreement/index.tsx new file mode 100644 index 00000000..fa97718f --- /dev/null +++ b/common/components/BetaAgreement/index.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { NewTabLink } from 'components/ui'; +import { discordURL } from 'config'; +import './index.scss'; + +const LS_KEY = 'acknowledged-beta'; + +interface State { + isFading: boolean; + hasAcknowledged: boolean; +} +export default class BetaAgreement extends React.PureComponent<{}, State> { + public state = { + hasAcknowledged: !!localStorage.getItem(LS_KEY), + isFading: false + }; + + public render() { + if (this.state.hasAcknowledged) { + return null; + } + + const isFading = this.state.isFading ? 'is-fading' : ''; + + return ( +
+
+

Welcome to the New MyCrypto Beta!

+

+ You are about to use a version of MyCrypto that hasn't been released yet. While we are + confident that it is close to being production ready, you may want to use the current + production site for larger or more time-sensitive transactions. +

+

+ Feedback and bug reports are greatly appreciated. You can file issues on our{' '} + + GitHub repository + {' '} + or join our Discord server to discuss the + beta. +

+

Are you sure you would like to continue?

+ +
+ + +
+
+
+ ); + } + + private doContinue = () => { + localStorage.setItem(LS_KEY, 'true'); + this.setState({ isFading: true }); + + setTimeout(() => { + this.setState({ hasAcknowledged: true }); + }, 1000); + }; + + private reject = () => { + window.location.assign('https://mycrypto.com'); + }; +} diff --git a/common/components/ErrorScreen/index.tsx b/common/components/ErrorScreen/index.tsx index 6c1b3063..76953117 100644 --- a/common/components/ErrorScreen/index.tsx +++ b/common/components/ErrorScreen/index.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { NewTabLink } from 'components/ui'; import './index.scss'; const SUBJECT = 'Error!'; @@ -24,14 +25,17 @@ const ErrorScreen: React.SFC = ({ error }) => { > support@mycrypto.com {' '} - if a refresh doesn't fix it (or click it anyway to open a ticket 😊). If you attach the - following error, you'll make it a ton easier to fix the issue. + if a refresh doesn't fix it (or click it anyway to open a ticket 😊). You can also submit + an issue on our{' '} + + GitHub Repository + . Please attach the following error to help our team solve your issue.

+ {error.message}
Please make sure the error message does not include any sensitive information before - sending it us. We don't want your private keys! + sending it to us. We don't want your private keys!
- {error.message} ); diff --git a/common/components/Footer/index.scss b/common/components/Footer/index.scss index cf7ac9d5..23a39852 100644 --- a/common/components/Footer/index.scss +++ b/common/components/Footer/index.scss @@ -158,10 +158,10 @@ $footer-link-color: #fff; .SocialMediaLink { transition: opacity 0.3s; color: #fff; - margin: 0.65rem; + margin: 0.55rem; > i { - font-size: 1.2rem; + font-size: 1.15rem; } &:hover, diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 46e2e9f1..15bf7e38 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -5,7 +5,8 @@ import { ethercardReferralURL, donationAddressMap, VERSION, - knowledgeBaseURL + knowledgeBaseURL, + discordURL } from 'config'; import React from 'react'; import PreFooter from './PreFooter'; @@ -46,6 +47,10 @@ const SOCIAL_MEDIA: Link[] = [ { link: 'https://www.reddit.com/r/mycrypto/', text: 'reddit' + }, + { + link: discordURL, + text: 'discord' } ]; diff --git a/common/components/Header/index.scss b/common/components/Header/index.scss index 24af876a..8b93a087 100644 --- a/common/components/Header/index.scss +++ b/common/components/Header/index.scss @@ -41,6 +41,7 @@ $small-size: 900px; font-weight: 300; color: #fff; transition: background-color 80ms ease; + background: $gray-darker; a { color: #fff; @@ -54,7 +55,6 @@ $small-size: 900px; } // Colors - &, &.is-primary { background: $brand-primary; } diff --git a/common/components/Header/index.tsx b/common/components/Header/index.tsx index d0884ce3..a0ab67b2 100644 --- a/common/components/Header/index.tsx +++ b/common/components/Header/index.tsx @@ -155,13 +155,6 @@ class Header extends Component { ariaLabel={`change language. current language ${languages[selectedLanguage]}`} options={Object.values(languages)} value={languages[selectedLanguage]} - extra={ -
  • - - Disclaimer - -
  • - } onChange={this.changeLanguage} size="smr" color="white" diff --git a/common/components/index.ts b/common/components/index.ts index 6492d461..421927e5 100644 --- a/common/components/index.ts +++ b/common/components/index.ts @@ -13,7 +13,7 @@ export { default as Header } from './Header'; export { default as Footer } from './Footer'; export { default as BalanceSidebar } from './BalanceSidebar'; export { default as PaperWallet } from './PaperWallet'; -export { default as AlphaAgreement } from './AlphaAgreement'; +export { default as BetaAgreement } from './BetaAgreement'; export { default as TXMetaDataPanel } from './TXMetaDataPanel'; export { default as WalletDecrypt } from './WalletDecrypt'; export { default as TogglablePassword } from './TogglablePassword'; diff --git a/common/config/data.tsx b/common/config/data.tsx index 1c0ed729..6bce4436 100644 --- a/common/config/data.tsx +++ b/common/config/data.tsx @@ -1,31 +1,26 @@ import React from 'react'; // For ANNOUNCEMENT_MESSAGE jsx +import NewTabLink from 'components/ui/NewTabLink'; import { getValues } from '../utils/helpers'; import packageJson from '../../package.json'; import { GasPriceSetting } from 'types/network'; export const languages = require('./languages.json'); +export const discordURL = 'https://discord.gg/VSaTXEA'; // Displays in the footer export const VERSION = `${packageJson.version} (BETA)`; export const N_FACTOR = 8192; // Displays at the top of the site, make message empty string to remove. -// Type can be primary, warning, danger, success, or info. +// Type can be primary, warning, danger, success, info, or blank for grey. // Message must be a JSX element if you want to use HTML. -export const ANNOUNCEMENT_TYPE = 'warning'; +export const ANNOUNCEMENT_TYPE = ''; export const ANNOUNCEMENT_MESSAGE = ( -
    - This is an early build of MyCrypto Beta. Please only use for testing, or use production at{' '} - {'https://mycrypto.com'}. -
    - - If you're interested in recieving updates about the MyCrypto Beta, you can subscribe via{' '} - - mailchimp - {' '} - :) - -
    + + This is a Beta version of MyCrypto. Please submit any bug reports to our{' '} + GitHub, and join + the discussion on Discord. + ); const etherScan = 'https://etherscan.io'; diff --git a/common/containers/TabSection/index.tsx b/common/containers/TabSection/index.tsx index cf2eed47..198778dd 100644 --- a/common/containers/TabSection/index.tsx +++ b/common/containers/TabSection/index.tsx @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { AlphaAgreement, Footer, Header } from 'components'; +import { BetaAgreement, Footer, Header } from 'components'; import { AppState } from 'reducers'; import Notifications from './Notifications'; import OfflineTab from './OfflineTab'; @@ -31,7 +31,7 @@ class TabSection extends Component {
    ); } diff --git a/common/sass/fonts.scss b/common/sass/fonts.scss index bb1877f2..a98b616c 100644 --- a/common/sass/fonts.scss +++ b/common/sass/fonts.scss @@ -65,25 +65,25 @@ font-size: 48px; } // Refer to docs for updating icon-fonts - &.sm-logo-facebook:before { + &.sm-logo-medium:before { content: '\ea02'; } - &.sm-logo-reddit:before { + &.sm-logo-discord:before { content: '\ea03'; } - &.sm-logo-github:before { + &.sm-logo-linkedin:before { content: '\ea04'; } - &.sm-logo-twitter:before { + &.sm-logo-reddit:before { content: '\ea05'; } - &.sm-logo-linkedin:before { + &.sm-logo-facebook:before { content: '\ea06'; } - &.sm-logo-slack:before { + &.sm-logo-twitter:before { content: '\ea07'; } - &.sm-logo-medium:before { + &.sm-logo-github:before { content: '\ea08'; } }