implement backup page styling

This commit is contained in:
Sean Yesmunt 2018-03-30 01:33:09 -04:00
parent fbb4041e78
commit 1866acc612
3 changed files with 19 additions and 13 deletions

View file

@ -12,7 +12,7 @@ type Props = {
class BackupPage extends React.PureComponent<Props> { class BackupPage extends React.PureComponent<Props> {
render() { render() {
const { daemonSettings } = this.props; const { daemonSettings } = this.props;
const { lbryum_wallet_dir } = daemonSettings; const { lbryum_wallet_dir: lbryumWalletDir } = daemonSettings;
const noDaemonSettings = Object.keys(daemonSettings).length === 0; const noDaemonSettings = Object.keys(daemonSettings).length === 0;
@ -35,24 +35,16 @@ class BackupPage extends React.PureComponent<Props> {
'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.' 'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
)} )}
</p> </p>
</div>
<div className="card__content">
<p> <p>
{__( {__(
'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:' 'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
)} )}
</p> </p>
<div className="card__content"> <p className="card__success-msg">{lbryumWalletDir}</p>
<code>{lbryum_wallet_dir}</code>
</div>
</div>
<div className="card__content">
<p> <p>
<strong> {__(
{__( 'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.' )}
)}
</strong>
</p> </p>
<p> <p>
For more details on backing up and best practices,{' '} For more details on backing up and best practices,{' '}

View file

@ -31,6 +31,9 @@ $large-breakpoint: 1760px;
--color-light-blue: #49b2e2; --color-light-blue: #49b2e2;
--color-red: #e2495e; --color-red: #e2495e;
--color-yellow: #fbd55e; --color-yellow: #fbd55e;
--color-green: #399483;
--color-green-light: #effbe4;
--color-green-blue: #2ec1a8;
--color-divider: #e3e3e3; --color-divider: #e3e3e3;
--text-color: var(--color-black); --text-color: var(--color-black);
@ -123,6 +126,9 @@ $large-breakpoint: 1760px;
--card-radius: 2px; --card-radius: 2px;
--card-margin: $spacing-vertical * 2/3; --card-margin: $spacing-vertical * 2/3;
--card-wallet-color: var(--text-color-inverse); --card-wallet-color: var(--text-color-inverse);
--success-msg-color: var(--color-green);
--success-msg-border: var(--color-green-blue);
--success-msg-bg: var(--color-green-light);
/* File Tile Card */ /* File Tile Card */
--file-tile--media-size: 60px; --file-tile--media-size: 60px;

View file

@ -355,6 +355,14 @@
} }
} }
.card__success-msg {
border-left: 2px solid var(--success-msg-border);
color: var(--success-msg-color);
background-color: var(--success-msg-bg);
padding: $spacing-vertical * 1/3;
margin: $spacing-vertical * 1/3 0;
}
.card__media--autothumb { .card__media--autothumb {
color: red !important; color: red !important;
} }