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

@@ -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>

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' />

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;

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;

less/forms.less

@@ -569,6 +569,10 @@
 
   .bookmarkButtons {
     margin: 20px 0 10px 0;
+
+    .doneButton {
+      margin-right: 0;
+    }
   }
 
   .bookmarkFormInner {

less/navigationBar.less

@@ -610,6 +610,14 @@
 }
 
 #navigator {
+  .bookmarkButtons {
+    display: flex;
+
+    .removeButton {
+      flex-grow: 1;
+    }
+  }
+
   .stopButton,
   .reloadButton,
   .homeButton {