Fix style issues & adjust copy
This commit is contained in:
james-prado
parent
40d4d321eb
commit
8db1f98e34
|
|
@ -1,6 +1,10 @@
|
|||
@import 'common/sass/variables';
|
||||
@import 'common/sass/mixins';
|
||||
|
||||
a.PrimaryButton {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.PrimaryButton {
|
||||
@include reset-button;
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,61 @@
|
|||
import React from 'react';
|
||||
import { Spinner } from 'components/ui';
|
||||
import { Spinner, NewTabLink } from 'components/ui';
|
||||
import { Link } from 'react-router-dom';
|
||||
import './PrimaryButton.scss';
|
||||
|
||||
interface Props {
|
||||
interface DefaultProps {
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
text?: string;
|
||||
}
|
||||
|
||||
interface InternalLinkProps extends DefaultProps {
|
||||
to: string;
|
||||
}
|
||||
|
||||
interface ExternalLinkProps extends DefaultProps {
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface ButtonProps extends DefaultProps {
|
||||
loading?: boolean;
|
||||
loadingTxt?: string;
|
||||
onClick(): void;
|
||||
}
|
||||
|
||||
export default class PrimaryButton extends React.Component<Props> {
|
||||
public render() {
|
||||
const { text, disabled, className, loading, loadingTxt, onClick } = this.props;
|
||||
return (
|
||||
<button
|
||||
className={`PrimaryButton ${loading ? 'loading' : ''} ${className}`}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="PrimaryButton-spinner-wrapper">
|
||||
<Spinner light={true} />
|
||||
<span>{loadingTxt}</span>
|
||||
</div>
|
||||
) : (
|
||||
text
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
type Props = ButtonProps | InternalLinkProps | ExternalLinkProps;
|
||||
|
||||
const PrimaryButton = (props: Props): JSX.Element => {
|
||||
const { text, disabled, className } = props;
|
||||
const { loading, loadingTxt, onClick } = props as ButtonProps;
|
||||
const { to } = props as InternalLinkProps;
|
||||
const { href } = props as ExternalLinkProps;
|
||||
return !onClick ? (
|
||||
to ? (
|
||||
<Link to={href} className={`PrimaryButton ${className}`}>
|
||||
{text}
|
||||
</Link>
|
||||
) : (
|
||||
<NewTabLink href={href} className={`PrimaryButton ${className}`}>
|
||||
{text}
|
||||
</NewTabLink>
|
||||
)
|
||||
) : (
|
||||
<button
|
||||
className={`PrimaryButton ${loading ? 'loading' : ''} ${className}`}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="PrimaryButton-spinner-wrapper">
|
||||
<Spinner light={true} />
|
||||
<span>{loadingTxt}</span>
|
||||
</div>
|
||||
) : (
|
||||
text
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default PrimaryButton;
|
||||
|
|
|
|||
|
|
@ -61,14 +61,16 @@ $speed: 500ms;
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: auto;
|
||||
margin-bottom: 1rem;
|
||||
max-width: 895px;
|
||||
|
||||
@media screen and (max-width: $screen-xs) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -127,9 +129,10 @@ $speed: 500ms;
|
|||
|
||||
&-override {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.3;
|
||||
bottom: -15%;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
@import 'common/sass/variables';
|
||||
@import 'common/sass/mixins';
|
||||
|
||||
$speed: 500ms;
|
||||
@keyframes enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.WalletWarning {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -8,41 +20,34 @@
|
|||
|
||||
&-title {
|
||||
color: color(brand-danger);
|
||||
margin: 0 0 $space;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
margin-bottom: $space * 2;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
max-width: 61ch;
|
||||
line-height: 1.6;
|
||||
margin: auto;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
max-width: 440px;
|
||||
margin: 0 auto #{-$space};
|
||||
|
||||
&-btn {
|
||||
width: 100%;
|
||||
margin: 0 0 $space;
|
||||
|
||||
&.is-cancel {
|
||||
@include reset-button;
|
||||
opacity: 0.4;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fa {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
margin-right: $space-xs;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
&-btn {
|
||||
margin: auto !important;
|
||||
width: 100%;
|
||||
max-width: 308px;
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import translate from 'translations';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import translate, { translateRaw } from 'translations';
|
||||
import { PrimaryButton, SecondaryButton } from 'components';
|
||||
import './InsecureWalletWarning.scss';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -25,17 +25,18 @@ export class InsecureWalletWarning extends React.Component<Props> {
|
|||
{translate('INSECURE_WALLET_TYPE_DESC', { $wallet_type: walletType })}
|
||||
</p>
|
||||
|
||||
<div className="WalletWarning-buttons">
|
||||
<NewTabLink
|
||||
<div className="WalletWarning-btn-wrapper">
|
||||
<SecondaryButton
|
||||
text={translateRaw('ACTION_4')}
|
||||
onClick={onCancel}
|
||||
className="WalletWarning-btn"
|
||||
/>
|
||||
<div className="flex-spacer" />
|
||||
<PrimaryButton
|
||||
text={translateRaw('WALLET_SUGGESTION_DESKTOP_APP')}
|
||||
href="https://download.mycrypto.com/"
|
||||
className="WalletWarning-buttons-btn is-download btn btn-lg btn-primary"
|
||||
>
|
||||
{translate('WALLET_SUGGESTION_DESKTOP_APP')}
|
||||
</NewTabLink>
|
||||
<button className="WalletWarning-buttons-btn is-cancel" onClick={onCancel}>
|
||||
<i className="fa fa-arrow-left" />
|
||||
{translate('INSECURE_WALLET_GO_BACK')}
|
||||
</button>
|
||||
className="WalletWarning-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -18,94 +18,96 @@ $speed: 500ms;
|
|||
&-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
&-decrypt {
|
||||
position: relative;
|
||||
&-buy {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: decrypt-enter 500ms ease 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-desc {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-tip {
|
||||
font-size: $font-size-xs-bump;
|
||||
opacity: 0.7;
|
||||
margin-bottom: $space;
|
||||
}
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-desc {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-tip {
|
||||
font-size: $font-size-xs-bump;
|
||||
opacity: 0.7;
|
||||
margin-bottom: $space;
|
||||
}
|
||||
|
||||
&-help {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
&-help {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-error {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
&.is-showing {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2.5rem;
|
||||
&-message {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.is-showing {
|
||||
opacity: 1;
|
||||
}
|
||||
.Spinner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-buy {
|
||||
margin: 10px 0;
|
||||
}
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&-message {
|
||||
&-tip {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.Spinner {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin: auto;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 360px;
|
||||
> p {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #a8adb3;
|
||||
text-align: left;
|
||||
&:first-child {
|
||||
color: #333;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin: auto;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 360px;
|
||||
> p {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #a8adb3;
|
||||
text-align: left;
|
||||
&:first-child {
|
||||
color: #333;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
&-btn {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { SecureWalletName } from 'config';
|
||||
import { SecureWalletName, ledgerReferralURL } from 'config';
|
||||
import translate, { translateRaw } from 'translations';
|
||||
import { LedgerWallet } from 'libs/wallet';
|
||||
import { NetworkConfig } from 'types/network';
|
||||
|
|
@ -71,14 +70,15 @@ class LedgerNanoSDecryptClass extends PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<div className="LedgerDecrypt">
|
||||
<div className="LedgerDecrypt-header">
|
||||
<h2 className="LedgerDecrypt-decrypt-title">
|
||||
{translate('UNLOCK_DEVICE', { $device: translateRaw('X_LEDGER') })}
|
||||
</h2>
|
||||
<p className="LedgerDecrypt-decrypt-desc">
|
||||
{translate('UNLOCK_DEVICE_NEXT_STEP', { $network: this.props.network.name })}{' '}
|
||||
</p>
|
||||
</div>
|
||||
<h2 className="LedgerDecrypt-title">
|
||||
{translate('UNLOCK_DEVICE', { $device: translateRaw('X_LEDGER') })}
|
||||
</h2>
|
||||
<p className="LedgerDecrypt-buy">
|
||||
Don't have a one?{' '}
|
||||
<span>
|
||||
<a href={ledgerReferralURL}>Order now!</a>
|
||||
</span>
|
||||
</p>
|
||||
{error && (
|
||||
<div className={`LedgerDecrypt-error alert alert-danger ${showErr}`}>{error}</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ $speed: 500ms;
|
|||
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 128px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
|
|
@ -103,7 +103,7 @@ $speed: 500ms;
|
|||
}
|
||||
|
||||
&-btn {
|
||||
margin: auto;
|
||||
margin: auto !important;
|
||||
width: 100%;
|
||||
max-width: 308px;
|
||||
&-wrapper {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,39 @@
|
|||
$speed: 500ms;
|
||||
@keyframes enter {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.SafeTminiDecrypt {
|
||||
text-align: center;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-desc {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
|
||||
&-help {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
|
|
@ -9,6 +42,8 @@
|
|||
&-error {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
&.is-showing {
|
||||
opacity: 1;
|
||||
|
|
@ -16,7 +51,14 @@
|
|||
}
|
||||
|
||||
&-buy {
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: decrypt-enter 500ms ease 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
&-message {
|
||||
|
|
@ -28,4 +70,39 @@
|
|||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 160px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin: auto;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 360px;
|
||||
> p {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #a8adb3;
|
||||
text-align: left;
|
||||
&:first-child {
|
||||
color: #333;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { PrimaryButton, SecondaryButton } from 'components';
|
||||
import { SecureWalletName, safeTReferralURL } from 'config';
|
||||
import translate, { translateRaw } from 'translations';
|
||||
import { SafeTWallet } from 'libs/wallet';
|
||||
import { AppState } from 'features/reducers';
|
||||
import { getSingleDPath, getPaths } from 'features/config';
|
||||
import { Spinner, NewTabLink } from 'components/ui';
|
||||
import UnsupportedNetwork from './UnsupportedNetwork';
|
||||
import DeterministicWalletsModal from './DeterministicWalletsModal';
|
||||
import img from 'assets/images/wallets/safe-t.svg';
|
||||
import './SafeT.scss';
|
||||
|
||||
//todo: conflicts with comment in walletDecrypt -> onUnlock method
|
||||
|
|
@ -48,6 +48,7 @@ class SafeTminiDecryptClass extends PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
public render() {
|
||||
const { props } = this;
|
||||
const { dPath, publicKey, chainCode, error, isLoading } = this.state;
|
||||
const showErr = error ? 'is-showing' : '';
|
||||
|
||||
|
|
@ -58,26 +59,33 @@ class SafeTminiDecryptClass extends PureComponent<Props, State> {
|
|||
// todo: update help link
|
||||
return (
|
||||
<div className="SafeTminiDecrypt">
|
||||
<button
|
||||
className="SafeTminiDecrypt-decrypt btn btn-primary btn-lg btn-block"
|
||||
onClick={this.handleNullConnect}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="SafeTminiDecrypt-message">
|
||||
<Spinner light={true} />
|
||||
{translate('WALLET_UNLOCKING')}
|
||||
</div>
|
||||
) : (
|
||||
translate('ADD_SAFE_T_SCAN')
|
||||
)}
|
||||
</button>
|
||||
<h2 className="SafeTminiDecrypt-title">{translate('ADD_SAFE_T_SCAN')}</h2>
|
||||
<p className="SafeTminiDecrypt-buy">
|
||||
Don't have a one?{' '}
|
||||
<span>
|
||||
<a href={safeTReferralURL}>Order now!</a>
|
||||
</span>
|
||||
</p>
|
||||
{error && (
|
||||
<div className={`SafeTminiDecrypt-error alert alert-danger ${showErr}`}>{error}</div>
|
||||
)}
|
||||
<img src={img} alt="Safe-T Logo" className="SafeTminiDecrypt-illustration" />
|
||||
|
||||
<NewTabLink className="SafeTminiDecrypt-buy btn btn-sm btn-default" href={safeTReferralURL}>
|
||||
{translate('ORDER_SAFE_T')}
|
||||
</NewTabLink>
|
||||
|
||||
<div className={`SafeTminiDecrypt-error alert alert-danger ${showErr}`}>{error || '-'}</div>
|
||||
<div className="TrezorDecrypt-btn-wrapper">
|
||||
<SecondaryButton
|
||||
text="Back"
|
||||
onClick={(props as any).clearWalletChoice}
|
||||
className="Web3Decrypt-btn"
|
||||
/>
|
||||
<div className="flex-spacer" />
|
||||
<PrimaryButton
|
||||
text="Connect"
|
||||
onClick={this.handleNullConnect}
|
||||
loading={isLoading}
|
||||
loadingTxt={translateRaw('WALLET_UNLOCKING')}
|
||||
className="TrezorDecrypt-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DeterministicWalletsModal
|
||||
isOpen={!!publicKey && !!chainCode}
|
||||
|
|
|
|||
|
|
@ -55,8 +55,13 @@ $speed: 500ms;
|
|||
}
|
||||
|
||||
&-buy {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: decrypt-enter 500ms ease 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +77,7 @@ $speed: 500ms;
|
|||
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 128px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
|
|
|
|||
|
|
@ -59,22 +59,19 @@ class TrezorDecryptClass extends PureComponent<Props, State> {
|
|||
|
||||
return (
|
||||
<div className="TrezorDecrypt">
|
||||
<div className="TrezorDecrypt-header">
|
||||
<h2 className="TrezorDecrypt-decrypt-title">
|
||||
{translate('UNLOCK_DEVICE', { $device: translateRaw('X_TREZOR') })}
|
||||
</h2>
|
||||
</div>
|
||||
{error && (
|
||||
<div className={`TrezorDecrypt-error alert alert-danger ${showErr}`}>{error}</div>
|
||||
)}
|
||||
<img src={img} alt="Trezor illustration" className="TrezorDecrypt-illustration" />
|
||||
|
||||
<h2 className="TrezorDecrypt-decrypt-title">
|
||||
{translate('UNLOCK_DEVICE', { $device: translateRaw('X_TREZOR') })}
|
||||
</h2>
|
||||
<p className="TrezorDecrypt-buy">
|
||||
Don't have a one?{' '}
|
||||
<span>
|
||||
<a href={trezorReferralURL}>Order now!</a>
|
||||
</span>
|
||||
</p>
|
||||
{error && (
|
||||
<div className={`TrezorDecrypt-error alert alert-danger ${showErr}`}>{error}</div>
|
||||
)}
|
||||
<img src={img} alt="Trezor illustration" className="TrezorDecrypt-illustration" />
|
||||
|
||||
<div className="TrezorDecrypt-btn-wrapper">
|
||||
<SecondaryButton
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ $speed: 500ms;
|
|||
|
||||
&-illustration {
|
||||
margin-bottom: 2rem;
|
||||
width: 128px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
|
|
|
|||
|
|
@ -12,29 +12,29 @@ $speed: 500ms;
|
|||
|
||||
.Web3Decrypt {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
&-decrypt {
|
||||
position: relative;
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-desc {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
&-desc {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: enter $speed ease 1;
|
||||
}
|
||||
|
||||
&-help {
|
||||
|
|
@ -54,9 +54,13 @@ $speed: 500ms;
|
|||
}
|
||||
|
||||
&-buy {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 400;
|
||||
animation: decrypt-enter 500ms ease 1;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -71,8 +75,9 @@ $speed: 500ms;
|
|||
}
|
||||
|
||||
&-illustration {
|
||||
margin: auto;
|
||||
margin-bottom: 2rem;
|
||||
width: 128px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
|
||||
import translate, { translateRaw } from 'translations';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
import { PrimaryButton, SecondaryButton } from 'components';
|
||||
|
|
@ -12,17 +11,14 @@ interface Props {
|
|||
|
||||
export const Web3Decrypt: React.SFC<Props> = props => (
|
||||
<div className="Web3Decrypt">
|
||||
<div className="Web3Decrypt-header">
|
||||
<h2 className="Web3Decrypt-decrypt-title">{translate('ADD_METAMASK')}</h2>
|
||||
</div>
|
||||
<img src={img} alt="Metamask Logo" className="Web3Decrypt-illustration" />
|
||||
<br />
|
||||
<h2 className="Web3Decrypt-title">{translate('ADD_METAMASK')}</h2>
|
||||
<NewTabLink
|
||||
className="Web3Decrypt-buy"
|
||||
href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
|
||||
>
|
||||
{translate('ACTION_13', { $thing: 'MetaMask' })}
|
||||
</NewTabLink>
|
||||
<img src={img} alt="Metamask Logo" className="Web3Decrypt-illustration" />
|
||||
<div className="Web3Decrypt-btn-wrapper">
|
||||
<SecondaryButton
|
||||
text="Back"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
position: absolute;
|
||||
top: -0.5rem;
|
||||
right: 0;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.5rem 1rem !important;
|
||||
|
||||
&-text {
|
||||
padding-right: 8px;
|
||||
|
|
|
|||
|
|
@ -90,14 +90,7 @@ export const STATIC_NETWORKS_INITIAL_STATE: StaticNetworksState = {
|
|||
},
|
||||
gasPriceSettings: gasPriceDefaults,
|
||||
shouldEstimateGasPrice: true,
|
||||
unsupportedTabs: [
|
||||
'NAV_GENERATEWALLET',
|
||||
'NAV_CONTRACTS',
|
||||
'NAV_ENS',
|
||||
'NAV_SIGN',
|
||||
'NAV_TXSTATUS',
|
||||
'NAV_BROADCAST'
|
||||
]
|
||||
unsupportedTabs: [TAB.CREATE, TAB.CONTRACTS, TAB.ENS, TAB.SIGN, TAB.TXSTATUS, TAB.BROADCAST]
|
||||
},
|
||||
Ropsten: {
|
||||
id: 'Ropsten',
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
color: color(text-color-inverted);
|
||||
|
||||
@include theme(dark) {
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,12 +83,11 @@ strong,
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
a:not(.PrimaryButton) {
|
||||
color: color(link-color);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: $transition;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
color: color(link-hover-color);
|
||||
|
|
|
|||
|
|
@ -436,7 +436,7 @@
|
|||
"WALLET_SUGGESTION_GENERATE_3": "Compatible with almost all wallets",
|
||||
"WALLET_SUGGESTION_GENERATE_4": "Free to generate",
|
||||
"WALLET_SUGGESTION_GENERATE_5": "Commonly a target for phishing and hacking",
|
||||
"WALLET_SUGGESTION_DESKTOP_APP": "Download the MyCrypto Desktop App",
|
||||
"WALLET_SUGGESTION_DESKTOP_APP": "Download Desktop App",
|
||||
"WALLET_SUGGESTION_DESKTOP_APP_DESC": "Where you can generate your own private key in a secure, sandboxed environment",
|
||||
"PREFOOTER_WARNING": "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 the correct URL.",
|
||||
"PREFOOTER_SECURITY_WARNING": "You are responsible for your security.",
|
||||
|
|
@ -526,7 +526,7 @@
|
|||
"VIEW_ONLY_ENTER": "Enter an address (e.g. 0x4bbeEB066eD09...)",
|
||||
"GO_TO_ACCOUNT": "Go to Account",
|
||||
"INSECURE_WALLET_TYPE_TITLE": "$wallet_type wallets are disabled online",
|
||||
"INSECURE_WALLET_TYPE_DESC": "Entering your $wallet_type on any website is dangerous. If MyCrypto.com was compromised, or you accidentally visited a phishing website, you could lose your funds. Because of that, we have disabled the use of $wallet_type wallets through the website. In order to access your account, please download MyCrypto and run it locally.",
|
||||
"INSECURE_WALLET_TYPE_DESC": "Entering your $wallet_type on any website is dangerous. If MyCrypto.com were compromised, or you visit a phishing website, you could lose your funds. Because of that, we have disabled the use of $wallet_type wallets. To access your wallet, download our desktop app.",
|
||||
"INSECURE_WALLET_GO_BACK": "Go back to wallet selection",
|
||||
"DONT_HAVE_WALLET_PROMPT": "Don’t have a wallet?",
|
||||
"DL_WALLET_WARNING_1": "**Don't lose it!** It can't be recovered if you lose it.",
|
||||
|
|
|
|||
Loading…
Reference in New Issue