diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index a9e1bb0f2db..5ef4a957927 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -88,7 +88,14 @@ class NormalizedButton extends ImmutableComponent {
data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
data-button-value={this.props.dataButtonValue}
onClick={this.props.onClick}
- className={css(styles.normalizedButton, this.props.custom)}
+ className={css(
+ styles.normalizedButton,
+
+ // For homeButton, stopButton, and bookmarkButton
+ this.props.navigationButton && styles.normalizedButton_navigationButton,
+
+ this.props.custom
+ )}
// for publisherToggle.js
data-test-authorized={this.props.testAuthorized}
@@ -284,6 +291,15 @@ const styles = StyleSheet.create({
border: 'none',
margin: 0,
whiteSpace: 'nowrap'
+ },
+
+ normalizedButton_navigationButton: {
+ display: 'inline-block',
+ width: '100%',
+ height: '100%',
+
+ // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L585
+ padding: 0
}
})
diff --git a/app/renderer/components/navigation/buttons/bookmarkButton.js b/app/renderer/components/navigation/buttons/bookmarkButton.js
index 93ab551c29b..8af28df157a 100644
--- a/app/renderer/components/navigation/buttons/bookmarkButton.js
+++ b/app/renderer/components/navigation/buttons/bookmarkButton.js
@@ -8,6 +8,7 @@ const ipc = require('electron').ipcRenderer
// Components
const ReduxComponent = require('../../reduxComponent')
+const {NormalizedButton} = require('../../common/browserButton')
// Actions
const windowActions = require('../../../../../js/actions/windowActions')
@@ -15,7 +16,6 @@ const windowActions = require('../../../../../js/actions/windowActions')
// Constants
const siteTags = require('../../../../../js/constants/siteTags')
const messages = require('../../../../../js/constants/messages')
-const settings = require('../../../../../js/constants/settings')
// State
const tabState = require('../../../../common/state/tabState')
@@ -25,12 +25,10 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
const windowStore = require('../../../../../js/stores/windowStore')
// Utils
-const cx = require('../../../../../js/lib/classSet')
const siteUtil = require('../../../../../js/state/siteUtil')
const UrlUtil = require('../../../../../js/lib/urlutil')
-const {getSetting} = require('../../../../../js/settings')
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet} = require('aphrodite/no-important')
const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
@@ -97,18 +95,13 @@ class BookmarkButton extends React.Component {
render () {
return (
-
)
@@ -116,14 +109,12 @@ class BookmarkButton extends React.Component {
}
const styles = StyleSheet.create({
- bookmark__button: {
+ bookmarkButton: {
background: `url(${bookmarkButtonIcon}) center no-repeat`,
- backgroundSize: '14px 14px',
- width: '100%',
- height: '100%'
+ backgroundSize: '14px 14px'
},
- bookmark__button_remove: {
+ bookmarkButton_bookmarked: {
background: `url(${bookmarkedButtonIcon}) center no-repeat`
}
})
diff --git a/app/renderer/components/navigation/buttons/homeButton.js b/app/renderer/components/navigation/buttons/homeButton.js
index f77de922049..718ec955fb2 100644
--- a/app/renderer/components/navigation/buttons/homeButton.js
+++ b/app/renderer/components/navigation/buttons/homeButton.js
@@ -60,10 +60,9 @@ class HomeButton extends React.Component {
// BEM Level: navigationBar__buttonContainer
render () {
- return