Replace Button with BrowserButton, set common font properties for BrowserButton, etc.

app/extensions/brave/locales/en-US/styles.properties

@@ -5,6 +5,7 @@ adsShowBrave=Show Brave Ads
 browserButton=Browser Button
 buttons=Buttons
 extensionItem=Extension Item
+ok=OK
 forms=Forms
 h1=This is an h1
 h2=This is an h2

app/renderer/about/bookmarks/bookmarkTitleHeader.js

@@ -4,13 +4,18 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ImmutableComponent = require('../../components/immutableComponent')
+const BrowserButton = require('../../components/common/browserButton')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
 
+const globalStyles = require('../../components/styles/global')
+const addBookmark = require('../../../../img/toolbar/add_bookmark_btn.svg')
+
 class BookmarkTitleHeader extends ImmutableComponent {
   constructor () {
     super()
@@ -25,13 +30,25 @@ class BookmarkTitleHeader extends ImmutableComponent {
   render () {
     return <div>
       <span data-l10n-id={this.props.heading} />
-      <span className='addBookmark'
-        data-l10n-id='addBookmark'
-        data-test-id='addBookmark'
+      <BrowserButton
+        isMaskImage
+        custom={styles.header__addBookmark}
+        l10nId='addBookmark'
+        testId='addBookmark'
         onClick={this.addBookmark}
       />
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  header__addBookmark: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '20px',
+    height: '20px',
+    WebkitMaskImage: `url(${addBookmark})`,
+    WebkitMaskRepeat: 'no-repeat'
+  }
+})
+
 module.exports = BookmarkTitleHeader

app/renderer/about/bookmarks/bookmarks.js

@@ -12,6 +12,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const {AboutPageSectionTitle} = require('../../components/common/sectionTitle')
+const BrowserButton = require('../../components/common/browserButton')
 const BookmarkFolderList = require('./bookmarkFolderList')
 const BookmarksList = require('./bookmarksList')
 
@@ -27,6 +28,11 @@ const windowActions = require('../../../../js/actions/windowActions')
 require('../../../../less/about/bookmarks.less')
 require('../../../../node_modules/font-awesome/css/font-awesome.css')
 
+const globalStyles = require('../../components/styles/global')
+const addBookmarkFolder = require('../../../../img/toolbar/add_BM_folder_btn.svg')
+const importBrowserData = require('../../../../img/toolbar/bookmarks_import.svg')
+const exportBookmarks = require('../../../../img/toolbar/bookmarks_export.svg')
+
 class Bookmarks extends React.Component {
   constructor (props) {
     super(props)
@@ -142,24 +148,49 @@ class Bookmarks extends React.Component {
       })}>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
-          <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
-          <span data-l10n-id='exportBookmarks' className='exportBookmarks' onClick={this.exportBookmarks} />
-          <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
-          {
-            this.state.search
-              ? <span onClick={this.onClearSearchText} className='fa fa-close searchInputClear' />
+          <div className='searchWrapper'>
+            <BrowserButton
+              isMaskImage
+              custom={[
+                styles.headerActions__search__button,
+                styles.headerActions__search__button_importBrowserData
+              ]}
+              l10nId='importBrowserData'
+              onClick={this.importBrowserData}
+            />
+            <BrowserButton
+              isMaskImage
+              custom={[
+                styles.headerActions__search__button,
+                styles.headerActions__search__button_exportBookmarks
+              ]}
+              l10nId='exportBookmarks'
+              onClick={this.exportBookmarks}
+            />
+            <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
+            {
+              this.state.search
+              ? <BrowserButton
+                iconClass={globalStyles.appIcons.remove}
+                iconStyle={{ color: globalStyles.color.gray }}
+                custom={styles.headerActions__search__input__button_clear}
+                onClick={this.onClearSearchText}
+              />
               : <span className='fa fa-search searchInputPlaceholder' />
-          }
+            }
+          </div>
         </div>
       </div>
 
       <div className='siteDetailsPageContent'>
         <div className='folderView'>
           <div className='columnHeader'>
             <span data-l10n-id='folders' />
-            <span className='addBookmarkFolder'
-              data-l10n-id='addBookmarkFolder'
-              data-test-id='addBookmarkFolder'
+            <BrowserButton
+              isMaskImage
+              custom={styles.columnHeader__addBookmarkFolder}
+              l10nId='addBookmarkFolder'
+              testId='addBookmarkFolder'
               onClick={this.addBookmarkFolder}
             />
           </div>
@@ -198,6 +229,40 @@ const styles = StyleSheet.create({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center'
+  },
+
+  headerActions__search__button: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '43px',
+    height: '22px',
+    marginRight: '.5rem',
+    WebkitMaskRepeat: 'no-repeat'
+  },
+
+  headerActions__search__button_importBrowserData: {
+    WebkitMaskImage: `url(${importBrowserData})`
+  },
+
+  headerActions__search__button_exportBookmarks: {
+    WebkitMaskImage: `url(${exportBookmarks})`
+  },
+
+  headerActions__search__input__button_clear: {
+    // See siteDetails.less
+    margin: 0,
+    padding: 0,
+    width: 0,
+    position: 'relative',
+    left: '-25px',
+    fontSize: '16px'
+  },
+
+  columnHeader__addBookmarkFolder: {
+    backgroundColor: globalStyles.color.buttonColor,
+    width: '20px',
+    height: '20px',
+    WebkitMaskImage: `url(${addBookmarkFolder})`,
+    WebkitMaskRepeat: 'no-repeat'
   }
 })
 

app/renderer/components/autofill/autofillAddressPanel.js

@@ -9,7 +9,7 @@ const {css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const {
   CommonForm,
   CommonFormSection,
@@ -272,12 +272,12 @@ class AutofillAddressPanel extends React.Component {
           </div>
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelAddressButton'
             onClick={this.onHide}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             disabled={this.props.disableSaveButton}
             l10nId='save'
             testId='saveAddressButton'

app/renderer/components/autofill/autofillCreditCardPanel.js

@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Component
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const {
   CommonForm,
   CommonFormSection,
@@ -201,12 +201,12 @@ class AutofillCreditCardPanel extends React.Component {
           </div>
         </CommonFormSection>
         <CommonFormSection buttons>
-          <Button className='whiteButton'
+          <BrowserButton groupedItem secondaryColor
             l10nId='cancel'
             testId='cancelCreditCardButton'
             onClick={this.onHide}
           />
-          <Button className='primaryButton'
+          <BrowserButton groupedItem primaryColor
             disabled={this.props.disableSaveButton}
             l10nId='save'
             testId='saveCreditCardButton'

app/renderer/components/common/browserButton.js

@@ -18,11 +18,14 @@ class BrowserButton extends ImmutableComponent {
       this.props.actionItem &&
         [styles.browserButton_default, styles.browserButton_subtleItem, styles.browserButton_actionItem],
       this.props.extensionItem && styles.browserButton_extensionItem,
-      this.props.groupedItem && styles.browserButton_groupedItem,
       this.props.notificationItem && styles.browserButton_notificationItem,
       this.props.panelItem && styles.browserButton_panelItem,
-      this.props.iconOnly && styles.browserButton_iconOnly,
       this.props.fitContent && styles.browserButton_fitContent,
+      this.props.groupedItem && styles.browserButton_groupedItem,
+      this.props.smallItem && styles.browserButton_smallItem,
+      this.props.iconOnly && styles.browserButton_iconOnly,
+      this.props.isMaskImage && styles.browserButton_isMaskImage,
+
       // TODO: These are other button styles app-wise
       // that needs to be refactored and included in this file
       // .............................................
@@ -65,8 +68,10 @@ class BrowserButton extends ImmutableComponent {
       data-l10n-id={this.props.l10nId}
       data-test-id={this.props.testId}
       data-test2-id={this.props.test2Id}
+      data-test-pinned={this.props.testPinned}
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       style={this.buttonStyle}
+      title={this.props.title}
       data-button-value={this.props.dataButtonValue}
       onClick={this.props.onClick}
       className={css(this.classNames, this.props.custom)}>
@@ -89,7 +94,6 @@ const styles = StyleSheet.create({
     width: buttonSize,
     whiteSpace: 'nowrap',
     outline: 'none',
-    cursor: 'default',
     display: 'inline-block',
     borderRadius: '2px',
     textAlign: 'center',
@@ -102,6 +106,9 @@ const styles = StyleSheet.create({
     backgroundColor: globalStyles.button.default.backgroundColor,
     border: 'none',
 
+    // See #11114
+    cursor: 'pointer',
+
     // TODO: #9223
     fontSize: '13px',
     lineHeight: buttonSize,
@@ -120,6 +127,16 @@ const styles = StyleSheet.create({
     // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L49
     color: globalStyles.button.color,
 
+    // #9223
+    // Set the common default font-family with common.less and window.less
+    // See:
+    //  - https://github.com/brave/browser-laptop/blob/e1b67c219b64b829cae284717de6ecccb0da8154/less/about/common.less#L11
+    //  - https://github.com/brave/browser-laptop/blob/321281bc2de68f46fed89c87a97dd8c4e35f35c5/less/window.less#L10
+    fontFamily: globalStyles.defaultFontFamily,
+    // Currently -webkit-font-smoothing works only on macOS. See: https://caniuse.com/#search=font-smooth
+    // Set initial to cancel the inherited value
+    WebkitFontSmoothing: 'initial',
+
     // See #11111
     WebkitAppRegion: 'no-drag',
 
@@ -132,11 +149,11 @@ const styles = StyleSheet.create({
   browserButton_default: {
     position: 'relative',
     boxShadow: globalStyles.button.default.boxShadow,
-    cursor: 'pointer',
 
-    // TODO: #9223
+    // #9223
     height: '32px', // 32px == 1rem * 2
     fontSize: globalStyles.spacing.defaultFontSize,
+    fontWeight: 400,
     lineHeight: 1.25,
 
     // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L92
@@ -172,10 +189,9 @@ const styles = StyleSheet.create({
     borderRight: '2px solid transparent',
     borderTop: `2px solid ${globalStyles.button.primary.gradientColor1}`,
     borderBottom: `2px solid ${globalStyles.button.primary.gradientColor2}`,
-    cursor: 'pointer',
 
-    // https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L115
-    fontWeight: 500,
+    // #9223
+    fontWeight: 300,
 
     ':hover': {
       border: `2px solid ${globalStyles.button.primary.borderHoverColor}`,
@@ -187,8 +203,6 @@ const styles = StyleSheet.create({
     background: globalStyles.button.secondary.background,
     border: '1px solid white',
     color: globalStyles.button.secondary.color,
-    cursor: 'pointer',
-    fontWeight: 500,
 
     ':hover': {
       border: `1px solid ${globalStyles.button.secondary.borderHoverColor}`,
@@ -224,6 +238,14 @@ const styles = StyleSheet.create({
     }
   },
 
+  browserButton_smallItem: {
+    fontSize: '12px',
+    minWidth: 'fit-content',
+    height: 'auto',
+    paddingTop: '3px',
+    paddingBottom: '3px'
+  },
+
   browserButton_notificationItem: {
     textTransform: 'capitalize',
     height: '28px'
@@ -265,6 +287,14 @@ const styles = StyleSheet.create({
     fontSize: '24px'
   },
 
+  // -webkit-mask-image requires background-color instead of color specified above
+  // See bookmarkTitleHeader.js for an example
+  browserButton_isMaskImage: {
+    ':hover': {
+      backgroundColor: globalStyles.button.default.hoverColor
+    }
+  },
+
   browserButton_disabled: {
     pointerEvents: 'none',
     animation: 'none',