From 0b6b746607805d892ae0ee6acc112e2556cd1b0f Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Thu, 17 May 2018 10:54:00 -0700
Subject: [PATCH] Revert Aphrodite changes that were breaking bookmark modals

Fixes https://github.com/brave/browser-laptop/issues/12498
Unfixes https://github.com/brave/browser-laptop/issues/10977

Auditors: @NejcZdovc, @cezaraugusto

Revert "Polish CommonForm"
This reverts commit c5186d5829e6aa5cd18ec3d6b125aaa4c9d810fe.

Revert "Add FlyoutDialog"
This reverts commit 32dca6fb276e0c4ef4773dba81e8fa596316c182.
---
 .../autofill/autofillAddressPanel.js          |  14 +-
 .../autofill/autofillCreditCardPanel.js       |  16 +-
 .../bookmarks/addEditBookmarkFolder.js        |  30 ++-
 .../bookmarks/addEditBookmarkFolderForm.js    |   5 +-
 .../bookmarks/addEditBookmarkForm.js          |   5 +-
 .../bookmarks/addEditBookmarkHanger.js        |  29 ++-
 app/renderer/components/common/commonForm.js  | 191 +++++++++++-------
 .../components/common/flyoutDialog.js         |  45 -----
 app/renderer/components/common/messageBox.js  |   7 +-
 app/renderer/components/main/braveryPanel.js  |  12 +-
 .../main/checkDefaultBrowserDialog.js         |  17 +-
 .../components/main/clearBrowsingDataPanel.js |  21 +-
 .../components/main/importBrowserDataPanel.js |  27 +--
 app/renderer/components/main/loginRequired.js |  22 +-
 app/renderer/components/main/releaseNotes.js  |  17 +-
 app/renderer/components/main/siteInfo.js      |  11 +-
 app/renderer/components/main/widevinePanel.js |  25 ++-
 .../components/styles/commonStyles.js         |  17 ++
 js/about/styles.js                            |  83 ++++----
 19 files changed, 332 insertions(+), 262 deletions(-)
 delete mode 100644 app/renderer/components/common/flyoutDialog.js

diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index 1e4d7422bd6..bac1b2c69fc 100644
--- a/app/renderer/components/autofill/autofillAddressPanel.js
+++ b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -11,9 +11,11 @@ const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const {
-  CommonForm,
+  CommonFormLarge,
   CommonFormSection,
+  CommonFormTitle,
   CommonFormDropdown,
+  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -158,8 +160,8 @@ class AutofillAddressPanel extends React.Component {
 
   render () {
     return <Dialog onHide={this.onHide} testId='autofillAddressPanel' isClickDismiss>
-      <CommonForm large onClick={this.onClick}>
-        <CommonFormSection title l10nId='editAddress' />
+      <CommonFormLarge onClick={this.onClick}>
+        <CommonFormTitle data-l10n-id='editAddress' />
         <CommonFormSection>
           <div className={css(commonFormStyles.sectionWrapper)}>
             <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__label)}>
@@ -271,7 +273,7 @@ class AutofillAddressPanel extends React.Component {
             </div>
           </div>
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelAddressButton'
@@ -283,8 +285,8 @@ class AutofillAddressPanel extends React.Component {
             testId='saveAddressButton'
             onClick={this.onSave}
           />
-        </CommonFormSection>
-      </CommonForm>
+        </CommonFormButtonWrapper>
+      </CommonFormLarge>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
index 390055ae68c..064ec72e443 100644
--- a/app/renderer/components/autofill/autofillCreditCardPanel.js
+++ b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -13,8 +13,10 @@ const Button = require('../common/button')
 const {
   CommonForm,
   CommonFormSection,
+  CommonFormTitle,
   CommonFormDropdown,
   CommonFormTextbox,
+  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -126,9 +128,9 @@ class AutofillCreditCardPanel extends React.Component {
   render () {
     return <Dialog onHide={this.onHide} testId='autofillCreditCardPanel' isClickDismiss>
       <CommonForm onClick={this.onClick}>
-        <CommonFormSection title
-          l10nId='editCreditCard'
-          testId='manageAutofillDataTitle'
+        <CommonFormTitle
+          data-test-id='manageAutofillDataTitle'
+          data-l10n-id='editCreditCard'
         />
         <CommonFormSection>
           <div className={css(commonFormStyles.sectionWrapper)}>
@@ -200,7 +202,7 @@ class AutofillCreditCardPanel extends React.Component {
             </div>
           </div>
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelCreditCardButton'
@@ -212,12 +214,14 @@ class AutofillCreditCardPanel extends React.Component {
             testId='saveCreditCardButton'
             onClick={this.onSave}
           />
-        </CommonFormSection>
+        </CommonFormButtonWrapper>
       </CommonForm>
     </Dialog>
   }
 }
 
+module.exports = ReduxComponent.connect(AutofillCreditCardPanel)
+
 const styles = StyleSheet.create({
   // Copied from textbox.js
   input: {
@@ -235,5 +239,3 @@ const styles = StyleSheet.create({
     marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
   }
 })
-
-module.exports = ReduxComponent.connect(AutofillCreditCardPanel)
diff --git a/app/renderer/components/bookmarks/addEditBookmarkFolder.js b/app/renderer/components/bookmarks/addEditBookmarkFolder.js
index 9eef561e312..2bed10a30f0 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkFolder.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkFolder.js
@@ -4,15 +4,13 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const AddEditBookmarkFolderForm = require('./addEditBookmarkFolderForm')
-const {
-  CommonFormHanger,
-  CommonFormSection
-} = require('../common/commonForm')
+const {CommonFormBookmarkHanger} = require('../common/commonForm')
 
 // State
 const bookmarkFoldersState = require('../../../common/state/bookmarkFoldersState')
@@ -25,6 +23,9 @@ const windowActions = require('../../../../js/actions/windowActions')
 const cx = require('../../../../js/lib/classSet')
 const bookmarkFoldersUtil = require('../../../common/lib/bookmarkFoldersUtil')
 
+// Styles
+const globalStyles = require('../styles/global')
+
 class AddEditBookmarkFolder extends React.Component {
   constructor (props) {
     super(props)
@@ -67,8 +68,11 @@ class AddEditBookmarkFolder extends React.Component {
     return <Dialog className={cx({
       bookmarkDialog: true
     })} onHide={this.onClose} isClickDismiss>
-      <CommonFormHanger bookmark onClick={this.onClick}>
-        <CommonFormSection title l10nId={this.props.heading} />
+      <CommonFormBookmarkHanger onClick={this.onClick}>
+        <div className={cx({
+          [css(styles.commonFormSection)]: true,
+          [css(styles.commonFormTitle)]: true
+        })} data-l10n-id={this.props.heading} />
         <AddEditBookmarkFolderForm
           folderName={this.props.folderName}
           editKey={this.props.editKey}
@@ -79,9 +83,21 @@ class AddEditBookmarkFolder extends React.Component {
           isDisabled={!this.props.isFolderNameValid}
           hasBookmarks={this.props.hasBookmarks}
         />
-      </CommonFormHanger>
+      </CommonFormBookmarkHanger>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  // Copied from commonForm.js
+  commonFormSection: {
+    // PR #7985
+    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
+  },
+  commonFormTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.2em'
+  }
+})
+
 module.exports = ReduxComponent.connect(AddEditBookmarkFolder)
diff --git a/app/renderer/components/bookmarks/addEditBookmarkFolderForm.js b/app/renderer/components/bookmarks/addEditBookmarkFolderForm.js
index 7b1d55a8d50..ab500a44b35 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkFolderForm.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkFolderForm.js
@@ -11,6 +11,7 @@ const BrowserButton = require('../common/browserButton')
 const {
   CommonFormSection,
   CommonFormDropdown,
+  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -192,7 +193,7 @@ class AddEditBookmarkFolderForm extends React.Component {
           </div>
         </div>
       </CommonFormSection>
-      <CommonFormSection buttons>
+      <CommonFormButtonWrapper>
         {
           this.props.editKey != null
             ? <BrowserButton groupedItem secondaryColor
@@ -212,7 +213,7 @@ class AddEditBookmarkFolderForm extends React.Component {
           disabled={this.state.isDisabled}
           onClick={this.onSave}
         />
-      </CommonFormSection>
+      </CommonFormButtonWrapper>
     </div>
   }
 }
diff --git a/app/renderer/components/bookmarks/addEditBookmarkForm.js b/app/renderer/components/bookmarks/addEditBookmarkForm.js
index ba4da7e1b97..c3115f2e6bb 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkForm.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkForm.js
@@ -12,6 +12,7 @@ const {
   CommonFormSection,
   CommonFormDropdown,
   CommonFormTextbox,
+  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -228,7 +229,7 @@ class AddEditBookmarkForm extends React.Component {
           </div>
         </div>
       </CommonFormSection>
-      <CommonFormSection buttons>
+      <CommonFormButtonWrapper>
         {
           this.props.editKey != null
             ? <BrowserButton groupedItem secondaryColor
@@ -248,7 +249,7 @@ class AddEditBookmarkForm extends React.Component {
           disabled={this.state.isDisabled}
           onClick={this.onSave}
         />
-      </CommonFormSection>
+      </CommonFormButtonWrapper>
     </div>
   }
 }
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index 645b40ee3c0..3a225f88993 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -11,8 +11,8 @@ const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const AddEditBookmarkForm = require('./addEditBookmarkForm')
 const {
-  CommonFormHanger,
-  CommonFormSection
+  CommonFormBookmarkHanger,
+  CommonFormBottomWrapper
 } = require('../common/commonForm')
 
 // States
@@ -108,8 +108,8 @@ class AddEditBookmarkHanger extends React.Component {
       bookmarkDialog: this.props.isModal,
       bookmarkHanger: !this.props.isModal,
       [css(styles.bookmarkHanger)]: !this.props.isModal
-    })} isClickDismiss>
-      <CommonFormHanger bookmark onClick={this.onClick}>
+    })} onHide={this.onClose} isClickDismiss>
+      <CommonFormBookmarkHanger onClick={this.onClick}>
         {
           !this.props.isModal
           ? <div className={cx({
@@ -118,7 +118,10 @@ class AddEditBookmarkHanger extends React.Component {
           })} />
           : null
         }
-        <CommonFormSection title l10nId={this.props.heading} />
+        <div className={cx({
+          [css(styles.commonFormSection)]: true,
+          [css(styles.commonFormTitle)]: true
+        })} data-l10n-id={this.props.heading} />
         <AddEditBookmarkForm
           title={this.props.title}
           editKey={this.props.editKey}
@@ -133,20 +136,30 @@ class AddEditBookmarkHanger extends React.Component {
         />
         {
           !this.props.isModal
-            ? <CommonFormSection bottom>
+            ? <CommonFormBottomWrapper>
               <div className={css(styles.bookmark__bottomWrapper, styles.bottomWrapper__cursor)}
                 data-test-id='viewBookmarks'
                 data-l10n-id='viewBookmarks'
                 onClick={this.onViewBookmarks} />
-            </CommonFormSection>
+            </CommonFormBottomWrapper>
             : null
         }
-      </CommonFormHanger>
+      </CommonFormBookmarkHanger>
     </Dialog>
   }
 }
 
 const styles = StyleSheet.create({
+  // Copied from commonForm.js
+  commonFormSection: {
+    // PR #7985
+    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
+  },
+  commonFormTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.2em'
+  },
+
   bookmarkHanger: {
     // See: #9040
     justifyContent: 'flex-start !important',
diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 8577908248b..3f1bb390383 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -7,8 +7,8 @@ const ImmutableComponent = require('../immutableComponent')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
-const FlyoutDialog = require('./flyoutDialog')
 const {FormDropdown} = require('./dropdown')
 const {FormTextbox} = require('./textbox')
 
@@ -16,30 +16,50 @@ const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
-    return <FlyoutDialog custom={[
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm
+    )} {...this.props} />
+  }
+}
+
+class CommonFormSmall extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormSmall
+    )} {...this.props} />
+  }
+}
+
+class CommonFormMedium extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormMedium
+    )} {...this.props} />
+  }
+}
+
+class CommonFormLarge extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
       styles.commonForm,
-      this.props.small && styles.commonForm_small,
-      this.props.medium && styles.commonForm_medium,
-      this.props.large && styles.commonForm_large,
-      this.props.custom
-    ]}
-      onClick={this.props.onClick}
-      testId={this.props.testId}
-    >
-      {this.props.children}
-    </FlyoutDialog>
+      styles.commonFormLarge
+    )} {...this.props} />
   }
 }
 
-class CommonFormHanger extends ImmutableComponent {
+class CommonFormBookmarkHanger extends ImmutableComponent {
   render () {
-    return <CommonForm custom={[
-      styles.commonForm_hanger,
-      this.props.bookmark && styles.commonForm_hanger_bookmark,
-      this.props.custom
-    ]}>
-      {this.props.children}
-    </CommonForm>
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormBookmarkHanger
+    )} {...this.props} />
   }
 }
 
@@ -55,39 +75,60 @@ class CommonFormTextbox extends ImmutableComponent {
   }
 }
 
+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.commonForm__section,
-      this.props.subSection && styles.commonForm__section_sub,
-      this.props.title && styles.commonForm__section_title,
-      this.props.buttons && styles.commonForm__section_buttons,
-      this.props.bottom && styles.commonForm__section_bottom,
-      this.props.custom
-    )}
-      data-l10n-id={this.props.l10nId}
-      data-test-id={this.props.testId}
-    >
-      {this.props.children}
-    </div>
+      styles.commonFormSection,
+      styles.commonFormTitle
+    )} {...this.props} />
   }
 }
 
-class CommonFormClickable extends ImmutableComponent {
+class CommonFormSubSection extends ImmutableComponent {
   render () {
     return <div className={css(
-      styles.commonForm__clickable,
-      this.props.custom
-    )}
-      data-l10n-id={this.props.l10nId}
-      onClick={this.props.onClick}
-    >
-      {this.props.children}
-    </div>
+      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.modalVeryLightGray,
     color: globalStyles.color.commonTextColor,
@@ -98,10 +139,8 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.dialogWidth,
     minWidth: '310px',
     height: 'auto',
-    userSelect: 'none',
-
-    // #8634: commonStyles.flyoutDialog,
-    maxHeight: '100vh'
+    maxHeight: '100vh', // #8634: commonStyles.flyoutDialog,
+    userSelect: 'none'
 
     // Need a general solution
     // See: #7930
@@ -109,62 +148,53 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
-  commonForm_small: {
+  commonFormSmall: {
     maxWidth: globalStyles.spacing.dialogSmallWidth
   },
 
-  commonForm_medium: {
+  commonFormMedium: {
     maxWidth: globalStyles.spacing.dialogMediumWidth
   },
 
-  commonForm_large: {
+  commonFormLarge: {
     maxWidth: globalStyles.spacing.dialogLargeWidth
   },
 
-  commonForm_hanger: {
+  commonFormBookmarkHanger: {
+    maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
+    height: 'initial', // #8634
+
     // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
-    whiteSpace: 'normal',
+    whiteSpace: 'normal'
+  },
 
-    // #8634
-    height: 'initial'
+  commonFormClickable: {
+    color: '#5b5b5b',
+
+    ':hover': {
+      color: '#000'
+    }
   },
 
-  commonForm_hanger_bookmark: {
-    maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth
+  commonFormTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.2em'
   },
 
-  commonForm__section: {
+  commonFormSection: {
     // PR #7985
     margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
   },
 
-  commonForm__section_sub: {
+  commonFormSubSection: {
     margin: `0 0 ${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.dialogInsideMargin}`
   },
 
-  commonForm__section_title: {
-    color: globalStyles.color.braveOrange,
-    fontSize: '1.2em'
-  },
-
-  commonForm__section_buttons: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  },
-
-  commonForm__section_bottom: {
+  commonFormBottomWrapper: {
     margin: 0,
     padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
     background: globalStyles.color.commonFormBottomWrapperBackground,
     borderRadius: `0 0 ${globalStyles.radius.borderRadius} ${globalStyles.radius.borderRadius}`
-  },
-
-  commonForm__clickable: {
-    color: '#5b5b5b',
-
-    ':hover': {
-      color: '#000'
-    }
   }
 })
 
@@ -199,10 +229,17 @@ const commonFormStyles = StyleSheet.create({
 
 module.exports = {
   CommonForm,
-  CommonFormHanger,
+  CommonFormSmall,
+  CommonFormMedium,
+  CommonFormLarge,
+  CommonFormBookmarkHanger,
   CommonFormDropdown,
   CommonFormTextbox,
-  CommonFormSection,
   CommonFormClickable,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormSubSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper,
   commonFormStyles
 }
diff --git a/app/renderer/components/common/flyoutDialog.js b/app/renderer/components/common/flyoutDialog.js
deleted file mode 100644
index a95b4f68053..00000000000
--- a/app/renderer/components/common/flyoutDialog.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* 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('../immutableComponent')
-
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../styles/global')
-
-class FlyoutDialog extends ImmutableComponent {
-  render () {
-    return <div
-      data-l10n-id={this.props.l10nId}
-      data-test-id={this.props.testId}
-      onKeyDown={this.props.onKeyDown}
-      onClick={this.props.onClick}
-      className={css(styles.flyoutDialog, this.props.custom)}
-    >
-      {this.props.children}
-    </div>
-  }
-}
-
-const styles = StyleSheet.create({
-  flyoutDialog: {
-    background: globalStyles.color.toolbarBackground,
-    borderRadius: globalStyles.radius.borderRadius,
-    boxShadow: globalStyles.shadow.flyoutDialogBoxShadow,
-    color: '#000',
-    fontSize: '13px',
-
-    // Issue #7949
-    padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
-    position: 'absolute',
-    top: globalStyles.spacing.dialogTopOffset,
-
-    // Issue #7930
-    boxSizing: 'border-box',
-    maxWidth: '600px',
-    maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
-  }
-})
-
-module.exports = FlyoutDialog
diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
index 7f234cb1bce..ea70445c699 100644
--- a/app/renderer/components/common/messageBox.js
+++ b/app/renderer/components/common/messageBox.js
@@ -9,7 +9,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('./dialog')
-const FlyoutDialog = require('./flyoutDialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('./switchControl')
 const {PromptTextBox} = require('./textbox')
@@ -142,8 +141,8 @@ class MessageBox extends React.Component {
 
   render () {
     return <Dialog testId='messageBoxDialog'>
-      <FlyoutDialog
-        testId={'msgBoxTab_' + this.props.tabId}
+      <div className={css(commonStyles.flyoutDialog)}
+        data-test-id={'msgBoxTab_' + this.props.tabId}
         onKeyDown={this.onKeyDown}
       >
         <div className={css(styles.title)} data-test-id='msgBoxTitle'>
@@ -186,7 +185,7 @@ class MessageBox extends React.Component {
             {this.messageBoxButtons}
           </div>
         </div>
-      </FlyoutDialog>
+      </div>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
index 735868526c7..e8630c47eba 100644
--- a/app/renderer/components/main/braveryPanel.js
+++ b/app/renderer/components/main/braveryPanel.js
@@ -9,7 +9,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const FlyoutDialog = require('../common/flyoutDialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {FormDropdown} = require('../common/dropdown')
@@ -38,6 +37,7 @@ const urlUtil = require('../../../../js/lib/urlutil')
 
 // Styles
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 const closeButton = require('../../../../img/toolbar/braveryPanel_btn.svg')
 
 class BraveryPanel extends React.Component {
@@ -249,13 +249,13 @@ class BraveryPanel extends React.Component {
     })
 
     return <Dialog onHide={this.onHide} testId='braveryPanelContainer' isClickDismiss>
-      <FlyoutDialog custom={[
+      <div className={css(
+        commonStyles.flyoutDialog,
         styles.braveryPanel,
         this.props.isCompactBraveryPanel && styles.braveryPanel_compact
-      ]}
+      )}
         onClick={(e) => e.stopPropagation()}
-        testId={this.props.isCompactBraveryPanel ? 'braveryPanelCompact' : 'braveryPanel'}
-      >
+        data-test-id={this.props.isCompactBraveryPanel ? 'braveryPanelCompact' : 'braveryPanel'}>
         {
           this.props.isCompactBraveryPanel
           ? this.compactBraveryPanelHeader
@@ -649,7 +649,7 @@ class BraveryPanel extends React.Component {
             </div>
           </div>
         </section>
-      </FlyoutDialog>
+      </div>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/checkDefaultBrowserDialog.js b/app/renderer/components/main/checkDefaultBrowserDialog.js
index 11e7107b61e..f03d90a69d8 100644
--- a/app/renderer/components/main/checkDefaultBrowserDialog.js
+++ b/app/renderer/components/main/checkDefaultBrowserDialog.js
@@ -11,8 +11,9 @@ const Dialog = require('../common/dialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {
-  CommonForm,
-  CommonFormSection
+  CommonFormMedium,
+  CommonFormSection,
+  CommonFormButtonWrapper
 } = require('../common/commonForm')
 
 // Actions
@@ -77,7 +78,7 @@ class CheckDefaultBrowserDialog extends React.Component {
 
   render () {
     return <Dialog className='checkDefaultBrowserDialog'>
-      <CommonForm medium onClick={this.onClick}>
+      <CommonFormMedium onClick={this.onClick}>
         <CommonFormSection>
           <div className={css(styles.flexAlignCenter)}>
             <div className={css(styles.section__braveIcon)} />
@@ -92,7 +93,7 @@ class CheckDefaultBrowserDialog extends React.Component {
             </div>
           </div>
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <BrowserButton groupedItem secondaryColor
             l10nId='notNow'
             testId='notNowButton'
@@ -103,12 +104,14 @@ class CheckDefaultBrowserDialog extends React.Component {
             testId='useBraveButton'
             onClick={this.onUseBrave}
           />
-        </CommonFormSection>
-      </CommonForm>
+        </CommonFormButtonWrapper>
+      </CommonFormMedium>
     </Dialog>
   }
 }
 
+module.exports = ReduxComponent.connect(CheckDefaultBrowserDialog)
+
 const styles = StyleSheet.create({
   flexAlignCenter: {
     display: 'flex',
@@ -131,5 +134,3 @@ const styles = StyleSheet.create({
     marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
   }
 })
-
-module.exports = ReduxComponent.connect(CheckDefaultBrowserDialog)
diff --git a/app/renderer/components/main/clearBrowsingDataPanel.js b/app/renderer/components/main/clearBrowsingDataPanel.js
index c17f2e3795e..045a5a2195c 100644
--- a/app/renderer/components/main/clearBrowsingDataPanel.js
+++ b/app/renderer/components/main/clearBrowsingDataPanel.js
@@ -11,8 +11,11 @@ const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const SwitchControl = require('../common/switchControl')
 const {
-  CommonForm,
-  CommonFormSection
+  CommonFormSmall,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
 } = require('../common/commonForm')
 
 // Actions
@@ -81,8 +84,8 @@ class ClearBrowsingDataPanel extends React.Component {
 
   render () {
     return <Dialog onHide={this.onHide} testId='clearBrowsingDataPanel' isClickDismiss>
-      <CommonForm small onClick={(e) => e.stopPropagation()}>
-        <CommonFormSection title l10nId='clearBrowsingData' />
+      <CommonFormSmall onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle data-l10n-id='clearBrowsingData' />
         <CommonFormSection>
           <SwitchControl
             rightl10nId='browserHistory'
@@ -121,7 +124,7 @@ class ClearBrowsingDataPanel extends React.Component {
             checkedOn={this.props.savedSiteSettings}
             onClick={this.onToggleSavedSiteSettings} />
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelButton'
@@ -132,11 +135,11 @@ class ClearBrowsingDataPanel extends React.Component {
             testId='clearDataButton'
             onClick={this.onClear}
           />
-        </CommonFormSection>
-        <CommonFormSection bottom>
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper>
           <div data-l10n-id='clearDataWarning' />
-        </CommonFormSection>
-      </CommonForm>
+        </CommonFormBottomWrapper>
+      </CommonFormSmall>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/importBrowserDataPanel.js b/app/renderer/components/main/importBrowserDataPanel.js
index d81ffec9f46..4d3da2aa094 100644
--- a/app/renderer/components/main/importBrowserDataPanel.js
+++ b/app/renderer/components/main/importBrowserDataPanel.js
@@ -14,7 +14,10 @@ const SwitchControl = require('../common/switchControl')
 const {
   CommonForm,
   CommonFormDropdown,
-  CommonFormSection
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
 } = require('../common/commonForm')
 
 // Actions
@@ -98,12 +101,12 @@ class ImportBrowserDataPanel extends React.Component {
 
   render () {
     return <Dialog onHide={this.onHide} testId='importBrowserDataPanel' isClickDismiss>
-      <CommonForm testId='importBrowserData' onClick={(e) => e.stopPropagation()}>
-        <CommonFormSection title
-          l10nId='importBrowserData'
-          testId='importBrowserDataTitle'
+      <CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle
+          data-test-id='importBrowserDataTitle'
+          data-l10n-id='importBrowserData'
         />
-        <CommonFormSection testId='importBrowserDataOptions'>
+        <CommonFormSection data-test-id='importBrowserDataOptions'>
           <div className={css(styles.dropdownWrapper)}>
             <CommonFormDropdown
               value={this.props.currentIndex}
@@ -144,22 +147,22 @@ class ImportBrowserDataPanel extends React.Component {
         <CommonFormSection>
           <div data-l10n-id='importDataCloseBrowserWarning' />
         </CommonFormSection>
-        <CommonFormSection buttons testId='importBrowserDataButtons'>
+        <CommonFormButtonWrapper data-test-id='importBrowserDataButtons'>
           <Button l10nId='cancel' className='whiteButton' onClick={this.onHide} />
           <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
-        </CommonFormSection>
-        <CommonFormSection bottom testId='importBrowserDataWarning'>
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper data-test-id='importBrowserDataWarning'>
           <div data-l10n-id='importDataWarning' />
-        </CommonFormSection>
+        </CommonFormBottomWrapper>
       </CommonForm>
     </Dialog>
   }
 }
 
+module.exports = ReduxComponent.connect(ImportBrowserDataPanel)
+
 const styles = StyleSheet.create({
   dropdownWrapper: {
     marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
   }
 })
-
-module.exports = ReduxComponent.connect(ImportBrowserDataPanel)
diff --git a/app/renderer/components/main/loginRequired.js b/app/renderer/components/main/loginRequired.js
index 213e5022cbc..67271b7419d 100644
--- a/app/renderer/components/main/loginRequired.js
+++ b/app/renderer/components/main/loginRequired.js
@@ -11,7 +11,9 @@ const Button = require('../common/button')
 const {
   CommonForm,
   CommonFormSection,
+  CommonFormTitle,
   CommonFormTextbox,
+  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -93,10 +95,8 @@ class LoginRequired extends React.Component {
     }
     return <Dialog onHide={this.onClose} isClickDismiss>
       <CommonForm onClick={this.onClick.bind(this)}>
-        <CommonFormSection title l10nId='basicAuthRequired' />
-        <CommonFormSection>
-          <span data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
-        </CommonFormSection>
+        <CommonFormTitle data-l10n-id='basicAuthRequired' />
+        <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
         <CommonFormSection>
           <div className={css(styles.sectionWrapper)}>
             <div className={css(
@@ -108,9 +108,9 @@ class LoginRequired extends React.Component {
             </div>
             {
               <div id='loginInput' className={css(
-                commonFormStyles.inputWrapper,
-                commonFormStyles.inputWrapper__input
-              )}>
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
                 <input className={css(
                   commonStyles.formControl,
                   commonStyles.textbox,
@@ -136,20 +136,20 @@ class LoginRequired extends React.Component {
             }
           </div>
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
           <Button l10nId='ok' className='primaryButton' onClick={this.onSave} />
-        </CommonFormSection>
+        </CommonFormButtonWrapper>
       </CommonForm>
     </Dialog>
   }
 }
 
+module.exports = LoginRequired
+
 const styles = StyleSheet.create({
   sectionWrapper: {
     display: 'flex',
     justifyContent: 'space-between'
   }
 })
-
-module.exports = LoginRequired
diff --git a/app/renderer/components/main/releaseNotes.js b/app/renderer/components/main/releaseNotes.js
index 5501197857b..a5b3cab74f9 100644
--- a/app/renderer/components/main/releaseNotes.js
+++ b/app/renderer/components/main/releaseNotes.js
@@ -9,11 +9,13 @@ const Immutable = require('immutable')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const FlyoutDialog = require('../common/flyoutDialog')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
 
+// Styles
+const commonStyles = require('../styles/commonStyles')
+
 class ReleaseNotes extends React.Component {
   constructor (props) {
     super(props)
@@ -39,15 +41,22 @@ class ReleaseNotes extends React.Component {
   }
 
   render () {
+    const className = css(
+      commonStyles.flyoutDialog,
+      styles.releaseNotes
+    )
+
     return <Dialog onHide={this.onHide} isClickDismiss>
-      <FlyoutDialog className={styles.releaseNotes} onClick={this.onClick}>
+      <div className={className} onClick={this.onClick}>
         <h1 className={css(styles.header)}>{this.props.name}</h1>
         <div>{this.props.notes}</div>
-      </FlyoutDialog>
+      </div>
     </Dialog>
   }
 }
 
+module.exports = ReduxComponent.connect(ReleaseNotes)
+
 const styles = StyleSheet.create({
   releaseNotes: {
     width: 'auto',
@@ -60,5 +69,3 @@ const styles = StyleSheet.create({
     marginBottom: '10px'
   }
 })
-
-module.exports = ReduxComponent.connect(ReleaseNotes)
diff --git a/app/renderer/components/main/siteInfo.js b/app/renderer/components/main/siteInfo.js
index 425f1458394..5fe9ac28acb 100644
--- a/app/renderer/components/main/siteInfo.js
+++ b/app/renderer/components/main/siteInfo.js
@@ -9,7 +9,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const FlyoutDialog = require('../common/flyoutDialog')
 const Button = require('../common/button')
 
 // Actions
@@ -29,6 +28,7 @@ const urlUtil = require('../../../../js/lib/urlutil')
 
 // Styles
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
 class SiteInfo extends React.Component {
   constructor (props) {
@@ -242,11 +242,12 @@ class SiteInfo extends React.Component {
 
   render () {
     return <Dialog testId='siteInfoDialog' onHide={this.onHide} className='siteInfo' isClickDismiss>
-      <FlyoutDialog onClick={(e) => e.stopPropagation()}
-        custom={[
+      <div onClick={(e) => e.stopPropagation()}
+        className={css(
+          commonStyles.flyoutDialog,
           styles.siteInfo,
           (this.props.isBlockedRunInsecureContent || this.props.runInsecureContent) && styles.siteInfo_large
-        ]}>
+      )}>
         {
           this.secureIcon
         }
@@ -256,7 +257,7 @@ class SiteInfo extends React.Component {
         {
           this.connectionInfo
         }
-      </FlyoutDialog>
+      </div>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/widevinePanel.js b/app/renderer/components/main/widevinePanel.js
index 9ad533ab522..f398237f894 100644
--- a/app/renderer/components/main/widevinePanel.js
+++ b/app/renderer/components/main/widevinePanel.js
@@ -13,8 +13,11 @@ const Button = require('../common/button')
 const WidevineInfo = require('./widevineInfo')
 const SwitchControl = require('../common/switchControl')
 const {
-  CommonForm,
-  CommonFormSection
+  CommonFormLarge,
+  CommonFormTitle,
+  CommonFormSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
 } = require('../common/commonForm')
 
 // Constants
@@ -76,12 +79,12 @@ class WidevinePanel extends React.Component {
        to be installed on the computer.
     */
     return <Dialog onHide={this.onHide} testId='widevinePanelDialog'>
-      <CommonForm large onClick={(e) => e.stopPropagation()}>
-        <CommonFormSection title l10nId='widevinePanelTitle' />
+      <CommonFormLarge onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle data-l10n-id='widevinePanelTitle' />
         <CommonFormSection>
           <WidevineInfo createTabRequestedAction={appActions.createTabRequested} />
         </CommonFormSection>
-        <CommonFormSection buttons>
+        <CommonFormButtonWrapper>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelButton'
@@ -91,8 +94,8 @@ class WidevinePanel extends React.Component {
             l10nId='installAndAllow'
             testId='installAndAllowButton'
             onClick={this.onInstallAndAllow} />
-        </CommonFormSection>
-        <CommonFormSection bottom>
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper>
           <div className={css(styles.flexJustifyCenter)}>
             {/* TODO: refactor switchControl.js to remove commonStyles.noPadding */}
             <SwitchControl
@@ -102,17 +105,17 @@ class WidevinePanel extends React.Component {
               onClick={this.onClickRememberForNetflix}
               checkedOn={this.props.alsoAddRememberSiteSetting} />
           </div>
-        </CommonFormSection>
-      </CommonForm>
+        </CommonFormBottomWrapper>
+      </CommonFormLarge>
     </Dialog>
   }
 }
 
+module.exports = ReduxComponent.connect(WidevinePanel)
+
 const styles = StyleSheet.create({
   flexJustifyCenter: {
     display: 'flex',
     justifyContent: 'center'
   }
 })
-
-module.exports = ReduxComponent.connect(WidevinePanel)
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 18d0e4fe1ac..466a9495efb 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -47,6 +47,23 @@ const styles = StyleSheet.create({
     fontSize: globalStyles.spacing.textAreaFontSize
   },
 
+  // Dialogs
+  flyoutDialog: {
+    background: globalStyles.color.toolbarBackground,
+    borderRadius: globalStyles.radius.borderRadius,
+    boxShadow: globalStyles.shadow.flyoutDialogBoxShadow,
+    color: '#000',
+    fontSize: '13px',
+    // Issue #7949
+    padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
+    position: 'absolute',
+    top: globalStyles.spacing.dialogTopOffset,
+    // Issue #7930
+    boxSizing: 'border-box',
+    maxWidth: '600px',
+    maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
+  },
+
   // itemList.less
   listItem: {
     cursor: 'default',
diff --git a/js/about/styles.js b/js/about/styles.js
index f05a9e146c4..809c0678de1 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -36,9 +36,13 @@ const {
 
 const {
   CommonForm,
+  CommonFormTitle,
   CommonFormSection,
   CommonFormDropdown,
-  CommonFormClickable
+  CommonFormClickable,
+  CommonFormSubSection,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
 } = require('../../app/renderer/components/common/commonForm')
 
 class Container extends ImmutableComponent {
@@ -404,7 +408,7 @@ class AboutStyle extends ImmutableComponent {
             bottom: '40px'
           }}>
             <CommonForm>
-              <CommonFormSection title>Title</CommonFormSection>
+              <CommonFormTitle>CommonFormTitle</CommonFormTitle>
               <CommonFormSection>
                 CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                 labore et dolore magna aliqua.
@@ -415,37 +419,41 @@ class AboutStyle extends ImmutableComponent {
                 </CommonFormDropdown>
               </CommonFormSection>
               <CommonFormSection>
-                <CommonFormSection subSection>Sub Section</CommonFormSection>
-                <CommonFormSection subSection>
+                <CommonFormSubSection>CommonFormSubSection</CommonFormSubSection>
+                <CommonFormSubSection>
                   <CommonFormDropdown>
                     <option value='CommonFormDropdown'>CommonFormDropdown</option>
                   </CommonFormDropdown>
-                </CommonFormSection>
+                </CommonFormSubSection>
               </CommonFormSection>
               <CommonFormSection>
                 CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                 labore et dolore magna aliqua.
               </CommonFormSection>
-              <CommonFormSection buttons>
+              <CommonFormButtonWrapper>
                 <BrowserButton groupedItem secondaryColor l10nId='Cancel' />
                 <BrowserButton groupedItem primaryColor l10nId='Done' />
-              </CommonFormSection>
-              <CommonFormSection bottom>
+              </CommonFormButtonWrapper>
+              <CommonFormBottomWrapper>
                 <CommonFormClickable>CommonFormClickable</CommonFormClickable>
-              </CommonFormSection>
+              </CommonFormBottomWrapper>
             </CommonForm>
           </div>
 
           <Pre><Code>
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
+            <Tab>CommonFormTitle,{'\n'}</Tab>
             <Tab>CommonFormSection,{'\n'}</Tab>
             <Tab>CommonFormDropdown,{'\n'}</Tab>
-            <Tab>CommonFormClickable{'\n'}</Tab>
+            <Tab>CommonFormClickable,{'\n'}</Tab>
+            <Tab>CommonFormSubSection,{'\n'}</Tab>
+            <Tab>CommonFormButtonWrapper,{'\n'}</Tab>
+            <Tab>CommonFormBottomWrapper{'\n'}</Tab>
             &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
-            <Tab>&lt;CommonFormSection title&gt;Title&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
             <Tab2>CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit,{'\n'}</Tab2>
             <Tab2>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{'\n'}</Tab2>
@@ -456,24 +464,24 @@ class AboutStyle extends ImmutableComponent {
             <Tab2>&lt;/CommonFormDropdown&gt;{'\n'}</Tab2>
             <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
-            <Tab2>&lt;CommonFormSection subSection&gt;Sub Section&lt;/CommonFormSection&gt;{'\n'}</Tab2>
-            <Tab2>&lt;CommonFormSection subSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;CommonFormSubSection&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;{'\n'}</Tab2>
             <Tab3>&lt;CommonFormDropdown&gt;{'\n'}</Tab3>
             <Tab4>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab4>
             <Tab3>&lt;/CommonFormDropdown&gt;{'\n'}</Tab3>
-            <Tab2>&lt;/CommonFormSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
             <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
             <Tab2>CommonFormSection - Lorem ipsum dolor sit amet, consectetur adipisicing elit,{'\n'}</Tab2>
             <Tab2>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.{'\n'}</Tab2>
             <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
-            <Tab>&lt;CommonFormSection buttons&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormButtonWrapper&gt;{'\n'}</Tab>
             <Tab2>&lt;BrowserButton groupedItem secondaryColor l10nId='Cancel' /&gt;{'\n'}</Tab2>
             <Tab2>&lt;BrowserButton groupedItem primaryColor l10nId='Done' /&gt;{'\n'}</Tab2>
-            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
-            <Tab>&lt;CommonFormSection bottom&gt;{'\n'}</Tab>
+            <Tab>&lt;/CommonFormButtonWrapper&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormBottomWrapper&gt;{'\n'}</Tab>
             <Tab2>&lt;CommonFormClickable&gt;CommonFormClickable&lt;/CommonFormClickable&gt;{'\n'}</Tab2>
-            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;/CommonFormBottomWrapper&gt;{'\n'}</Tab>
             &lt;/CommonForm&gt;{'\n'}
           </Code></Pre>
 
@@ -496,18 +504,18 @@ class AboutStyle extends ImmutableComponent {
             bottom: '40px'
           }}>
             <CommonForm>
-              <CommonFormSection title>Title</CommonFormSection>
+              <CommonFormTitle>CommonFormTitle</CommonFormTitle>
             </CommonForm>
           </div>
 
           <Pre><Code>
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
-            <Tab>CommonFormSection{'\n'}</Tab>
+            <Tab>CommonFormTitle{'\n'}</Tab>
             &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
-            <Tab>&lt;CommonFormSection title&gt;Title&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
             &lt;/CommonForm&gt;{'\n'}
           </Code></Pre>
         </Container>
@@ -584,12 +592,12 @@ class AboutStyle extends ImmutableComponent {
           }}>
             <CommonForm>
               <CommonFormSection>
-                <CommonFormSection subSection>Sub Section</CommonFormSection>
-                <CommonFormSection subSection>
+                <CommonFormSubSection>CommonFormSubSection</CommonFormSubSection>
+                <CommonFormSubSection>
                   <CommonFormDropdown>
                     <option value='CommonFormDropdown'>CommonFormDropdown</option>
                   </CommonFormDropdown>
-                </CommonFormSection>
+                </CommonFormSubSection>
               </CommonFormSection>
             </CommonForm>
           </div>
@@ -598,17 +606,18 @@ class AboutStyle extends ImmutableComponent {
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormSection,{'\n'}</Tab>
+            <Tab>CommonFormSubSection,{'\n'}</Tab>
             <Tab>CommonFormDropdown{'\n'}</Tab>
             &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
-            <Tab2>&lt;CommonFormSection subSection&gt;Sub Section&lt;/CommonFormSection&gt;{'\n'}</Tab2>
-            <Tab2>&lt;CommonFormSection subSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;CommonFormSubSection&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;CommonFormSubSection&gt;{'\n'}</Tab2>
             <Tab3>&lt;CommonFormDropdown&gt;{'\n'}</Tab3>
             <Tab4>&lt;option value='CommonFormDropdown'&gt;CommonFormDropdown&lt;/option&gt;{'\n'}</Tab4>
             <Tab3>&lt;/CommonFormDropdown&gt;{'\n'}</Tab3>
-            <Tab2>&lt;/CommonFormSection&gt;{'\n'}</Tab2>
+            <Tab2>&lt;/CommonFormSubSection&gt;{'\n'}</Tab2>
             <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
             &lt;/CommonForm&gt;{'\n'}
           </Code></Pre>
@@ -622,24 +631,24 @@ class AboutStyle extends ImmutableComponent {
             bottom: '40px'
           }}>
             <CommonForm>
-              <CommonFormSection buttons>
+              <CommonFormButtonWrapper>
                 <BrowserButton groupedItem secondaryColor l10nId='Cancel' />
                 <BrowserButton groupedItem primaryColor l10nId='Done' />
-              </CommonFormSection>
+              </CommonFormButtonWrapper>
             </CommonForm>
           </div>
 
           <Pre><Code>
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
-            <Tab>CommonFormSection{'\n'}</Tab>
+            <Tab>CommonFormButtonWrapper{'\n'}</Tab>
             &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
-            <Tab>&lt;CommonFormSection buttons&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormButtonWrapper&gt;{'\n'}</Tab>
             <Tab2>&lt;BrowserButton groupedItem secondaryColor l10nId='Cancel' /&gt;{'\n'}</Tab2>
             <Tab2>&lt;BrowserButton groupedItem primaryColor l10nId='Done' /&gt;{'\n'}</Tab2>
-            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;/CommonFormButtonWrapper&gt;{'\n'}</Tab>
             &lt;/CommonForm&gt;{'\n'}
           </Code></Pre>
         </Container>
@@ -652,23 +661,23 @@ class AboutStyle extends ImmutableComponent {
             bottom: '40px'
           }}>
             <CommonForm>
-              <CommonFormSection bottom>
+              <CommonFormBottomWrapper>
                 <CommonFormClickable>CommonFormClickable</CommonFormClickable>
-              </CommonFormSection>
+              </CommonFormBottomWrapper>
             </CommonForm>
           </div>
 
           <Pre><Code>
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
-            <Tab>CommonFormSection,{'\n'}</Tab>
+            <Tab>CommonFormBottomWrapper,{'\n'}</Tab>
             <Tab>CommonFormClickable{'\n'}</Tab>
             &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
-            <Tab>&lt;CommonFormSection bottom&gt;{'\n'}</Tab>
+            <Tab>&lt;CommonFormBottomWrapper&gt;{'\n'}</Tab>
             <Tab2>&lt;CommonFormClickable&gt;CommonFormClickable&lt;/CommonFormClickable&gt;{'\n'}</Tab2>
-            <Tab>&lt;/CommonFormSection&gt;{'\n'}</Tab>
+            <Tab>&lt;/CommonFormBottomWrapper&gt;{'\n'}</Tab>
             &lt;/CommonForm&gt;{'\n'}
           </Code></Pre>
         </Container>