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