Reorganize ledgerBackup.js

app/extensions/brave/locales/en-US/preferences.properties

@@ -10,7 +10,7 @@ backWithArrow=⟨ Previous
 nextWithArrow=Next ⟩
 balance=Balance:
 helloBat=Hello, and thank you for using Brave Payments!
-helloBatText1=Brave Payments allows you to make anonymous, monthly<br>contributions to the publishers you visit on the internet. 
+helloBatText1=Brave Payments allows you to make anonymous, monthly<br>contributions to the publishers you visit on the internet.
 helloBatText2=Please note that <strong>your Brave Payments Wallet is unidirectional</strong>, and the money you transfer from outside accounts <strong>can not be retrieved or refunded</strong>. The wallet’s primary purpose is to send your contributions to publishers each month, based on your control and advisement.
 helloBatText3=Note: Due to the inherent volatility of cryptocurrency markets, your balance will typically fluctuate on a daily basis.
 batContributionTitle=Introducing BAT Contribution Matching!
@@ -165,7 +165,8 @@ ja-JP=Japanese (Japan)
 ko-KR=Korean
 lastContribution=Last contribution:
 lastPass=LastPass&reg;
-ledgerBackupContent=Below, you will find the anonymized recovery key that is required if you ever lose access to this computer.<br><strong>Make sure you keep this key private, or else your wallet will be compromised.</strong>
+ledgerBackupText1=Below, you will find the anonymized recovery key that is required if you ever lose access to this computer.
+ledgerBackupText2=Make sure you keep this key private, or else your wallet will be compromised.
 ledgerBackupTitle=Backup your Brave wallet
 ledgerPaymentsShown=Brave Payments
 ledgerRecoveryContent=Your previous wallet will now be used. Your new wallet will be discarded.

app/renderer/components/preferences/payment/addFundsDialog/steps/addFundsBatScreen.js

@@ -9,6 +9,7 @@ const {AboutPageSectionTitle} = require('../../../../common/sectionTitle')
 // Styles
 const {StyleSheet, css} = require('aphrodite')
 const {addFundsDialogMinHeight} = require('../../../../styles/global').spacing
+const globalStyles = require('../../../../styles/global')
 const batIcon = require('../../../../../../extensions/brave/img/ledger/cryptoIcons/BAT_icon.svg')
 
 class BatWelcomeScreen extends React.Component {
@@ -80,7 +81,7 @@ const styles = StyleSheet.create({
   },
 
   batScreen__text: {
-    margin: '20px 0'
+    marginTop: globalStyles.spacing.dialogInsideMargin
   },
 
   batScreen__text_small: {

app/renderer/components/preferences/payment/ledgerBackup.js

@@ -24,21 +24,15 @@ class LedgerBackupContent extends ImmutableComponent {
     const passphrase = this.props.ledgerData.get('passphrase')
 
     return <section>
-      <span data-l10n-id='ledgerBackupContent' />
+      <div data-l10n-id='ledgerBackupText1' />
+      <div className={css(styles.ledgerBackupText_bottom)} data-l10n-id='ledgerBackupText2' />
       <div className={css(styles.ledgerBackupContent)}>
-        <div className={css(
-          styles.ledgerBackupContent__copyKey,
-          styles.ledgerBackupContent__copyKey_second
-        )}>
-          <BrowserButton secondaryColor
-            l10nId='copy'
-            testId='copyButtonSecond'
-            onClick={this.copyToClipboard.bind(this, passphrase)}
-          />
-          <div className={css(styles.ledgerBackupContent__copyKey__key)}>
-            <span className={css(styles.ledgerBackupContent__copyKey__key__phrase)}>{passphrase}</span>
-          </div>
-        </div>
+        <BrowserButton secondaryColor
+          l10nId='copy'
+          testId='copyButtonSecond'
+          onClick={this.copyToClipboard.bind(this, passphrase)}
+        />
+        <div className={css(styles.ledgerBackupContent__key)}>{passphrase}</div>
       </div>
     </section>
   }
@@ -85,36 +79,28 @@ class LedgerBackupFooter extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
-  ledgerBackupContent: {
-    // Align the buttons and keys even when the width of the strings is not equal
-    width: 'max-content',
-    margin: 'auto',
-    maxWidth: '100%'
+  ledgerBackupText_bottom: {
+    fontWeight: '600',
+    marginTop: globalStyles.spacing.dialogInsideMargin
   },
 
-  ledgerBackupContent__copyKey: {
+  ledgerBackupContent: {
     display: 'flex',
     alignItems: 'center',
     margin: `${globalStyles.spacing.dialogInsideMargin} auto`
   },
 
-  ledgerBackupContent__copyKey_second: {
-    marginBottom: 0
-  },
-
-  ledgerBackupContent__copyKey__key: {
-    marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} * 2)`
-  },
-
-  ledgerBackupContent__copyKey__key__header: {
-    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
-  },
+  ledgerBackupContent__key: {
+    marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} * 2)`,
 
-  ledgerBackupContent__copyKey__key__phrase: {
+    // See syncTab.js
+    cursor: 'text',
     userSelect: 'initial',
-    cursor: 'initial',
-    color: '#D44600',
-    font: '18px monospace'
+    color: globalStyles.color.braveDarkOrange,
+
+    // See: https://github.com/Khan/aphrodite#object-key-ordering
+    fontSize: '18px',
+    fontFamily: 'monospace'
   }
 })
 

app/renderer/components/preferences/syncTab.js

@@ -550,7 +550,9 @@ const styles = StyleSheet.create({
     marginBottom: globalStyles.spacing.settingsListContainerMargin
   },
   passphrase: {
-    font: '18px monospace'
+    // See: https://github.com/Khan/aphrodite#object-key-ordering
+    fontSize: '18px',
+    fontFamily: 'monospace'
   },
   subText: {
     color: globalStyles.color.gray,
@@ -600,9 +602,11 @@ const styles = StyleSheet.create({
 
   listItem__passphrase: {
     margin: `${globalStyles.spacing.dialogInsideMargin} 0`,
-    color: globalStyles.color.braveDarkOrange,
+
+    // See ledgerBackup.js
+    cursor: 'text',
     userSelect: 'initial',
-    cursor: 'initial'
+    color: globalStyles.color.braveDarkOrange
   },
 
   syncOverlayBody__listWrapper: {