From 212f7cba5a0bd2744180f49739485a9359aa6a21 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Wed, 2 Aug 2017 02:48:47 +0900
Subject: [PATCH] Restructure paymentsTab with grid property

Closes #10236

Replace display:table with display:grid to align elements

Also:
- Update enabledContent.js to BEM style (Closes #10146)
- Add PanelDropdown
- Remove paymentStyles from payment for now (until conversion is done)

Test Plan:
1. Open `about:preferences#payments`
2. Enable payments
3. Make sure the elements are aligned equally on both rows and columns
4. Disable payments
5. Make sure the switch is placed on the same place
---
 app/renderer/components/common/dropdown.js    |  17 ++
 .../preferences/payment/disabledContent.js    |   5 +-
 .../preferences/payment/enabledContent.js     | 227 +++++++++---------
 .../preferences/payment/ledgerTable.js        |  41 ++--
 .../components/preferences/paymentsTab.js     | 142 ++++++-----
 app/renderer/components/styles/global.js      |   7 +
 app/renderer/components/styles/payment.js     |  11 -
 7 files changed, 240 insertions(+), 210 deletions(-)

diff --git a/app/renderer/components/common/dropdown.js b/app/renderer/components/common/dropdown.js
index 0db6fc0a8a1..befb90a7170 100644
--- a/app/renderer/components/common/dropdown.js
+++ b/app/renderer/components/common/dropdown.js
@@ -17,6 +17,7 @@ class Dropdown extends ImmutableComponent {
       styles.dropdown,
       this.props['data-isCommonForm'] && styles.commonForm,
       this.props['data-isSettings'] && styles.settings,
+      this.props['data-isPanel'] && styles.settings_panel,
       this.props['data-isBraveryPanel'] && styles.braveryPanel
     )
 
@@ -38,6 +39,12 @@ class SettingDropdown extends ImmutableComponent {
   }
 }
 
+class PanelDropdown extends ImmutableComponent {
+  render () {
+    return <FormDropdown data-isPanel='true' {...this.props} />
+  }
+}
+
 class BraveryPanelDropdown extends ImmutableComponent {
   render () {
     return <FormDropdown data-isBraveryPanel {...this.props} />
@@ -59,6 +66,7 @@ const styles = StyleSheet.create({
     '-webkit-appearance': 'none',
     width: 'auto'
   },
+
   outlineable: {
     ':focus': {
       outlineColor: globalStyles.color.statsBlue,
@@ -67,13 +75,21 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+
   commonForm: {
     backgroundColor: '#fff',
     fontSize: globalStyles.fontSize.flyoutDialog
   },
+
   settings: {
     width: '280px'
   },
+
+  settings_panel: {
+    // ref: browserButton_panelItem
+    width: '180px'
+  },
+
   braveryPanel: {
     fontSize: '13px',
     width: '100%'
@@ -84,5 +100,6 @@ module.exports = {
   Dropdown,
   FormDropdown,
   SettingDropdown,
+  PanelDropdown,
   BraveryPanelDropdown
 }
diff --git a/app/renderer/components/preferences/payment/disabledContent.js b/app/renderer/components/preferences/payment/disabledContent.js
index d4c474e62f3..ffc137ff55f 100644
--- a/app/renderer/components/preferences/payment/disabledContent.js
+++ b/app/renderer/components/preferences/payment/disabledContent.js
@@ -10,7 +10,6 @@ const ImmutableComponent = require('../../immutableComponent')
 
 // style
 const globalStyles = require('../../styles/global')
-const {paymentStyles} = require('../../styles/payment')
 const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
 const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
 const BitGo = require('../../../../extensions/brave/img/bitgo.png')
@@ -59,7 +58,7 @@ const styles = StyleSheet.create({
     backgroundColor: globalStyles.color.lightGray,
     borderRadius: globalStyles.radius.borderRadiusUIbox,
     padding: '40px',
-    fontSize: paymentStyles.font.regular,
+    fontSize: globalStyles.payments.fontSize.regular,
     lineHeight: '1.8em',
     color: globalStyles.color.mediumGray,
     width: '500px'
@@ -70,7 +69,7 @@ const styles = StyleSheet.create({
   },
 
   textSide: {
-    fontSize: paymentStyles.font.regular,
+    fontSize: globalStyles.payments.fontSize.regular,
     margin: '50px 0 20px 12px'
   },
 
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 9f92682cb1d..1c61236361c 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const moment = require('moment')
 
 // util
@@ -15,13 +15,12 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 const ImmutableComponent = require('../../immutableComponent')
 const BrowserButton = require('../../common/browserButton')
 const {FormTextbox} = require('../../common/textbox')
-const {FormDropdown} = require('../../common/dropdown')
-const {SettingsList, SettingItem} = require('../../common/settings')
+const {PanelDropdown} = require('../../common/dropdown')
 const LedgerTable = require('./ledgerTable')
 
 // style
 const globalStyles = require('../../styles/global')
-const {paymentStyles, paymentStylesVariables} = require('../../styles/payment')
+const {paymentStylesVariables} = require('../../styles/payment')
 const cx = require('../../../../../js/lib/classSet')
 
 // other
@@ -84,11 +83,11 @@ class EnabledContent extends ImmutableComponent {
 
     return <section className={css(styles.balance)}>
       <FormTextbox data-test-id='fundsAmount' readOnly value={btcToCurrencyString(value, ledgerData)} />
-      <a className={css(styles.iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
+      <a className={css(styles.balance__iconLink)} href='https://brave.com/Payments_FAQ.html' target='_blank'>
         <span className={cx({
           fa: true,
           'fa-question-circle': true,
-          [css(styles.iconText)]: true
+          [css(styles.balance__iconLink__iconText)]: true
         })} />
       </a>
     </section>
@@ -116,7 +115,7 @@ class EnabledContent extends ImmutableComponent {
       date: prevReconcileDateValue
     }
 
-    return <section className={css(styles.contribution, styles.lastContribution)}>
+    return <section>
       <div data-l10n-id='lastContribution' />
       <div data-l10n-id={text} data-l10n-args={JSON.stringify(l10nDataArgs)} />
     </section>
@@ -157,7 +156,7 @@ class EnabledContent extends ImmutableComponent {
       reconcileDate: nextReconcileDateRelative
     }
 
-    return <section className={css(styles.contribution, styles.nextContribution)}>
+    return <section>
       <div data-l10n-id='nextContribution' />
       <div data-l10n-args={JSON.stringify(l10nDataArgs)} data-l10n-id={l10nDataId} />
     </section>
@@ -169,65 +168,46 @@ class EnabledContent extends ImmutableComponent {
 
     return <section>
       <div className={css(styles.walletBar)} data-test-id='walletBar'>
-        <table>
-          <thead>
-            <tr className={css(styles.tableTr)}>
-              <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>
-            <tr className={css(styles.tableTr)}>
-              <td className={css(styles.tableTd)}>
-                <SettingsList className={css(styles.listContainer)}>
-                  <SettingItem>
-                    <FormDropdown
-                      data-test-id='fundsSelectBox'
-                      value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
-                      onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
-                      {
-                        [5, 10, 15, 20].map((amount) =>
-                          <option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
-                        )
-                      }
-                    </FormDropdown>
-                  </SettingItem>
-                  <SettingItem>
-                    {this.lastReconcileMessage()}
-                  </SettingItem>
-                </SettingsList>
-              </td>
-              <td className={css(styles.tableTd)}>
-                {
-                  ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
-                    ? <div>
-                      <div data-l10n-id='accountBalanceConnectionError' />
-                      <div className={css(styles.accountBalanceError)} data-l10n-id={this.ledgerDataErrorText()} />
-                    </div>
-                    : <div>
-                      <SettingsList className={css(styles.listContainer)}>
-                        <SettingItem>
-                          {this.fundsAmount()}
-                        </SettingItem>
-                        <SettingItem>
-                          {this.nextReconcileMessage()}
-                        </SettingItem>
-                      </SettingsList>
-                    </div>
-                }
-              </td>
-              <td className={css(styles.tableTd)}>
-                {this.walletButton()}
-                <div className={css(styles.walletStatus)}
-                  data-test-id='walletStatus'
-                  data-l10n-id={walletStatusText.id}
-                  data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div className={css(gridStyles.row1col1, styles.walletBar__title)} data-l10n-id='monthlyBudget' />
+        <div className={css(gridStyles.row1col2, styles.walletBar__title)} data-l10n-id='accountBalance' />
+        <div className={css(gridStyles.row1col3)} />
+        <div className={css(gridStyles.row2col1)}>
+          <PanelDropdown
+            data-test-id='fundsSelectBox'
+            value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
+            onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
+            {
+              [5, 10, 15, 20].map((amount) =>
+                <option value={amount}>{amount} {ledgerData.get('currency') || 'USD'}</option>
+              )
+            }
+          </PanelDropdown>
+        </div>
+        <div className={css(gridStyles.row2col2)}>
+          {
+            ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+              ? <div data-l10n-id='accountBalanceConnectionError' />
+              : <div>{this.fundsAmount()}</div>
+          }
+        </div>
+        <div className={css(gridStyles.row2col3)}>
+          {this.walletButton()}
+        </div>
+        <div className={css(gridStyles.row3col1, styles.walletBar__message)}>
+          {this.lastReconcileMessage()}
+        </div>
+        <div className={css(gridStyles.row3col2, styles.walletBar__message)}>
+          {
+            ledgerData.get('error') && ledgerData.get('error').get('caller') === 'getWalletProperties'
+              ? <div data-l10n-id={this.ledgerDataErrorText()} />
+              : <div>{this.nextReconcileMessage()}</div>
+          }
+        </div>
+        <div className={css(gridStyles.row3col3, styles.walletBar__message)}
+          data-test-id='walletStatus'
+          data-l10n-id={walletStatusText.id}
+          data-l10n-args={walletStatusText.args ? JSON.stringify(walletStatusText.args) : null}
+        />
       </div>
       <LedgerTable ledgerData={this.props.ledgerData}
         settings={this.props.settings}
@@ -237,85 +217,94 @@ class EnabledContent extends ImmutableComponent {
   }
 }
 
-const styles = StyleSheet.create({
-  walletBar: {
-    background: globalStyles.color.lightGray,
-    borderRadius: globalStyles.radius.borderRadiusUIbox,
-    padding: globalStyles.spacing.panelPadding,
-    margin: `${globalStyles.spacing.panelMargin} 0`
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
   },
 
-  listContainer: {
-    marginBottom: 0
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
   },
 
-  walletBar__tableTr__tableTh: {
-    color: paymentStylesVariables.tableHeader.fontColor,
-    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
-    textAlign: 'left'
+  row1col3: {
+    gridRow: 1,
+    gridColumn: 3
   },
 
-  tableTr: {
-    height: '1em'
+  row2col1: {
+    gridRow: 2,
+    gridColumn: 1
   },
 
-  tableTd: {
-    fontSize: paymentStyles.font.regular,
-    padding: '10px 30px 0 0',
-    width: 'auto',
-    minWidth: paymentStyles.width.tableRow,
-    verticalAlign: 'top'
+  row2col2: {
+    gridRow: 2,
+    gridColumn: 2
   },
 
-  accountBalanceError: {
-    marginTop: globalStyles.spacing.panelItemMargin
+  row2col3: {
+    gridRow: 2,
+    gridColumn: 3
   },
 
-  settingsListContainer: {
-    marginBottom: 0
+  row3col1: {
+    gridRow: 3,
+    gridColumn: 1
   },
 
-  balance: {
-    display: 'flex',
-    alignItems: 'center',
-    verticalAlign: 0,
-    height: '100%',
-    marginBottom: 0
+  row3col2: {
+    gridRow: 3,
+    gridColumn: 2
   },
 
-  iconLink: {
-    textDecoration: 'none',
+  row3col3: {
+    gridRow: 3,
+    gridColumn: 3
+  }
+})
 
-    ':hover': {
-      textDecoration: 'none'
-    }
+const styles = StyleSheet.create({
+  walletBar: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    background: globalStyles.color.lightGray,
+    borderRadius: globalStyles.radius.borderRadiusUIbox,
+    padding: globalStyles.spacing.panelPadding,
+    margin: `${globalStyles.spacing.panelMargin} 0`
   },
 
-  iconText: {
-    color: globalStyles.color.mediumGray,
-    margin: '0 0 0 5px',
-
-    // TODO: refactor preferences.less to remove !important
-    fontSize: `${globalStyles.fontSize.settingItemSubtext} !important`
+  walletBar__title: {
+    color: paymentStylesVariables.tableHeader.fontColor,
+    fontWeight: paymentStylesVariables.tableHeader.fontWeight,
+    marginBottom: `calc(${globalStyles.spacing.panelPadding} / 1.5)`
   },
 
-  contribution: {
-    lineHeight: 1.5
+  walletBar__message: {
+    fontSize: globalStyles.payments.fontSize.regular,
+    lineHeight: 1.5,
+    marginTop: globalStyles.spacing.panelPadding
   },
 
-  lastContribution: {
-    marginTop: '16px',
-    marginBottom: 0
+  balance: {
+    display: 'flex',
+    alignItems: 'center'
   },
 
-  nextContribution: {
-    marginTop: '15px',
-    marginBottom: 0
+  balance__iconLink: {
+    textDecoration: 'none',
+
+    ':hover': {
+      textDecoration: 'none'
+    }
   },
 
-  walletStatus: {
-    marginTop: '15px',
-    lineHeight: 1.5
+  balance__iconLink__iconText: {
+    // TODO: refactor preferences.less to remove !important
+    fontSize: `${globalStyles.payments.fontSize.regular} !important`,
+    color: `${globalStyles.color.mediumGray} !important`,
+    margin: '0 0 0 5px !important',
+    paddingRight: '0 !important'
   }
 })
 
diff --git a/app/renderer/components/preferences/payment/ledgerTable.js b/app/renderer/components/preferences/payment/ledgerTable.js
index 58076e93c6b..f9dbc102e2b 100644
--- a/app/renderer/components/preferences/payment/ledgerTable.js
+++ b/app/renderer/components/preferences/payment/ledgerTable.js
@@ -262,8 +262,9 @@ class LedgerTable extends ImmutableComponent {
 
     return <section data-test-id='ledgerTable'>
       <div className={css(styles.hideExcludedSites)}>
-        <div className={css(styles.columnOffset)} />
-        <div className={css(styles.rightColumn)}>
+        <div className={css(gridStyles.row1col1)} />
+        <div className={css(gridStyles.row1col2)} />
+        <div className={css(gridStyles.row1col3)}>
           <SettingCheckbox small
             dataL10nId='hideExcluded'
             prefKey={settings.HIDE_EXCLUDED_SITES}
@@ -325,6 +326,23 @@ const verifiedBadge = (icon) => ({
   background: `url(${icon}) center no-repeat`
 })
 
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
+  },
+
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
+  },
+
+  row1col3: {
+    gridRow: 1,
+    gridColumn: 3
+  }
+})
+
 const styles = StyleSheet.create({
   verified: verifiedBadge(verifiedGreenIcon),
   disabled: verifiedBadge(verifiedWhiteIcon),
@@ -405,22 +423,11 @@ const styles = StyleSheet.create({
   },
 
   hideExcludedSites: {
-    display: 'flex',
-    flex: 1,
+    display: 'grid',
     alignItems: 'center',
-    height: '35px'
-  },
-
-  columnOffset: {
-    display: 'flex',
-    flexGrow: 8,
-    flexShrink: 8
-  },
-
-  rightColumn: {
-    display: 'flex',
-    flexGrow: 1,
-    flexShrink: 1
+    gridTemplateColumns: '1fr 1fr 1fr',
+    width: `calc(100% - ${globalStyles.spacing.panelPadding})`,
+    marginBottom: globalStyles.spacing.panelMargin
   },
 
   alignRight: {
diff --git a/app/renderer/components/preferences/paymentsTab.js b/app/renderer/components/preferences/paymentsTab.js
index a9909fd7733..2933f2867b4 100644
--- a/app/renderer/components/preferences/paymentsTab.js
+++ b/app/renderer/components/preferences/paymentsTab.js
@@ -29,7 +29,7 @@ const {LedgerRecoveryContent, LedgerRecoveryFooter} = require('./payment/ledgerR
 
 // style
 const globalStyles = require('../styles/global')
-const {paymentStyles, paymentStylesVariables} = require('../styles/payment')
+const {paymentStylesVariables} = require('../styles/payment')
 const settingsIcon = require('../../../extensions/brave/img/ledger/icon_settings.svg')
 const historyIcon = require('../../../extensions/brave/img/ledger/icon_history.svg')
 
@@ -183,20 +183,20 @@ class PaymentsTab extends ImmutableComponent {
       }
 
       <SectionTitleWrapper>
-        { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
-        <div className={cx({
-          [css(styles.titleWrapper)]: true,
-          [css(sectionTitleStyles.beta)]: true
-        })}>
-          <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
-          <SectionLabelTitle>beta</SectionLabelTitle>
-        </div>
-
-        <div className={css(
-          styles.flexAlignCenter,
-          styles.paymentsSwitches
-        )}>
-          <div className={css(styles.flexAlignEnd, styles.switchWrap)} data-test-id='enablePaymentsSwitch'>
+        <div className={css(styles.titleWrapper)}>
+          { /* Note: This div cannot be replaced with SectionTitleLabelWrapper */ }
+          <div className={css(
+            gridStyles.row1col1,
+            styles.titleWrapper__title,
+            sectionTitleStyles.beta
+          )}>
+            <AboutPageSectionTitle>Brave Payments</AboutPageSectionTitle>
+            <SectionLabelTitle>beta</SectionLabelTitle>
+          </div>
+          <div data-test-id='enablePaymentsSwitch' className={css(
+            gridStyles.row1col2,
+            styles.titleWrapper__switchWrap
+          )}>
             <span className={css(styles.switchWrap__switchSpan)} data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on'
               prefKey={settings.PAYMENTS_ENABLED}
@@ -216,49 +216,48 @@ class PaymentsTab extends ImmutableComponent {
               data-l10n-id='paymentsFAQLink'
             />
           </div>
-          {
-            this.enabled
-            ? <div className={css(
-                styles.flexAlignCenter,
-                styles.switchWrap,
-                styles.switchWrap__right
-              )}>
-              <div className={css(styles.switchWrap__autoSuggestSwitch)}>
-                <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
-                  <SettingCheckbox dataL10nId='autoSuggestSites'
-                    prefKey={settings.AUTO_SUGGEST_SITES}
-                    settings={this.props.settings}
-                    disabled={!enabled}
-                    onChangeSetting={this.props.onChangeSetting}
-                    switchClassName={css(styles.switchWrap__switchControl)}
-                  />
+          <div className={css(gridStyles.row1col3)}>
+            {
+              this.enabled
+              ? <div className={css(
+                  styles.switchWrap,
+                  styles.switchWrap__right
+                )}>
+                <div className={css(styles.switchWrap__autoSuggestSwitch)}>
+                  <div className={css(styles.flexAlignCenter, styles.autoSuggestSwitch__subtext)}>
+                    <SettingCheckbox dataL10nId='autoSuggestSites'
+                      prefKey={settings.AUTO_SUGGEST_SITES}
+                      settings={this.props.settings}
+                      disabled={!enabled}
+                      onChangeSetting={this.props.onChangeSetting}
+                      switchClassName={css(styles.switchWrap__switchControl)}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className={css(styles.switchWrap__mainIconsRight)}>
-                <a
-                  data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
-                  data-l10n-id='paymentHistoryIcon'
-                  className={css(
+                <div className={css(styles.switchWrap__mainIconsRight)}>
+                  <a className={css(
                     styles.switchWrap__mainIcons,
                     styles.mainIcons__historyIcon,
                     !this.hasWalletTransaction && styles.mainIcons__historyDisabled
                   )}
-                  onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
-                />
-                <a
-                  data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
-                  data-l10n-id='advancedSettingsIcon'
-                  className={css(
+                    data-test-id={this.hasWalletTransaction ? 'paymentHistoryButton' : 'disabledPaymentHistoryButton'}
+                    data-l10n-id='paymentHistoryIcon'
+                    onClick={(enabled && this.hasWalletTransaction) ? this.props.showOverlay.bind(this, 'paymentHistory') : () => {}}
+                  />
+                  <a className={css(
                     styles.switchWrap__mainIcons,
                     styles.mainIcons__settingsIcon,
                     !enabled && styles.mainIcons__settingsIconDisabled
                   )}
-                  onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
-                />
+                    data-test-id={!enabled ? 'advancedSettingsButtonLoading' : 'advancedSettingsButton'}
+                    data-l10n-id='advancedSettingsIcon'
+                    onClick={enabled ? this.props.showOverlay.bind(this, 'advancedSettings') : () => {}}
+                  />
+                </div>
               </div>
-            </div>
-            : null
-          }
+              : null
+            }
+          </div>
         </div>
       </SectionTitleWrapper>
       {
@@ -275,6 +274,23 @@ class PaymentsTab extends ImmutableComponent {
   }
 }
 
+const gridStyles = StyleSheet.create({
+  row1col1: {
+    gridRow: 1,
+    gridColumn: 1
+  },
+
+  row1col2: {
+    gridRow: 1,
+    gridColumn: 2
+  },
+
+  row1col3: {
+    gridRow: 1,
+    gridColumn: 3
+  }
+})
+
 const styles = StyleSheet.create({
   flexAlignCenter: {
     display: 'flex',
@@ -291,22 +307,26 @@ const styles = StyleSheet.create({
     width: '805px',
     paddingBottom: '40px' // cf: padding of .prefTabContainer
   },
-  paymentsSwitches: {
-    display: 'flex',
-    position: 'relative',
-    bottom: '2px',
-    minHeight: '29px'
-  },
 
   titleWrapper: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    alignItems: 'center',
+    width: '100%',
+    padding: `0 ${globalStyles.spacing.panelPadding}`
+  },
+
+  titleWrapper__title: {
     position: 'relative',
-    marginRight: '49px',
-    minWidth: '240px'
+    right: globalStyles.spacing.panelPadding
   },
 
-  switchWrap: {
-    width: paymentStyles.width.tableCell
+  titleWrapper__switchWrap: {
+    display: 'flex',
+    alignItems: 'flex-end',
+    width: '100%'
   },
+
   switchWrap__switchControl: {
     // TODO: Refactor switchControls.less
     paddingTop: '0 !important',
@@ -321,8 +341,10 @@ const styles = StyleSheet.create({
     color: globalStyles.color.braveOrange
   },
   switchWrap__right: {
+    display: 'flex',
+    alignItems: 'center',
     justifyContent: 'space-between',
-    position: 'relative'
+    width: `calc(100% + ${globalStyles.spacing.panelPadding})`
   },
 
   // Auto suggest switch
@@ -343,6 +365,7 @@ const styles = StyleSheet.create({
     top: '-1px',
     left: '8px',
     cursor: 'pointer',
+    fontSize: globalStyles.payments.fontSize.regular,
 
     // TODO: refactor preferences.less to remove !important
     ':hover': {
@@ -353,7 +376,6 @@ const styles = StyleSheet.create({
   // History and settings icons
   switchWrap__mainIconsRight: {
     position: 'relative',
-    right: '12px',
     top: '3.5px'
   },
   switchWrap__mainIcons: {
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index d6341161e71..5ece8ae7b5e 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -327,6 +327,13 @@ const globalStyles = {
         background: '#ccc'
       }
     }
+  },
+
+  // TODO (Suguru): move them to payment.js after style refactoring is done
+  payments: {
+    fontSize: {
+      regular: '14.5px'
+    }
   }
 }
 
diff --git a/app/renderer/components/styles/payment.js b/app/renderer/components/styles/payment.js
index 211d53bb54a..6f39d0112f1 100644
--- a/app/renderer/components/styles/payment.js
+++ b/app/renderer/components/styles/payment.js
@@ -4,16 +4,6 @@
 
 const globalStyles = require('./global')
 
-const paymentStyles = {
-  font: {
-    regular: '14.5px'
-  },
-  width: {
-    tableRow: '235px',
-    tableCell: '265px' // width.tableRow + 30px
-  }
-}
-
 const paymentStylesVariables = {
   spacing: {
     paymentHistoryTablePadding: '30px'
@@ -26,6 +16,5 @@ const paymentStylesVariables = {
 }
 
 module.exports = {
-  paymentStyles,
   paymentStylesVariables
 }