Revert Aphrodite changes that were breaking bookmark modals

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

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)

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)

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

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

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