Merge pull request #8300 from luixxiul/hotfix-navbarHeight

Increase the tabs bar and tabsToolbarButtons height

app/renderer/components/styles/global.js

@@ -108,7 +108,7 @@ const globalStyles = {
  buttonWidth: '25px',
  navbarHeight: '36px',
  downloadsBarHeight: '50px',
- tabsToolbarHeight: '28px',
+ tabsToolbarHeight: '26px',
  tabPagesHeight: '7px',
  bookmarksToolbarHeight: '24px',
  bookmarksToolbarWithFaviconsHeight: '24px',
@@ -210,4 +210,6 @@ globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary
 globalStyles.color.switchBG_on = globalStyles.color.braveOrange
 globalStyles.color.statsGray = globalStyles.color.chromeText
 
+globalStyles.spacing.tabHeight = globalStyles.spacing.tabsToolbarHeight
+
 module.exports = globalStyles

app/renderer/components/styles/tab.js

@@ -18,7 +18,7 @@ const styles = StyleSheet.create({
  boxSizing: 'border-box',
  color: '#5a5a5a',
  display: 'flex',
- height: '24px',
+ height: globalStyles.spacing.tabHeight,
  marginTop: '0',
  transition: `transform 200ms ease, ${globalStyles.transition.tabBackgroundTransition}`,
  left: '0',
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
 
  active: {
  background: `rgba(255, 255, 255, 1.0)`,
- height: '24px',
+ height: globalStyles.spacing.tabHeight,
  marginTop: '0',
  borderWidth: '0 1px 0 0',
  borderStyle: 'solid',

less/tabs.less

@@ -119,6 +119,7 @@
 }
 
 .tabsToolbar {
+ box-sizing: border-box;
  background: @tabsBackground;
  display: flex;
  height: @tabsToolbarHeight;
@@ -127,7 +128,10 @@
 }
 
 .tabsToolbarButtons {
+ box-sizing: border-box;
+ height: @tabHeight;
  padding-right: 2px;
+
  .browserButton {
  display: inline-block;
  line-height: 26px;

less/variables.less

@@ -81,7 +81,8 @@
 
 @navbarHeight: 36px;
 @downloadsBarHeight: 60px;
-@tabsToolbarHeight: 24px;
+@tabsToolbarHeight: 26px;
+@tabHeight: @tabsToolbarHeight;
 @tabPagesHeight: 7px;
 @bookmarksToolbarHeight: 24px;
 @bookmarksToolbarWithFaviconsHeight: 24px;