Increase the tabs bar and tabsToolbarButtons height

Closes #8263

Auditors:

Test Plan:
1. Open github.com
2. Open facebook.com in a new tab
3. Open about:preferences in a new tab
4. Turn on the tab theme option
5. Make sure the tab looks good
6. Ensure drag and drop still works good for moving tabs around
7. Ensure other features still look good; for example, bookmarks toolbar
8. Ensure the menu button on the tabs bar still works good

Author: Suguru Hirahara

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;