style breadcrumbs

ui/shared/monaco/CodeEditorBreadcrumbs.tsx

-import { Flex, Box } from '@chakra-ui/react';
+import { Flex, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import stripLeadingSlash from 'lib/stripLeadingSlash';
+import * as themes from 'ui/shared/monaco/utils/themes';
 
 interface Props {
   path: string;
@@ -9,13 +10,30 @@ interface Props {
 
 const CodeEditorBreadcrumbs = ({ path }: Props) => {
   const chunks = stripLeadingSlash(path).split('/');
+  const bgColor = useColorModeValue(themes.light.colors['editor.background'], themes.dark.colors['editor.background']);
+
   return (
-    <Flex fontSize="sm" color="text_secondary" pl={ 2 } flexWrap="wrap">
+    <Flex
+      color="text_secondary"
+      bgColor={ bgColor }
+      pl="16px"
+      pr="8px"
+      flexWrap="wrap"
+      fontSize="13px"
+      lineHeight="22px"
+      alignItems="center"
+    >
       { chunks.map((chunk, index) => {
-
         return (
           <React.Fragment key={ index }>
-            { index !== 0 && <Box mx={ 1 }>{ '>' }</Box> }
+            { index !== 0 && (
+              <Box
+                className="codicon codicon-breadcrumb-separator"
+                boxSize="16px"
+                _before={{
+                  content: '"\\eab6"',
+                }}/>
+            ) }
             <Box>{ chunk }</Box>
           </React.Fragment>
         );

ui/shared/monaco/CodeEditorSideBar.tsx

@@ -25,7 +25,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
     fontSize: '11px',
     lineHeight: '35px',
     fontWeight: 500,
-    color: useColorModeValue('gray.600', 'gray.500'),
+    color: useColorModeValue('gray.600', 'gray.400'),
     _selected: {
       color: useColorModeValue('black', 'white'),
     },

ui/shared/monaco/CodeEditorTab.tsx

@@ -30,6 +30,8 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
     !isCloseDisabled && onClose(path);
   }, [ isCloseDisabled, onClose, path ]);
 
+  const color = useColorModeValue('black', 'white');
+  const colorInactive = useColorModeValue('gray.600', 'gray.400');
   const bgColor = useColorModeValue(themes.light.colors['editor.background'], themes.dark.colors['editor.background']);
   const bgColorInactive = useColorModeValue('rgb(236, 236, 236)', 'rgb(45, 45, 45)');
   const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
@@ -46,7 +48,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
       borderRightColor={ borderColorInactive }
       borderBottomWidth="1px"
       borderBottomColor={ isActive ? 'transparent' : borderColorInactive }
-      color={ isActive ? 'black' : 'gray.600' }
+      color={ isActive ? color : colorInactive }
       alignItems="center"
       fontWeight={ 500 }
       cursor="pointer"
@@ -57,6 +59,7 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
           display: 'block',
         },
       }}
+      userSelect="none"
     >
       <Icon as={ icon } boxSize="16px" mr="4px"/>
       <span>{ fileName }</span>