Remove paymentStyles.margin.bar, margin.barItem, padding.bar

app/renderer/components/preferences/payment/disabledContent.js

@@ -69,7 +69,7 @@ const styles = StyleSheet.create({
   },
 
   walletBarMargin: {
-    marginTop: paymentStyles.margin.bar
+    marginTop: globalStyles.spacing.panelMargin
   },
 
   h3: {

app/renderer/components/preferences/payment/enabledContent.js

@@ -21,7 +21,7 @@ const LedgerTable = require('./ledgerTable')
 
 // style
 const globalStyles = require('../../styles/global')
-const {paymentStyles} = require('../../styles/payment')
+const {paymentStyles, paymentStylesVariables} = require('../../styles/payment')
 const cx = require('../../../../../js/lib/classSet')
 
 // other
@@ -171,9 +171,9 @@ class EnabledContent extends ImmutableComponent {
         <table>
           <thead>
             <tr className={css(styles.tableTr)}>
-              <th className={css(styles.tableTh)} data-l10n-id='monthlyBudget' />
-              <th className={css(styles.tableTh)} data-l10n-id='accountBalance' />
-              <th className={css(styles.tableTh)} />
+              <th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='monthlyBudget' />
+              <th className={css(styles.walletBar__tableTr__tableTh)} data-l10n-id='accountBalance' />
+              <th className={css(styles.walletBar__tableTr__tableTh)} />
             </tr>
           </thead>
           <tbody>
@@ -248,7 +248,9 @@ const styles = StyleSheet.create({
     marginBottom: 0
   },
 
-  tableTh: {
+  walletBar__tableTr__tableTh: {
+    color: paymentStylesVariables.tableHeader.fontColor,
+    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
     textAlign: 'left'
   },
 

app/renderer/components/preferences/payment/history.js

@@ -165,8 +165,8 @@ const styles = StyleSheet.create({
     userSelect: 'none'
   },
   header: {
-    color: globalStyles.color.darkGray,
-    fontWeight: '500',
+    color: paymentStylesVariables.tableHeader.fontColor,
+    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
     textAlign: 'left',
 
     // cancel border-bottom of headerContainer

app/renderer/components/preferences/payment/ledgerTable.js

@@ -14,6 +14,7 @@ const PinnedInput = require('./pinnedInput')
 
 // style
 const globalStyles = require('../../styles/global')
+const {paymentStylesVariables} = require('../../styles/payment')
 const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
 const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
 const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
@@ -336,12 +337,15 @@ const styles = StyleSheet.create({
 
   tableClass: {
     width: '100%',
-    textAlign: 'left',
-    borderCollapse: 'collapse'
+    borderCollapse: 'collapse',
+    border: 'none',
+    margin: '0 auto'
   },
 
   tableTh: {
-    fontSize: '14px'
+    color: paymentStylesVariables.tableHeader.fontColor,
+    fontSize: '14px',
+    fontWeight: paymentStylesVariables.tableHeader.fontWeight
   },
 
   tableTr: {

app/renderer/components/styles/payment.js

@@ -2,28 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const globalStyles = require('./global')
+
 const paymentStyles = {
   font: {
     regular: '14.5px'
   },
   width: {
     tableRow: '235px',
     tableCell: '265px' // width.tableRow + 30px
-  },
-
-  // Copied to global.js
-  margin: {
-    bar: '15px',
-    barItem: '12px'
-  },
-  padding: {
-    bar: '18px' // margin.barItem * 1.5
   }
 }
 
 const paymentStylesVariables = {
   spacing: {
     paymentHistoryTablePadding: '30px'
+  },
+
+  tableHeader: {
+    fontColor: globalStyles.color.darkGray,
+    fontWeight: '600'
   }
 }
 

less/about/preferences.less

@@ -48,6 +48,14 @@ body {
   display: flex;
   height: 100%;
   margin-left: @sideBarWidth;
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }
 
 a {
@@ -260,32 +268,6 @@ table.sortableTable {
   }
 }
 
-// about:preferences#payments
-.paymentsContainer {
-  // General properties on about:preferences#payments.
-  // Make sure any change here could cause unexpected regressions.
-  a {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  th {
-    color: @darkGray;
-    font-weight: 600;
-  }
-
-  & > table,
-  & > table tbody {
-    border: none;
-    padding: 50px;
-    margin: 0 auto;
-    width: 80%;
-  }
-}
-
 #searchSelectIcon {
   width: 16px;
   height: 16px;