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)
- Add Panel Dropdown to styles.js (Closes #10245)

Auditors: @cezaraugusto

Test Plan 1:
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

Test Plan 2:
1. Open about:styles#dropdowns
2. Make sure PanelDropdown appears there

app/renderer/components/common/browserButton.js

@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
   },
 
   browserButton_panelItem: {
-    minWidth: '180px'
+    minWidth: globalStyles.button.panel.width
   },
 
   browserButton_iconOnly: {

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 {...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,20 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+
   commonForm: {
     backgroundColor: '#fff',
     fontSize: globalStyles.fontSize.flyoutDialog
   },
+
   settings: {
     width: '280px'
   },
+
+  settings_panel: {
+    width: globalStyles.button.panel.width
+  },
+
   braveryPanel: {
     fontSize: '13px',
     width: '100%'
@@ -84,5 +99,6 @@ module.exports = {
   Dropdown,
   FormDropdown,
   SettingDropdown,
+  PanelDropdown,
   BraveryPanelDropdown
 }

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'
   },