From dbd2b3d17a220cf3a157b955244aea56712e37aa Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Tue, 30 Aug 2016 11:34:14 -0700
Subject: [PATCH] set ledger column items to right align

---
 js/about/preferences.js     | 16 ++++++++--------
 less/about/preferences.less | 18 ++++++++++--------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/js/about/preferences.js b/js/about/preferences.js
index f589e116fdf..a9eb70ccf0d 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -213,12 +213,12 @@ class LedgerTableRow extends ImmutableComponent {
     const defaultSiteSetting = true
 
     return <tr className={this.enabled ? '' : 'paymentsDisabled'}>
-      <td className='narrow' data-sort={this.padLeft(rank)}>{rank}</td>
-      <td className='wide'><a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a></td>
-      <td className='narrow'><SiteSettingCheckbox hostPattern={this.hostPattern} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabled} /></td>
-      <td data-sort={this.padLeft(views)}>{views}</td>
-      <td data-sort={this.padLeft(duration)}>{this.formattedTime}</td>
-      <td data-sort={this.padLeft(percentage)}>{percentage}</td>
+      <td className='alignRight' data-sort={this.padLeft(rank)}>{rank}</td>
+      <td><a href={publisherURL} target='_blank'><img src={faviconURL} alt={site} /><span>{site}</span></a></td>
+      <td><SiteSettingCheckbox hostPattern={this.hostPattern} defaultValue={defaultSiteSetting} prefKey='ledgerPayments' siteSettings={this.props.siteSettings} checked={this.enabled} /></td>
+      <td className='alignRight' data-sort={this.padLeft(views)}>{views}</td>
+      <td className='alignRight' data-sort={this.padLeft(duration)}>{this.formattedTime}</td>
+      <td className='alignRight' data-sort={this.padLeft(percentage)}>{percentage}</td>
     </tr>
   }
 }
@@ -409,8 +409,8 @@ class PaymentHistoryRow extends ImmutableComponent {
     var totalAmountStr = `${this.totalAmount} ${this.currency}`
 
     return <tr>
-      <td className='narrow' data-sort={this.timestamp}>{date}</td>
-      <td className='wide' data-sort={this.satoshis}>{totalAmountStr}</td>
+      <td data-sort={this.timestamp}>{date}</td>
+      <td data-sort={this.satoshis}>{totalAmountStr}</td>
     </tr>
   }
 }
diff --git a/less/about/preferences.less b/less/about/preferences.less
index af79029479b..8041f625f70 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -499,6 +499,14 @@ table.sortableTable {
 #ledgerTable {
   height: ~"-webkit-calc(100vh - 300px)";
   overflow-y: scroll;
+
+  tr {
+    th,
+    td {
+      padding: 0 15px;
+    }
+  }
+
 }
 
 .modal .dialog.paymentHistory .sectionTitle {
@@ -652,7 +660,6 @@ div.nextPaymentSubmission {
       color: @mediumGray;
       -webkit-font-smoothing: antialiased;
       text-align: left;
-      width: 8%;
       vertical-align: top;
 
       a {
@@ -671,13 +678,8 @@ div.nextPaymentSubmission {
         }
       }
 
-      &.narrow {
-        width: 5%;
-      }
-
-      &.wide {
-        width: 20%;
-        text-align: left;
+      &.alignRight {
+        text-align: right;
       }
 
       input[type='range'] {