Refactor checkDefaultBrowserDialog.js with commonForm

Closes #8137 Addresses #7989 - Added CommonFormMedium - Removed styles under checkDefaultBrowserDialog in forms.less Auditors: Test Plan: 1. Change your default browser to other than Brave 2. Start Brave
brave · Apr 20, 2017 · 9ed2807 · 9ed2807
1 parent 192d625
commit 9ed2807
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 70 deletions.
diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
@@ -3,14 +3,31 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+
+// Components
 const ImmutableComponent = require('./immutableComponent')
 const Dialog = require('../../../js/components/dialog')
 const Button = require('../../../js/components/button')
 const SwitchControl = require('../../../js/components/switchControl')
+
+// Actions
 const appActions = require('../../../js/actions/appActions')
 const windowActions = require('../../../js/actions/windowActions')
+
+// Constants
 const settings = require('../../../js/constants/settings')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('./styles/global')
+
+const braveAbout = require('../../extensions/brave/img/braveAbout.png')
+
+const {
+  CommonFormMedium,
+  CommonFormSection,
+  CommonFormButtonWrapper
+} = require('./commonForm')
+
 class CheckDefaultBrowserDialog extends ImmutableComponent {
   constructor () {
     super()
@@ -35,19 +52,58 @@ class CheckDefaultBrowserDialog extends ImmutableComponent {
     this.props.onHide()
   }
   render () {
-    return <Dialog className='checkDefaultBrowserDialog' >
-      <div className='checkDefaultBrowser' onClick={(e) => e.stopPropagation()}>
-        <div className='braveIcon' />
-        <div className='makeBraveDefault' data-l10n-id='makeBraveDefault' />
-        <SwitchControl className='checkDefaultOnStartup' rightl10nId='checkDefaultOnStartup'
-          checkedOn={this.props.checkDefaultOnStartup} onClick={this.onCheckDefaultOnStartup} />
-        <div className='checkDefaultBrowserButtons'>
-          <Button l10nId='notNow' className='whiteButton' onClick={this.onNotNow} />
-          <Button l10nId='useBrave' className='primaryButton' onClick={this.onUseBrave} />
-        </div>
-      </div>
+    return <Dialog className='checkDefaultBrowserDialog'>
+      <CommonFormMedium onClick={(e) => e.stopPropagation()}>
+        <CommonFormSection>
+          <div className={css(styles.flexAlignCenter)}>
+            <div className={css(styles.section__braveIcon)} />
+            <div>
+              <div className={css(styles.section__title)} data-l10n-id='makeBraveDefault' />
+              <SwitchControl className={css(styles.section__switchControl)}
+                rightl10nId='checkDefaultOnStartup'
+                checkedOn={this.props.checkDefaultOnStartup}
+                onClick={this.onCheckDefaultOnStartup} />
+            </div>
+          </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='notNow'
+            testId='notNowButton'
+            onClick={this.onNotNow}
+          />
+          <Button className='primaryButton'
+            l10nId='useBrave'
+            testId='useBraveButton'
+            onClick={this.onUseBrave}
+          />
+        </CommonFormButtonWrapper>
+      </CommonFormMedium>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+
+  section__braveIcon: {
+    backgroundImage: `image-set(url(${braveAbout}) 2x)`,
+    backgroundRepeat: 'no-repeat',
+    height: '64px',
+    width: '64px',
+    minWidth: '64px',
+    marginRight: globalStyles.spacing.dialogInsideMargin
+  },
+  section__title: {
+    fontWeight: 'bold'
+  },
+  section__switchControl: {
+    paddingLeft: 0,
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  }
+})
+
 module.exports = CheckDefaultBrowserDialog
diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
@@ -21,6 +21,16 @@ class CommonForm extends ImmutableComponent {
   }
 }
 
+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(
@@ -123,6 +133,10 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
+  commonFormMedium: {
+    maxWidth: globalStyles.spacing.dialogMediumWidth
+  },
+
   commonFormLarge: {
     maxWidth: globalStyles.spacing.dialogLargeWidth
   },
@@ -168,6 +182,7 @@ const commonFormStyles = StyleSheet.create({
     display: 'flex',
     justifyContent: 'space-between'
   },
+
   inputWrapper: {
     display: 'flex',
     flexFlow: 'column',
@@ -179,6 +194,7 @@ const commonFormStyles = StyleSheet.create({
   inputWrapper__input: {
     flexGrow: 1
   },
+
   input__bottomRow: {
     marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
   },
@@ -192,6 +208,7 @@ const commonFormStyles = StyleSheet.create({
 
 module.exports = {
   CommonForm,
+  CommonFormMedium,
   CommonFormLarge,
   CommonFormBookmarkHanger,
   CommonFormDropdown,

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -132,6 +132,7 @@ const globalStyles = {
     closeIconSize: '13px',
     narrowIconSize: '12px',
     dialogWidth: '422px',
+    dialogMediumWidth: '500px',
     dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',

diff --git a/less/forms.less b/less/forms.less
@@ -153,65 +153,6 @@ select {
   }
 }
 
-// TODO: Make this use commonDialog
-.checkDefaultBrowserDialog {
-  .checkDefaultBrowser {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    border-radius: @borderRadius;
-    max-width: 422px;
-    padding: 1;
-    text-align: left;
-    width: 614px;
-    height: 120px;
-    user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    max-height: 100%;
-
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
-      }
-    }
-
-    .checkDefaultBrowserButtons {
-      text-align: right;
-      padding: 16px 10px;
-      position: relative;
-      top: -30px;
-    }
-
-    .makeBraveDefault {
-      font-weight: bold;
-      display: inline-block;
-      position: relative;
-      top: -35px;
-      margin-left: 15px;
-    }
-
-    .braveIcon {
-      background-image: -webkit-image-set(url(../app/extensions/brave/img/braveAbout.png) 2x);
-      background-repeat: no-repeat;
-      height: 64px;
-      width: 64px;
-      display: inline-block;
-      position: relative;
-      top: 10px;
-    }
-
-    .checkDefaultOnStartup {
-      left: 75px;
-      position: relative;
-      top: -25px;
-    }
-  }
-}
-
-
 .braveryPanelContainer {
   .braveryPanel {
     .flyoutDialog;