Merge pull request #8300 from luixxiul/hotfix-navbarHeight

Increase the tabs bar and tabsToolbarButtons height

Author: bsclifton

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;