implement backup page styling
This commit is contained in:
parent
fbb4041e78
commit
1866acc612
3 changed files with 19 additions and 13 deletions
|
@ -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,{' '}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue