implement backup page styling

src/renderer/page/backup/view.jsx

@@ -12,7 +12,7 @@ type Props = {
 class BackupPage extends React.PureComponent<Props> {
   render() {
     const { daemonSettings } = this.props;
-    const { lbryum_wallet_dir } = daemonSettings;
+    const { lbryum_wallet_dir: lbryumWalletDir } = daemonSettings;
 
     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.'
                   )}
                 </p>
-              </div>
-              <div className="card__content">
                 <p>
                   {__(
                     'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
                   )}
                 </p>
-                <div className="card__content">
-                  <code>{lbryum_wallet_dir}</code>
-                </div>
-              </div>
-              <div className="card__content">
+                <p className="card__success-msg">{lbryumWalletDir}</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.'
-                    )}
-                  </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.'
+                  )}
                 </p>
                 <p>
                   For more details on backing up and best practices,{' '}

src/renderer/scss/_vars.scss

@@ -31,6 +31,9 @@ $large-breakpoint: 1760px;
   --color-light-blue: #49b2e2;
   --color-red: #e2495e;
   --color-yellow: #fbd55e;
+  --color-green: #399483;
+  --color-green-light: #effbe4;
+  --color-green-blue: #2ec1a8;
   --color-divider: #e3e3e3;
 
   --text-color: var(--color-black);
@@ -123,6 +126,9 @@ $large-breakpoint: 1760px;
   --card-radius: 2px;
   --card-margin: $spacing-vertical * 2/3;
   --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--media-size: 60px;

src/renderer/scss/component/_card.scss

@@ -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 {
   color: red !important;
 }