diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
new file mode 100644
index 00000000000..6e96fabbb1e
--- /dev/null
+++ b/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
+}
diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js
index ed3dbdecc33..20c076af327 100644
--- a/app/renderer/components/dropdown.js
+++ b/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,7 +52,7 @@ const styles = StyleSheet.create({
     '-webkit-appearance': 'none',
     width: 'auto'
   },
-  'outlineable': {
+  outlineable: {
     ':focus': {
       outlineColor: globalStyles.color.statsBlue,
       outlineOffset: '-4px',
@@ -59,7 +60,10 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
-  'settings': {
+  commonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  },
+  settings: {
     width: '280px'
   }
 })
diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
index f65c56c1cef..6b5c832a420 100644
--- a/app/renderer/components/importBrowserDataPanel.js
+++ b/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
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 9c663ca367e..c244667ef38 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/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
   },
 
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index be14a2c3996..c4313a1e2f8 100644
--- a/app/renderer/components/styles/global.js
+++ b/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',
diff --git a/less/forms.less b/less/forms.less
index 294a25d18f8..288a1e7e96e 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -95,7 +95,6 @@ select {
   .commonForm {
     .flyoutDialog;
     background-color: #f7f7f7;
-    border-radius: @borderRadius;
     max-width: 422px;
     padding: 0;
     text-align: left;
@@ -115,6 +114,7 @@ select {
 
     .formSection {
       padding: 16px 30px;
+
       &.commonFormTitle {
         color: #ff5000;
         font-size: 1.2em;
@@ -134,56 +134,6 @@ select {
   }
 }
 
-// TODO: Make this use commonDialog
-.importBrowserDataPanel {
-  .importBrowserData {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    border-radius: @borderRadius;
-    max-width: 422px;
-    padding: 0;
-    text-align: left;
-    width: 614px;
-    -webkit-user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-y: auto;
-    max-height: 100%;
-
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
-      }
-    }
-
-    .formSection {
-      padding: 16px 30px;
-      &.importBrowserDataWarning {
-        background-color: #dddee0;
-      }
-
-      &.importBrowserDataTitle {
-        color: #ff5000;
-        font-size: 1.2em;
-      }
-
-      &.importBrowserDataOptions {
-        padding: 0 30px;
-      }
-
-      &.importBrowserSubDataOptions {
-        padding: 0 0 0 20px;
-      }
-
-      &.importBrowserDataButtons {
-        text-align: right;
-        padding: 16px 10px;
-      }
-    }
-  }
-}
-
 // TODO: Make this use commonDialog
 .manageAutofillDataPanel {
   .manageAutofillData {