Restyled payment history table

Closes 6202
Closes 3485 /cc: @mrose17

- Removed "pull-right" class from the close button in modalOverlay.less (to confirm 21ece29 of 6009 fixed 5719)
- Added color:@braveMediumOrange to .sectionTitle of .paymentHistory (closes 6229)
- Added padding-left and padding-right to th and td (fixes 6231)
- Added white-space:nowrap to disable wrap (fixes 6230)
- Added min-width:80px to the button inside the footer (fixes 6232)
- Made sectionTitle consistent
  - Removed ":not(.paymentHistory)" from modalOverlay.less

Test Plan:
1. Disable the ledger
2. run "npm run add-simulated-payment-history" some times
3. Enable the ledger
4. Click "View Payment History..."
5. Click "OK" button

js/components/modalOverlay.js

@@ -47,7 +47,7 @@ class ModalOverlay extends ImmutableComponent {
     var button = null
     var title = null
     if (!this.props.emptyDialog) {
-      close = (this.props.onHide ? <button type='button' className='close pull-right' onClick={this.props.onHide} /> : null)
+      close = (this.props.onHide ? <button type='button' className='close' onClick={this.props.onHide} /> : null)
       title = (this.props.title ? <div className='sectionTitle' data-l10n-id={this.props.title} /> : null)
     }
     let customTitleClassesStr = (this.props.customTitleClasses ? this.props.customTitleClasses : '')

less/about/preferences.less

@@ -496,46 +496,77 @@ table.sortableTable {
       }
 
       &.paymentHistory {
+        @padding-horizontal: 30px;
+
         .dialog-header,
-        .dialog-body,
         .dialog-footer {
-          padding: 20px;
+          padding: 20px @padding-horizontal;
         }
 
         .dialog-header {
 
           .sectionTitle {
             margin-bottom: 0;
             padding: 0;
+            color: @braveMediumOrange;
+            text-indent: 0;
           }
         }
 
         .dialog-body {
           background: #FFF;
           height: 300px;
           overflow-y: scroll;
+          padding-right: 0;
+          padding-left: 0;
 
           .paymentHistoryTable {
             background-color: #FFF;
 
-            tr {
-              th {
-                color: @darkGray;
-                font-weight: 500;
-                border-bottom: 2px solid @lightGray;
-                text-align: left;
-                width: 18%;
-              }
+            table {
+              border-spacing: 0;
+              margin-top: 1em;
+              margin-bottom: 1em;
+
+              tr {
+
+                &:first-child {
+                  td {
+                    padding-top: .5em;
+                  }
+                }
 
-              td {
-                text-align: left;
+                th,
+                td {
+                  &:first-child {
+                    padding-left: @padding-horizontal;
+                  }
 
-                &.narrow {
+                  &:last-child {
+                    padding-right: @padding-horizontal;
+                  }
+                }
+
+                th {
                   color: @darkGray;
+                  font-weight: 500;
+                  border-bottom: 2px solid @lightGray;
+                  width: 18%;
+                  padding-bottom: .25em;
                 }
 
-                &.wide {
-                  color: #777;
+                td {
+                  white-space: nowrap;
+                  height: 1.5em;
+                  padding: .125em;
+
+                  &.narrow {
+                    color: @darkGray;
+                  }
+
+                  &.wide {
+                    color: #777;
+                  }
                 }
               }
             }
@@ -554,6 +585,10 @@ table.sortableTable {
             .nextPaymentSubmission {
               font-size: 14px;
             }
+
+            .browserButton {
+              min-width: 80px;
+            }
           }
         }
       }

less/modalOverlay.less

@@ -77,14 +77,10 @@
       transition: @transitionFast;
     }
 
-    &:not(.paymentHistory) {
-      .sectionTitle {
-        font-size: 22px;
-        padding: 35px 0 10px 0;
-        text-indent: 50px;
-      }
-    }
     .sectionTitle {
+      font-size: 22px;
+      padding: 35px 0 10px 0;
+      text-indent: 50px;
       color: @darkGray;
     }
   }