Fix margin around the button on about:safebrowsing & Add browserButton_subtleItem fixing regressions

app/renderer/components/common/browserButton.js

@@ -13,17 +13,17 @@ class BrowserButton extends ImmutableComponent {
       styles.browserButton,
       this.props.primaryColor && [styles.browserButton_default, styles.browserButton_primaryColor],
       this.props.secondaryColor && [styles.browserButton_default, styles.browserButton_secondaryColor],
+      this.props.subtleItem && [styles.browserButton_default, styles.browserButton_subtleItem],
       this.props.extensionItem && styles.browserButton_extensionItem,
       this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem
       // TODO: These are other button styles app-wise
       // that needs to be refactored and included in this file
       // .............................................
-      // this.props.smallItem && styles.browserButton_actionItem,
+      // this.props.smallItem && styles.browserButton_smallItem,
       // this.props.actionItem && styles.browserButton_actionItem,
       // this.props.navItem && styles.browserButton_navItem,
       // this.props.panelItem && styles.browserButton_panelItem,
-      // this.props.subtleItem && styles.browserButton_subtleItem
     ]
   }
   render () {
@@ -46,18 +46,19 @@ class BrowserButton extends ImmutableComponent {
   }
 }
 
+const buttonSize = '25px'
+
 const styles = StyleSheet.create({
   browserButton: {
     margin: '0 3px',
     whiteSpace: 'nowrap',
     outline: 'none',
     cursor: 'default',
     display: 'inline-block',
-    lineHeight: '25px',
-    height: '25px',
-    width: '25px',
+    lineHeight: buttonSize,
+    height: buttonSize,
+    width: buttonSize,
     fontSize: '13px',
-    color: globalStyles.button.default.color,
     borderRadius: '2px',
     textAlign: 'center',
     transition: '.1s opacity, .1s background',
@@ -68,49 +69,71 @@ const styles = StyleSheet.create({
     backgroundImage: 'none',
     backgroundColor: globalStyles.button.default.backgroundColor,
     border: 'none',
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L49
+    color: globalStyles.button.color,
+
     ':hover': {
       color: globalStyles.button.default.hoverColor
     }
   },
+
   // applies for primary and white buttons
   browserButton_default: {
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L92
+    color: globalStyles.button.default.color,
+
     position: 'relative',
     boxShadow: globalStyles.button.default.boxShadow,
     cursor: 'pointer',
     lineHeight: 1.25,
     width: 'auto',
     height: 'auto',
-    minWidth: '78px',
-    fontSize: '13px',
-    padding: '7px 20px',
+    fontSize: globalStyles.spacing.defaultFontSize,
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L94-L95
+    paddingTop: '5px',
+    paddingBottom: '5px',
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L105-L106
+    paddingRight: '16px',
+    paddingLeft: '16px',
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L98
+    minWidth: `calc(${globalStyles.spacing.defaultFontSize} * 6)`, // issue #6384
+
     ':active': {
       // push the button down when active
       bottom: '-1px'
     }
   },
+
   browserButton_primaryColor: {
     background: globalStyles.button.primary.background,
     borderLeft: '2px solid transparent',
     borderRight: '2px solid transparent',
     borderTop: `2px solid ${globalStyles.button.primary.gradientColor1}`,
     borderBottom: `2px solid ${globalStyles.button.primary.gradientColor2}`,
-    color: globalStyles.button.primary.color,
     cursor: 'pointer',
+
     ':hover': {
       border: `2px solid ${globalStyles.button.primary.borderHoverColor}`,
       color: globalStyles.button.primary.hoverColor
     }
   },
+
   browserButton_secondaryColor: {
     background: globalStyles.button.secondary.background,
     border: '1px solid white',
     color: globalStyles.button.secondary.color,
     cursor: 'pointer',
+
     ':hover': {
       border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,
       color: globalStyles.button.secondary.hoverColor
     }
   },
+
   browserButton_extensionItem: {
     WebkitAppRegion: 'no-drag',
     backgroundSize: 'contain',
@@ -119,20 +142,42 @@ const styles = StyleSheet.create({
     opacity: '0.85',
     backgroundRepeat: 'no-repeat'
   },
+
   browserButton_groupedItem: {
     // Legacy LESS inside ledger is too nested
     // and this style won't have effect without using !important
+    //
     // TODO: remove !important and check advancedSettings.js
     // once preferences is fully refactored
     marginRight: '4px !important',
     marginLeft: '4px !important'
   },
+
   browserButton_notificationItem: {
     fontSize: '13px',
     marginRight: '10px',
     padding: '2px 15px',
     textTransform: 'capitalize',
     width: 'auto'
+  },
+
+  browserButton_subtleItem: {
+    background: globalStyles.button.subtle.backgroundColor,
+
+    // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L152
+    fontSize: '14px',
+
+    // Adding box-shadow:none to cancel the box-shadow specified on browserButton_default
+    // On button.less, box-shadow is only speficied to .primaryButton and .whiteButton
+    // cf:
+    //  https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L114
+    //  https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L137
+    boxShadow: 'none',
+
+    // Cancel pushing down the button to make the button subtle
+    ':active': {
+      bottom: 0
+    }
   }
 })
 

app/renderer/components/styles/global.js

@@ -252,30 +252,40 @@ const globalStyles = {
       animationFillMode: 'forwards'
     }
   },
+
   button: {
+    color: '#5a5a5a',
+
     default: {
-      color: '#5a5a5a',
+      color: '#fff',
       backgroundColor: 'transparent',
       hoverColor: '#000',
       boxShadow: '0px 1px 5px -1px rgba(0, 0, 0, 0.5)'
     },
+
     primary: {
       gradientColor1: '#FF7A1D',
       gradientColor2: '#ff5000',
       background: 'linear-gradient(#FF7A1D, #ff5000)',
-      color: '#fff',
       hoverColor: '#fff',
       borderHoverColor: '#fff'
     },
+
     secondary: {
       gradientColor1: '#fff',
       gradientColor2: '#ececec',
       background: 'linear-gradient(#fff, #ececec)',
       color: '#444',
       hoverColor: '#000',
       borderHoverColor: 'rgb(153, 153, 153)'
+    },
+
+    subtle: {
+      // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151
+      backgroundColor: '#ccc'
     }
   },
+
   braveryPanel: {
     color: '#3b3b3b',
 

js/about/safebrowsing.js

@@ -3,7 +3,9 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 require('../../less/button.less')
 require('../../less/window.less')
@@ -26,18 +28,48 @@ class SafebrowsingPage extends React.Component {
       <svg width='75' height='75' className='errorLogo' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
         <path className='errorLogoInner' d='M11.4743662,97.2253545 C1.98936285,97.2253571 -1.69987039,86.6466353 1.98936288,81.2764443 C2.36018089,80.2888073 37.5445854,9.4248374 37.6406733,9.21698534 C41.524789,0.483122973 56.8650161,0.0416071437 60.7924391,9.21698534 C60.7572519,9.19524917 98.2991929,81.8687547 97.9337883,81.2642177 C101.323931,86.2404407 96.9260512,97.2253571 88.8978453,97.2253545 C88.8978453,97.2253545 11.4756386,97.2879401 11.4743662,97.2253545 Z M50.5378687,73.3388569 C47.2443918,73.3388569 44.2703808,76.046195 44.2703808,79.5061732 C44.2703808,82.9729198 47.1388056,85.6802579 50.5378687,85.6802579 C53.9369317,85.6802579 56.8040029,82.9729198 56.8040029,79.5061732 C56.8053565,76.046195 53.8313455,73.3388569 50.5378687,73.3388569 Z M50.3063913,28.5 C46.5729719,28.5 42.719076,30.2990258 43.0805057,32.9143334 L45.8826007,65.934287 L54.7315355,65.934287 L57.5322768,32.9143334 C57.8937065,30.2990258 54.0398106,28.5 50.3063913,28.5 Z' />
       </svg>
-      <div className='safebrowsingErrorText'>
+      <div className={css(styles.safebrowsingErrorText__wrapper)}>
         <span data-l10n-id='safebrowsingErrorText' />
       </div>
-      <div className='buttons'>
+      <section>
         {this.state.advanced
-          ? <div>
-            <Button l10nId='safebrowsingErrorHideAdvanced' className='subtleButton' onClick={this.onAdvancedToggle.bind(this)} />
-            <div className='subtleText'><p data-l10n-id='safebrowsingErrorInfo' /><br /><p data-l10n-id='safebrowsingErrorBypass' /></div></div>
-          : <Button l10nId='safebrowsingErrorAdvanced' className='subtleButton' onClick={this.onAdvancedToggle.bind(this)} />}
-      </div>
+          ? <section>
+            <div className='buttons'>
+              <BrowserButton subtleItem
+                l10nId='safebrowsingErrorHideAdvanced'
+                testId='safebrowsingErrorHideAdvanced'
+                onClick={this.onAdvancedToggle.bind(this)}
+              />
+            </div>
+            <div className={css(styles.subtleText)}>
+              <p data-l10n-id='safebrowsingErrorInfo' />
+              <p className={css(styles.subtleText__p)} data-l10n-id='safebrowsingErrorBypass' />
+            </div>
+          </section>
+          : <section className='buttons'>
+            <BrowserButton subtleItem
+              l10nId='safebrowsingErrorAdvanced'
+              testId='safebrowsingErrorAdvanced'
+              onClick={this.onAdvancedToggle.bind(this)}
+            />
+          </section>
+        }
+      </section>
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  safebrowsingErrorText__wrapper: {
+    marginBottom: '1rem'
+  },
+
+  subtleText: {
+    marginTop: '1rem'
+  },
+  subtleText__p: {
+    marginTop: '1rem'
+  }
+})
+
 module.exports = <SafebrowsingPage />

js/about/styles.js

@@ -289,20 +289,17 @@ class AboutStyle extends ImmutableComponent {
           onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
-        <button data-l10n-id='subtleButton' className='browserButton subtleButton' onClick={this.onRemoveBookmark} />
+        <BrowserButton subtleItem l10nId='subtleButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
-          &lt;button data-l10n-id='cancel' className='browserButton subtleButton'{'\n'}
-          onClick={'{this.onRemoveBookmark}'} />
+          &lt;BrowserButton subtleItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 
         <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
         <BrowserButton secondaryColor groupedItem l10nId='whiteButton' onClick={this.onRemoveBookmark} />
-        <BrowserButton secondaryColor groupedItem l10nId='wideButton' onClick={this.onRemoveBookmark} />
         <BrowserButton primaryColor groupedItem l10nId='primaryButton' onClick={this.onRemoveBookmark} />
         <Pre><Code>
           &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
           &lt;BrowserButton secondaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />{'\n'}
-          &lt;BrowserButton secondaryColor groupedItem wideItem l10nId='cancel'{'\n'}  onClick={'{this.onRemoveBookmark}'} />{'\n'}
           &lt;BrowserButton primaryColor groupedItem l10nId='cancel' onClick={'{this.onRemoveBookmark}'} />
         </Code></Pre>
 

less/about/error.less

@@ -67,10 +67,6 @@
 
     &.safeBrowsing {
       background-color: red;
-
-     .safebrowsingErrorText {
-        padding-bottom: 2rem;
-      }
     }
   }
 }