Merge pull request #14563 from brave/fix/14553-tab-session-indicator-overlap

Style tab session number indicator so there is no overlap

Author: bsclifton

app/renderer/components/tabs/content/newSessionIcon.js

@@ -20,6 +20,7 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 const globalStyles = require('../../styles/global')
 const {opacityIncreaseElementKeyframes} = require('../../styles/animations')
 const {theme} = require('../../styles/theme')
+require('../../../../../fonts/poppins.css')
 
 const newSessionSvg = require('../../../../extensions/brave/img/tabs/new_session.svg')
 
@@ -125,9 +126,8 @@ const styles = StyleSheet.create({
   },
 
   icon_newSession__name: {
-    marginLeft: '4px',
-    fontSize: '11px',
-    fontWeight: 'bold',
+    marginLeft: '6px',
+    font: '600 9px/0 Poppins, sans-serif',
     color: theme.tab.icon.symbol.color
   }
 })

test/unit/app/renderer/components/tabs/content/newSessionIconTest.js

@@ -71,6 +71,7 @@ describe('Tabs content - NewSessionIcon', function () {
     })
     mockery.registerMock('electron', fakeElectron)
     mockery.registerMock('../../../../extensions/brave/img/tabs/new_session.svg')
+    mockery.registerMock('../../../../../fonts/poppins.css')
     windowStore = require('../../../../../../../js/stores/windowStore')
     appStore = require('../../../../../../../js/stores/appStoreRenderer')
     NewSessionIcon = require('../../../../../../../app/renderer/components/tabs/content/newSessionIcon')