style tabs

ui/shared/monaco/CodeEditorFileTree.tsx

@@ -8,6 +8,7 @@ import iconFile from './icons/file.svg';
 import iconFolderOpen from './icons/folder-open.svg';
 import iconFolder from './icons/folder.svg';
 import iconSolidity from './icons/solidity.svg';
+import useColors from './utils/useColors';
 
 interface Props {
   tree: FileTree;
@@ -26,6 +27,7 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props
     },
   };
   const rowHoverBgColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const colors = useColors();
 
   return (
     <Accordion allowMultiple defaultIndex={ isCollapsed ? undefined : tree.map((item, index) => index) } reduceMotion>
@@ -48,7 +50,7 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props
                       h="22px"
                       transitionDuration="0"
                     >
-                      <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color="#616161"/>
+                      <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color={ colors.buttons.color }/>
                       <Icon as={ isExpanded ? iconFolderOpen : iconFolder } boxSize="16px" mr="4px"/>
                       { leafName }
                     </AccordionButton>

ui/shared/monaco/CodeEditorSearch.tsx

@@ -7,6 +7,7 @@ import useDebounce from 'lib/hooks/useDebounce';
 
 import CodeEditorSearchSection from './CodeEditorSearchSection';
 import CoderEditorCollapseButton from './CoderEditorCollapseButton';
+import useColors from './utils/useColors';
 
 interface Props {
   data: Array<File>;
@@ -74,7 +75,7 @@ const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck }: Props) =
   const inputColor = useColorModeValue('rgb(97, 97, 97)', 'rgb(204, 204, 204)');
   const inputBgColor = useColorModeValue('white', 'rgb(60, 60, 60)');
   const inputFocusBorderColor = useColorModeValue('#0090f1', '#007fd4');
-  const bgColor = useColorModeValue('#eee', '#222');
+  const colors = useColors();
 
   return (
     <Box>
@@ -84,7 +85,7 @@ const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck }: Props) =
         isDisabled={ searchResults.length === 0 }
         isCollapsed={ expandedSections.length === 0 }
       />
-      <Box px={ 2 } position="sticky" top="35px" left="0" zIndex="2" bgColor={ bgColor } pb="8px" boxShadow={ isInputStuck ? 'md' : 'none' }>
+      <Box px={ 2 } position="sticky" top="35px" left="0" zIndex="2" bgColor={ colors.panels.bgColor } pb="8px" boxShadow={ isInputStuck ? 'md' : 'none' }>
         <Input
           size="xs"
           onChange={ handleSearchTermChange }

ui/shared/monaco/CodeEditorSearchSection.tsx

@@ -7,6 +7,7 @@ import CodeEditorSearchResultItem from './CodeEditorSearchResultItem';
 import iconFile from './icons/file.svg';
 import iconSolidity from './icons/solidity.svg';
 import getFileName from './utils/getFileName';
+import useColors from './utils/useColors';
 
 interface Props {
   data: SearchResult;
@@ -27,6 +28,7 @@ const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
   const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
 
   const badgeBgColor = useColorModeValue('#c4c4c4', '#4d4d4d');
+  const colors = useColors();
 
   return (
     <AccordionItem borderWidth="0px" _last={{ borderBottomWidth: '0px' }} >
@@ -41,7 +43,7 @@ const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
             lineHeight="22px"
             alignItems="center"
           >
-            <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color="#616161"/>
+            <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color={ colors.buttons.color }/>
             <Icon as={ icon } boxSize="16px" mr="4px"/>
             <span>{ fileName }</span>
             <Box className="monaco-count-badge" ml="auto" bgColor={ badgeBgColor }>{ data.matches.length }</Box>

ui/shared/monaco/CodeEditorSideBar.tsx

@@ -7,6 +7,7 @@ import type { File, Monaco } from './types';
 
 import CodeEditorFileExplorer from './CodeEditorFileExplorer';
 import CodeEditorSearch from './CodeEditorSearch';
+import useColors from './utils/useColors';
 
 interface Props {
   monaco: Monaco | undefined;
@@ -32,21 +33,21 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
     letterSpacing: 0.3,
   };
 
-  const bgColor = useColorModeValue('#eee', '#222');
+  const colors = useColors();
 
   const handleScrollThrottled = React.useRef(_throttle((event: React.SyntheticEvent) => {
     setIsStuck((event.target as HTMLDivElement).scrollTop > 0);
   }, 100));
 
   return (
-    <Box w="250px" flexShrink={ 0 } bgColor={ bgColor } fontSize="13px" overflowY="scroll" onScroll={ handleScrollThrottled.current } pb="22px">
+    <Box w="250px" flexShrink={ 0 } bgColor={ colors.panels.bgColor } fontSize="13px" overflowY="scroll" onScroll={ handleScrollThrottled.current } pb="22px">
       <Tabs isLazy lazyBehavior="keepMounted" variant="unstyled" size="13px">
         <TabList
           columnGap={ 3 }
           position="sticky"
           top={ 0 }
           left={ 0 }
-          bgColor={ bgColor }
+          bgColor={ colors.panels.bgColor }
           zIndex="1"
           px={ 2 }
           boxShadow={ isStuck ? 'md' : 'none' }

ui/shared/monaco/CodeEditorTab.tsx

-import { Flex, IconButton, chakra } from '@chakra-ui/react';
+import { Flex, IconButton, Icon, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import iconCross from 'icons/cross.svg';
 
+import iconFile from './icons/file.svg';
+import iconSolidity from './icons/solidity.svg';
 import getFilePathParts from './utils/getFilePathParts';
-
+import * as themes from './utils/themes';
+import useColors from './utils/useColors';
 interface Props {
   isActive?: boolean;
   path: string;
@@ -16,6 +19,7 @@ interface Props {
 
 const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabsPathChunks }: Props) => {
   const [ fileName, folderName ] = getFilePathParts(path, tabsPathChunks);
+  const colors = useColors();
 
   const handleClick = React.useCallback(() => {
     onClick(path);
@@ -26,41 +30,50 @@ const CodeEditorTab = ({ isActive, path, onClick, onClose, isCloseDisabled, tabs
     !isCloseDisabled && onClose(path);
   }, [ isCloseDisabled, onClose, path ]);
 
+  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;
+  const borderColorInactive = useColorModeValue('rgb(243, 243, 243)', 'rgb(37, 37, 38)');
+
   return (
     <Flex
-      py={ 1 }
-      pl={ 3 }
-      pr={ isActive ? 0 : 5 }
-      fontSize="sm"
-      lineHeight={ 6 }
+      pl="10px"
+      pr={ isActive ? '4px' : '28px' }
+      fontSize="13px"
+      lineHeight="34px"
+      bgColor={ isActive ? bgColor : bgColorInactive }
       borderRightWidth="1px"
-      borderRightColor="divider"
+      borderRightColor={ borderColorInactive }
       borderBottomWidth="1px"
-      borderBottomColor={ isActive ? 'deeppink' : 'divider' }
+      borderBottomColor={ isActive ? 'transparent' : borderColorInactive }
       color={ isActive ? 'black' : 'gray.600' }
       alignItems="center"
       fontWeight={ 500 }
-      mb="-1px"
       cursor="pointer"
       onClick={ handleClick }
       _hover={{
-        pr: '0',
+        pr: '4px',
         svg: {
           display: 'block',
         },
       }}
     >
+      <Icon as={ icon } boxSize="16px" mr="4px"/>
       <span>{ fileName }</span>
       { folderName && <chakra.span fontSize="xs" color="text_secondary" ml={ 1 }>{ folderName[0] === '.' ? '' : '...' }{ folderName }</chakra.span> }
       <IconButton
         as={ iconCross }
         boxSize={ 5 }
+        ml="4px"
         p="2px"
         variant="unstyled"
         aria-label="close"
         onClick={ handleClose }
         isDisabled={ isCloseDisabled }
         display={ isActive ? 'block' : 'none' }
+        borderRadius="sm"
+        color={ colors.buttons.color }
+        _hover={{ bgColor: colors.buttons.bgColorHover }}
       />
     </Flex>
   );

ui/shared/monaco/CodeEditorTabs.tsx

@@ -2,6 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import CodeEditorTab from './CodeEditorTab';
+import useColors from './utils/useColors';
 
 interface Props {
   tabs: Array<string>;
@@ -11,15 +12,15 @@ interface Props {
 }
 
 const CodeEditorTabs = ({ tabs, activeTab, onTabSelect, onTabClose }: Props) => {
+  const colors = useColors();
+
   const tabsPathChunks = React.useMemo(() => {
     return tabs.map((tab) => tab.split('/'));
   }, [ tabs ]);
 
   return (
     <Flex
-      bgColor="lightblue"
-      borderBottomWidth="1px"
-      borderColor="divider"
+      bgColor={ colors.panels.bgColor }
       flexWrap="wrap"
     >
       { tabs.map((tab) => (

ui/shared/monaco/CoderEditorCollapseButton.tsx

-import { Tooltip, Box, useColorModeValue } from '@chakra-ui/react';
+import { Tooltip, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import useColors from './utils/useColors';
+
 interface Props {
   onClick: () => void;
   label: string;
@@ -9,7 +11,7 @@ interface Props {
 }
 
 const CoderEditorCollapseButton = ({ onClick, label, isDisabled, isCollapsed }: Props) => {
-  const hoverBgColor = useColorModeValue('rgba(184, 184, 184, 0.31)', 'rgba(90, 93, 94, 0.31)');
+  const colors = useColors();
   return (
     <Tooltip label={ label } isDisabled={ isDisabled }>
       <Box
@@ -26,7 +28,7 @@ const CoderEditorCollapseButton = ({ onClick, label, isDisabled, isCollapsed }:
           content: isCollapsed ? '"\\eb95"' : '"\\eac5"',
         }}
         _hover={{
-          bgColor: hoverBgColor,
+          bgColor: colors.buttons.bgColorHover,
         }}
         onClick={ onClick }
         cursor="pointer"

ui/shared/monaco/utils/getFilePathParts.ts

-export default function getFilePathParts(path: string, tabsPathChunks: Array<Array<string>>) {
+export default function getFilePathParts(path: string, tabsPathChunks: Array<Array<string>>): [string, string | undefined] {
   const chunks = path.split('/');
   const fileName = chunks[chunks.length - 1];
   const folderName = getFolderName(chunks, tabsPathChunks);

ui/shared/monaco/utils/useColors.ts

+import { useColorModeValue } from '@chakra-ui/react';
+
+export default function useColors() {
+  return {
+    panels: {
+      bgColor: useColorModeValue('#eee', '#222'),
+    },
+    buttons: {
+      bgColorHover: useColorModeValue('rgba(184, 184, 184, 0.31)', 'rgba(90, 93, 94, 0.31)'),
+      color: '#616161',
+    },
+  };
+}