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
brave · Aug 2, 2017 · 212f7cb · 212f7cb
1 parent a562475
commit 212f7cb
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 210 deletions.
diff --git 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
@@ -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
@@ -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'
   }
 })