From 80c871d946e46a5735a7416b4f70eb57587beb7c Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 25 Feb 2017 12:16:43 +0900
Subject: [PATCH] Refactor ledgerBackupContent with Aphrodite

Closes #7382

- copyKeyContainer
- keyContainer
- keyContainer__h3
- keyContainer__span
- recoveryContent__h4
- ledgerRecoveryContent

Test Plan:
1. Open about:preferences#payments
2. Open Advanced Settings
3. Open Backup your wallet
4. Make sure the styling is not broken
---
 .../components/preferences/paymentsTab.js     | 52 +++++++++++++++----
 app/renderer/components/styles/global.js      |  4 +-
 less/about/preferences.less                   | 21 ++------
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index 59328bdf9b2..776168e3d6a 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -15,6 +15,9 @@ const {changeSetting} = require('../../lib/settingsUtil')
 const moment = require('moment')
 moment.locale(navigator.language)
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 // Components
 const Button = require('../../../../js/components/button')
 const {FormTextbox, RecoveryKeyTextbox} = require('../textbox')
@@ -296,22 +299,22 @@ class PaymentsTab extends ImmutableComponent {
     return <div className='board'>
       <div className='panel ledgerBackupContent'>
         <span data-l10n-id='ledgerBackupContent' />
-        <div className='copyKeyContainer'>
+        <div className={css(styles.copyKeyContainer)}>
           <div className='copyContainer'>
             <Button l10nId='copy' className='copyButton whiteButton' onClick={this.copyToClipboard.bind(this, paymentId)} />
           </div>
-          <div className='keyContainer'>
-            <h3 data-l10n-id='firstKey' />
-            <span>{paymentId}</span>
+          <div className={css(styles.keyContainer)}>
+            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='firstKey' />
+            <span className={css(styles.keyContainer__span)}>{paymentId}</span>
           </div>
         </div>
-        <div className='copyKeyContainer'>
+        <div className={css(styles.copyKeyContainer)}>
           <div className='copyContainer'>
             <Button l10nId='copy' className='copyButton whiteButton' onClick={this.copyToClipboard.bind(this, passphrase)} />
           </div>
-          <div className='keyContainer'>
-            <h3 data-l10n-id='secondKey' />
-            <span>{passphrase}</span>
+          <div className={css(styles.keyContainer)}>
+            <h3 className={css(styles.keyContainer__h3)} data-l10n-id='secondKey' />
+            <span className={css(styles.keyContainer__span)}>{passphrase}</span>
           </div>
         </div>
       </div>
@@ -363,8 +366,8 @@ class PaymentsTab extends ImmutableComponent {
         : null
       }
       <div className='panel recoveryContent'>
-        <h4 data-l10n-id='ledgerRecoverySubtitle' />
-        <div className='ledgerRecoveryContent' data-l10n-id='ledgerRecoveryContent' />
+        <h4 className={css(styles.recoveryContent__h4)} data-l10n-id='ledgerRecoverySubtitle' />
+        <div className={css(styles.ledgerRecoveryContent)} data-l10n-id='ledgerRecoveryContent' />
         <SettingsList>
           <SettingItem>
             <h3 data-l10n-id='firstRecoveryKey' />
@@ -608,4 +611,33 @@ function formattedTimeFromNow (timestamp) {
   return moment(new Date(timestamp)).fromNow()
 }
 
+const styles = StyleSheet.create({
+  copyKeyContainer: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    width: '75%',
+    margin: `${globalStyles.spacing.paymentsMargin} auto`
+  },
+
+  keyContainer: {
+    marginLeft: '2em'
+  },
+
+  keyContainer__h3: {
+    marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
+  },
+
+  keyContainer__span: {
+    whiteSpace: 'nowrap'
+  },
+
+  recoveryContent__h4: {
+    marginBottom: globalStyles.spacing.paymentsMargin
+  },
+
+  ledgerRecoveryContent: {
+    marginBottom: globalStyles.spacing.paymentsMargin
+  }
+})
+
 module.exports = PaymentsTab
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index fc523469a28..7d924c51512 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -109,7 +109,9 @@ const globalStyles = {
     defaultTabPadding: '0 4px',
     defaultIconPadding: '2px',
     iconSize: '16px',
-    dialogTopOffset: '30px'
+    dialogTopOffset: '30px',
+    paymentsMargin: '20px',
+    modalPanelHeaderMarginBottom: '.5em'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
diff --git a/less/about/preferences.less b/less/about/preferences.less
index a2957e05002..a40cb1b3e0f 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -451,6 +451,7 @@ table.sortableTable {
       .dialog-body {
         .board {
           .panel {
+            // globalStyles.spacing.modalPanelHeaderMarginBottom in global.js
             @margin-bottom-header: .5em;
 
             // This removes the margin which increases the size of the dialog-header
@@ -537,30 +538,14 @@ table.sortableTable {
             }
 
             &.ledgerBackupContent {
-              .copyKeyContainer {
-                display: flex;
-                align-items: flex-end;
-                width: 75%;
-                margin: 20px auto;
-
+              // TODO: Refactor button.less
+              div[class^='copyKeyContainer'] {
                 .copyContainer {
                   .copyButton {
                     font-size: 14px;
                     margin: 0;
                   }
                 }
-
-                .keyContainer {
-                  margin-left: 2em;
-
-                  h3 {
-                    margin-bottom: @margin-bottom-header;
-                  }
-
-                  > span {
-                    white-space: nowrap;
-                  }
-                }
               }
             }