diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js index 15ea310f2d3..cd813154bac 100644 --- a/app/renderer/components/common/browserButton.js +++ b/app/renderer/components/common/browserButton.js @@ -46,6 +46,8 @@ class BrowserButton extends ImmutableComponent { } } +const buttonSize = '25px' + const styles = StyleSheet.create({ browserButton: { margin: '0 3px', @@ -53,9 +55,9 @@ const styles = StyleSheet.create({ outline: 'none', cursor: 'default', display: 'inline-block', - lineHeight: '25px', - height: '25px', - width: '25px', + lineHeight: buttonSize, + height: buttonSize, + width: buttonSize, fontSize: '13px', borderRadius: '2px', textAlign: 'center', @@ -144,6 +146,7 @@ const styles = StyleSheet.create({ 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', @@ -159,8 +162,9 @@ const styles = StyleSheet.create({ }, browserButton_subtleItem: { - // cf: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L151-L152 - background: '#ccc', + 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 diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 479cfc0c8c7..39dfb6e13f9 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -278,6 +278,11 @@ const globalStyles = { 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' } },