From 23207ed38d1423017a94285f229d8ba5dec0c8d3 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 20 Nov 2016 01:53:34 +0900
Subject: [PATCH] Refactor buttons on about:preferences#payments (part 2)

- Removed redundant classes from bookmarkButtons to fix the size difference between "Remove" and "Done" buttons, which was introduced with the commit 85e428a
- Introduced new classes "removeButton" and "doneButton" inside bookmarkButtons to make the width of the row same as the other rows
- Introduced a new class "copyButton" to keep the font-size of the recovery key copy buttons to 14px
- Indroduced a flexbox to copyKeyContainer to keep the buttons aligned

Auditors: @bradleyrichter

Test Plan:
1. Click the bookmark button on the URL bar
2. Make sure height of "Remove" and "Done" buttons is equal
3. Make sure "Remove" button is longer than "Done" button
4. Make sure color of "Remove" label is no longer white on hover
5. Make sure width of the row of the buttons is equal to the other rows
6. Open about:bookmarks and edit a bookmark
7. Make sure height and width of "Remove" and "Done" are equal
8. Open about:preferences#payments, click Advanced Settings and Backup your wallet
9. Make sure keys and buttons are aligned
10. Make sure font-size of the labels "Copy" is 14px
---
 app/renderer/components/addEditBookmarkHanger.js |  4 ++--
 js/about/preferences.js                          |  4 ++--
 less/about/preferences.less                      | 12 +++++++++---
 less/button.less                                 |  1 -
 less/forms.less                                  |  4 ++++
 less/navigationBar.less                          |  8 ++++++++
 6 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/app/renderer/components/addEditBookmarkHanger.js b/app/renderer/components/addEditBookmarkHanger.js
index a03e1d642b2..93251ee6711 100644
--- a/app/renderer/components/addEditBookmarkHanger.js
+++ b/app/renderer/components/addEditBookmarkHanger.js
@@ -188,10 +188,10 @@ class AddEditBookmarkHanger extends ImmutableComponent {
             <div className='bookmarkButtons'>
               {
                 this.props.originalDetail
-                ? <Button l10nId='remove' className='primaryButton whiteButton inlineButton' onClick={this.onRemoveBookmark} />
+                ? <Button l10nId='remove' className='removeButton whiteButton' onClick={this.onRemoveBookmark} />
                 : null
               }
-              <Button l10nId='done' disabled={!this.bookmarkNameValid} className='primaryButton' onClick={this.onSave} />
+              <Button l10nId='done' disabled={!this.bookmarkNameValid} className='doneButton primaryButton' onClick={this.onSave} />
             </div>
           </div>
         </div>
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 5ed29c65402..a694e9a69cf 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -1058,7 +1058,7 @@ class PaymentsTab extends ImmutableComponent {
         <span data-l10n-id='ledgerBackupContent' />
         <div className='copyKeyContainer'>
           <div className='copyContainer'>
-            <Button l10nId='copy' className='whiteButton inlineButton' onClick={this.copyToClipboard.bind(this, paymentId)} />
+            <Button l10nId='copy' className='copyButton whiteButton wideButton' onClick={this.copyToClipboard.bind(this, paymentId)} />
           </div>
           <div className='keyContainer'>
             <h3 data-l10n-id='firstKey' />
@@ -1067,7 +1067,7 @@ class PaymentsTab extends ImmutableComponent {
         </div>
         <div className='copyKeyContainer'>
           <div className='copyContainer'>
-            <Button l10nId='copy' className='whiteButton inlineButton' onClick={this.copyToClipboard.bind(this, passphrase)} />
+            <Button l10nId='copy' className='copyButton whiteButton wideButton' onClick={this.copyToClipboard.bind(this, passphrase)} />
           </div>
           <div className='keyContainer'>
             <h3 data-l10n-id='secondKey' />
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 8bd2eeba0cb..1282e525676 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -904,7 +904,7 @@ div.nextPaymentSubmission {
       line-height: 1.3em;
     }
     span {
-      display: inline-block;
+      display: inline;
     }
     a {
       text-decoration: none;
@@ -949,15 +949,21 @@ div.nextPaymentSubmission {
 
     .copyKeyContainer {
       display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
       width: 75%;
       margin: 20px auto;
 
       .copyContainer {
-        margin-top: 35px;
+        .copyButton {
+          font-size: 14px;
+          margin: 0;
+        }
+
       }
 
       .keyContainer {
-        margin-left: 75px;
+        margin-left: 1em;
 
         h3 {
           margin-bottom: 15px;
diff --git a/less/button.less b/less/button.less
index f54c87381e5..a11bb654cad 100644
--- a/less/button.less
+++ b/less/button.less
@@ -130,7 +130,6 @@ span.menuButton {
     border: 2px solid white;
     box-shadow: @buttonShadow;
     cursor: pointer;
-    display: block;
     font-weight: normal;
     font-style: normal;
     color: @darkGray;
diff --git a/less/forms.less b/less/forms.less
index d6df6b34fd1..e7af86641a9 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -569,6 +569,10 @@
 
   .bookmarkButtons {
     margin: 20px 0 10px 0;
+
+    .doneButton {
+      margin-right: 0;
+    }
   }
 
   .bookmarkFormInner {
diff --git a/less/navigationBar.less b/less/navigationBar.less
index ef67fe33b65..6765c512aaa 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -610,6 +610,14 @@
 }
 
 #navigator {
+  .bookmarkButtons {
+    display: flex;
+
+    .removeButton {
+      flex-grow: 1;
+    }
+  }
+
   .stopButton,
   .reloadButton,
   .homeButton {