Create commonForm.js and refactor importBrowserDataPanel.js

app/renderer/components/commonForm.js

@@ -0,0 +1,121 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('./styles/global')
+const commonStyles = require('./styles/commonStyles')
+
+const {FormDropdown} = require('./dropdown')
+
+class CommonForm extends ImmutableComponent {
+  render () {
+    return <div className={css(commonStyles.flyoutDialog, styles.CommonForm)} {...this.props} />
+  }
+}
+
+class CommonFormDropdown extends ImmutableComponent {
+  render () {
+    return <FormDropdown data-isCommonForm='true' {...this.props} />
+  }
+}
+
+class CommonFormClickable extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormClickable)} {...this.props} />
+  }
+}
+
+class CommonFormSection extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormSection)} {...this.props} />
+  }
+}
+
+class CommonFormTitle extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormSection, styles.CommonFormTitle)} {...this.props} />
+  }
+}
+
+class CommonFormSubSection extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormSection, styles.CommonFormSubSection)} {...this.props} />
+  }
+}
+
+class CommonFormButtonWrapper extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormSection, styles.flexJustifyEnd)} {...this.props} />
+  }
+}
+
+class CommonFormBottomWrapper extends ImmutableComponent {
+  render () {
+    return <div className={css(styles.CommonFormSection, styles.CommonFormBottomWrapper)} {...this.props} />
+  }
+}
+
+const styles = StyleSheet.create({
+  flexJustifyEnd: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+
+  CommonForm: {
+    background: globalStyles.color.commonFormBackgroundColor,
+    color: '#3b3b3b',
+    padding: 0,
+    top: '40px',
+    cursor: 'default',
+    maxWidth: '422px',
+    WebkitUserSelect: 'none'
+
+    // Need a general solution
+    // See: #7930
+    // overflowY: 'auto',
+    // maxHeight: '100%'
+  },
+
+  CommonFormClickable: {
+    color: '#5b5b5b',
+
+    ':hover': {
+      color: '#000'
+    }
+  },
+
+  CommonFormTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.2em'
+  },
+
+  CommonFormSection: {
+    // PR #7985
+    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
+  },
+
+  CommonFormSubSection: {
+    margin: `0 0 0 ${globalStyles.spacing.dialogInsideMargin}`
+  },
+
+  CommonFormBottomWrapper: {
+    margin: 0,
+    padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
+    background: globalStyles.color.commonFormBottomWrapperBackground
+  }
+})
+
+module.exports = {
+  CommonForm,
+  CommonFormDropdown,
+  CommonFormClickable,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormSubSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
+}

app/renderer/components/dropdown.js

@@ -4,7 +4,7 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
@@ -15,6 +15,7 @@ class Dropdown extends ImmutableComponent {
     const className = css(
       this.props['data-isFormControl'] && commonStyles.formControl,
       styles.dropdown,
+      this.props['data-isCommonForm'] && styles.commonForm,
       this.props['data-isSettings'] && styles.settings
     )
 
@@ -39,7 +40,7 @@ class SettingDropdown extends ImmutableComponent {
 const selectPadding = '0.4em'
 
 const styles = StyleSheet.create({
-  'dropdown': {
+  dropdown: {
     background: `url(${caretDownGrey}) calc(100% - ${selectPadding}) 50% / contain no-repeat`,
     backgroundColor: '#fbfbfb',
     backgroundSize: '12px 12px',
@@ -51,15 +52,18 @@ const styles = StyleSheet.create({
     '-webkit-appearance': 'none',
     width: 'auto'
   },
-  'outlineable': {
+  outlineable: {
     ':focus': {
       outlineColor: globalStyles.color.statsBlue,
       outlineOffset: '-4px',
       outlineStyle: 'solid',
       outlineWidth: '1px'
     }
   },
-  'settings': {
+  commonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  },
+  settings: {
     width: '280px'
   }
 })

app/renderer/components/importBrowserDataPanel.js

@@ -10,6 +10,19 @@ const SwitchControl = require('../../../js/components/switchControl')
 const windowActions = require('../../../js/actions/windowActions')
 const appActions = require('../../../js/actions/appActions')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('./styles/global')
+
+const {
+  CommonForm,
+  CommonFormDropdown,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormSubSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
+} = require('./commonForm')
+
 class ImportBrowserDataPanel extends ImmutableComponent {
   constructor () {
     super()
@@ -111,39 +124,66 @@ class ImportBrowserDataPanel extends ImmutableComponent {
         browsers.push(<option value={browser.index}>{browser.name}</option>)
       })
     }
-    return <Dialog onHide={this.props.onHide} className='importBrowserDataPanel' isClickDismiss>
-      <div className='importBrowserData' onClick={(e) => e.stopPropagation()}>
-        <div className='formSection importBrowserDataTitle' data-l10n-id='importBrowserData' />
-        <div className='formSection importBrowserDataOptions'>
-          <select value={this.selectedBrowser}
-            onChange={this.onChange} >
-            {browsers}
-          </select>
-          <SwitchControl rightl10nId='browserHistory' checkedOn={this.props.importBrowserDataSelected.get('history')}
-            onClick={this.onToggleHistory} disabled={!this.supportHistory} />
-          <SwitchControl rightl10nId='favoritesOrBookmarks' checkedOn={this.props.importBrowserDataSelected.get('favorites')}
-            onClick={this.onToggleFavorites} disabled={!this.supportFavorites} />
-          <div className='formSection importBrowserSubDataOptions'>
-            <SwitchControl rightl10nId='mergeIntoBookmarksToolbar'
-              checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
-              onClick={this.onToggleMergeFavorites} disabled={!this.props.importBrowserDataSelected.get('favorites')} />
+    return <Dialog onHide={this.props.onHide} data-test-id='importBrowserDataPanel' isClickDismiss>
+      <CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle
+          data-test-id='importBrowserDataTitle'
+          data-l10n-id='importBrowserData'
+        />
+        <CommonFormSection data-test-id='importBrowserDataOptions'>
+          <div className={css(styles.dropdownWrapper)}>
+            <CommonFormDropdown
+              value={this.selectedBrowser}
+              onChange={this.onChange} >
+              {browsers}
+            </CommonFormDropdown>
           </div>
-          <SwitchControl rightl10nId='cookies' checkedOn={this.props.importBrowserDataSelected.get('cookies')}
-            onClick={this.onToggleCookies} disabled={!this.supportCookies} />
-        </div>
-        <div className='formSection'>
+          <SwitchControl
+            rightl10nId='browserHistory'
+            checkedOn={this.props.importBrowserDataSelected.get('history')}
+            onClick={this.onToggleHistory}
+            disabled={!this.supportHistory}
+          />
+          <SwitchControl
+            rightl10nId='favoritesOrBookmarks'
+            checkedOn={this.props.importBrowserDataSelected.get('favorites')}
+            onClick={this.onToggleFavorites}
+            disabled={!this.supportFavorites}
+          />
+          <CommonFormSubSection data-test-id='importBrowserSubDataOptions'>
+            <SwitchControl
+              rightl10nId='mergeIntoBookmarksToolbar'
+              checkedOn={this.props.importBrowserDataSelected.get('mergeFavorites')}
+              onClick={this.onToggleMergeFavorites}
+              disabled={!this.props.importBrowserDataSelected.get('favorites')}
+            />
+          </CommonFormSubSection>
+          <SwitchControl
+            rightl10nId='cookies'
+            checkedOn={this.props.importBrowserDataSelected.get('cookies')}
+            onClick={this.onToggleCookies}
+            disabled={!this.supportCookies}
+          />
+        </CommonFormSection>
+        <CommonFormSection>
           <div data-l10n-id='importDataCloseBrowserWarning' />
-        </div>
-        <div className='formSection importBrowserDataButtons'>
+        </CommonFormSection>
+        <CommonFormButtonWrapper data-test-id='importBrowserDataButtons'>
           <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
           <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
-        </div>
-        <div className='formSection importBrowserDataWarning'>
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper data-test-id='importBrowserDataWarning'>
           <div data-l10n-id='importDataWarning' />
-        </div>
-      </div>
+        </CommonFormBottomWrapper>
+      </CommonForm>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  dropdownWrapper: {
+    marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  }
+})
+
 module.exports = ImportBrowserDataPanel

app/renderer/components/styles/commonStyles.js

@@ -7,7 +7,7 @@ const globalStyles = require('./global')
 
 const styles = StyleSheet.create({
   formControl: {
-    background: 'white',
+    background: '#fff',
     border: `solid 1px ${globalStyles.color.black20}`,
     borderRadius: globalStyles.radius.borderRadius,
     boxShadow: `inset 0 1px 1px ${globalStyles.color.black10}`,
@@ -21,14 +21,13 @@ const styles = StyleSheet.create({
     width: '100%'
   },
   flyoutDialog: {
-    backgroundColor: globalStyles.color.toolbarBackground,
+    background: globalStyles.color.toolbarBackground,
     borderRadius: globalStyles.radius.borderRadius,
     boxShadow: '2px 2px 8px #3b3b3b',
     color: '#000',
     fontSize: '13px',
     padding: '10px 30px',
     position: 'absolute',
-    textAlign: 'left',
     top: globalStyles.spacing.dialogTopOffset
   },
 

app/renderer/components/styles/global.js

@@ -26,12 +26,14 @@ const globalStyles = {
     chromeSecondary: '#d3d3d3',
     chromeTertiary: '#c7c7c7',
     chromeText: '#555555',
-    tabsBackground: '#ddd',
-    tabsBackgroundInactive: '#ddd',
-    tabsToolbarBorderColor: '#bbb',
     navigationBarBackground: 'white',
     chromeControlsBackground: '#bbb',
     chromeControlsBackground2: 'white',
+    tabsToolbarBorderColor: '#bbb',
+    tabsBackground: '#ddd',
+    tabsBackgroundInactive: '#ddd',
+    commonFormBottomWrapperBackground: '#ddd',
+    commonFormBackgroundColor: '#f7f7f7',
     toolbarBackground: '#eee',
     toolbarBorderColor: '#ccc',
     menuSelectionColor: '#2F7AFB',
@@ -121,6 +123,7 @@ const globalStyles = {
     closeIconSize: '13px',
     narrowIconSize: '12px',
     dialogTopOffset: '30px',
+    dialogInsideMargin: '18px',
     paymentsMargin: '20px',
     modalPanelHeaderMarginBottom: '.5em',
     paddingHorizontal: '30px'
@@ -169,7 +172,8 @@ const globalStyles = {
   fontSize: {
     tabIcon: '14px',
     tabTitle: '12px',
-    settingItemSubtext: '.95rem'
+    settingItemSubtext: '.95rem',
+    flyoutDialog: '13px'
   },
   appIcons: {
     clipboard: 'fa fa-clipboard',