search panel styles

ui/shared/monaco/CodeEditorFileExplorer.tsx

@@ -32,7 +32,7 @@ const CodeEditorFileExplorer = ({ data, onFileSelect }: Props) => {
   }, []);
 
   return (
-    <Box pb="22px">
+    <Box>
       <CoderEditorCollapseButton onClick={ handleCollapseButtonClick } label="Collapse folders"/>
       <CodeEditorFileTree key={ key } tree={ tree } onItemClick={ handleFileClick } isCollapsed={ key > 0 }/>
     </Box>

ui/shared/monaco/CodeEditorFileTree.tsx

@@ -48,7 +48,7 @@ const CodeEditorFileTree = ({ tree, level = 0, onItemClick, isCollapsed }: Props
                       h="22px"
                       transitionDuration="0"
                     >
-                      <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px"/>
+                      <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color="#616161"/>
                       <Icon as={ isExpanded ? iconFolderOpen : iconFolder } boxSize="16px" mr="4px"/>
                       { leafName }
                     </AccordionButton>

ui/shared/monaco/CodeEditorSearch.tsx

-import { Accordion, Box, Input } from '@chakra-ui/react';
+import { Accordion, Box, Input, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { File, Monaco, SearchResult } from './types';
@@ -12,9 +12,10 @@ interface Props {
   data: Array<File>;
   monaco: Monaco | undefined;
   onFileSelect: (index: number, lineNumber?: number) => void;
+  isInputStuck: boolean;
 }
 
-const CodeEditorSearch = ({ monaco, data, onFileSelect }: Props) => {
+const CodeEditorSearch = ({ monaco, data, onFileSelect, isInputStuck }: Props) => {
   const [ searchTerm, changeSearchTerm ] = React.useState('');
   const [ searchResults, setSearchResults ] = React.useState<Array<SearchResult>>([]);
   const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>([]);
@@ -70,15 +71,41 @@ const CodeEditorSearch = ({ monaco, data, onFileSelect }: Props) => {
     }
   }, [ expandedSections.length, searchResults ]);
 
+  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');
+
   return (
-    <Box px={ 2 }>
+    <Box>
       <CoderEditorCollapseButton
         onClick={ handleToggleCollapseClick }
         label={ expandedSections.length === 0 ? 'Expand all' : 'Collapse all' }
         isDisabled={ searchResults.length === 0 }
         isCollapsed={ expandedSections.length === 0 }
       />
-      <Input size="xs" onChange={ handleSearchTermChange } value={ searchTerm } placeholder="Search"/>
+      <Box px={ 2 } position="sticky" top="35px" left="0" zIndex="2" bgColor={ bgColor } pb="8px" boxShadow={ isInputStuck ? 'md' : 'none' }>
+        <Input
+          size="xs"
+          onChange={ handleSearchTermChange }
+          value={ searchTerm }
+          placeholder="Search"
+          variant="unstyled"
+          color={ inputColor }
+          bgColor={ inputBgColor }
+          borderRadius="none"
+          fontSize="13px"
+          lineHeight="19px"
+          borderWidth="1px"
+          borderColor={ inputBgColor }
+          py="2px"
+          px="4px"
+          transitionDuration="0"
+          _focus={{
+            borderColor: inputFocusBorderColor,
+          }}
+        />
+      </Box>
       <Accordion
         key={ debouncedSearchTerm }
         allowMultiple

ui/shared/monaco/CodeEditorSearchResultItem.tsx

-import { Box, chakra } from '@chakra-ui/react';
+import { Box, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResult } from './types';
@@ -27,9 +27,14 @@ const calculateStartPosition = (lineContent: string, startColumn: number) => {
 
 const CodeEditorSearchResultItem = ({ lineContent, filePath, onClick, startLineNumber, startColumn, endColumn }: Props) => {
   const start = calculateStartPosition(lineContent, startColumn);
+  const rowHoverBgColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <Box
+      pr="8px"
+      pl="32px"
+      fontSize="13px"
+      lineHeight="22px"
       whiteSpace="nowrap"
       overflow="hidden"
       textOverflow="ellipsis"
@@ -37,9 +42,11 @@ const CodeEditorSearchResultItem = ({ lineContent, filePath, onClick, startLineN
       data-file-path={ filePath }
       data-line-number={ startLineNumber }
       onClick={ onClick }
+      transitionDuration="0"
+      _hover={{ bgColor: rowHoverBgColor }}
     >
       <span>{ lineContent.slice(start, startColumn - 1) }</span>
-      <chakra.span bgColor="lime">{ lineContent.slice(startColumn - 1, endColumn - 1) }</chakra.span>
+      <chakra.span bgColor="rgba(234, 92, 0, 0.33)">{ lineContent.slice(startColumn - 1, endColumn - 1) }</chakra.span>
       <span>{ lineContent.slice(endColumn - 1) }</span>
     </Box>
   );

ui/shared/monaco/CodeEditorSearchSection.tsx

-import { AccordionButton, AccordionItem, AccordionIcon, AccordionPanel } from '@chakra-ui/react';
+import { AccordionButton, AccordionItem, AccordionIcon, AccordionPanel, useColorModeValue, Icon, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResult } from './types';
 
 import CodeEditorSearchResultItem from './CodeEditorSearchResultItem';
+import iconFile from './icons/file.svg';
+import iconSolidity from './icons/solidity.svg';
 import getFileName from './utils/getFileName';
 
 interface Props {
@@ -21,23 +23,42 @@ const CodeEditorSearchSection = ({ data, onItemClick }: Props) => {
     }
   }, [ data.file_path, onItemClick ]);
 
+  const rowHoverBgColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const icon = /.sol|.yul|.vy$/.test(fileName) ? iconSolidity : iconFile;
+
+  const badgeBgColor = useColorModeValue('#c4c4c4', '#4d4d4d');
+
   return (
-    <AccordionItem borderWidth="0px" _last={{ borderBottomWidth: '0px' }}>
-      <AccordionButton p={ 0 } _hover={{ bgColor: 'inherit' }} fontSize="sm">
-        <AccordionIcon/>
-        <span>{ fileName }</span>
-      </AccordionButton>
-      <AccordionPanel p={ 0 }>
-        { data.matches.map((match) => (
-          <CodeEditorSearchResultItem
-            key={ data.file_path + '_' + match.startLineNumber + '_' + match.startColumn }
-            filePath={ data.file_path }
-            onClick={ handleFileLineClick }
-            { ...match }
-          />
-        ),
-        ) }
-      </AccordionPanel>
+    <AccordionItem borderWidth="0px" _last={{ borderBottomWidth: '0px' }} >
+      { ({ isExpanded }) => (
+        <>
+          <AccordionButton
+            py={ 0 }
+            px={ 2 }
+            _hover={{ bgColor: rowHoverBgColor }}
+            fontSize="13px"
+            transitionDuration="0"
+            lineHeight="22px"
+            alignItems="center"
+          >
+            <AccordionIcon transform={ isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' } boxSize="16px" color="#616161"/>
+            <Icon as={ icon } boxSize="16px" mr="4px"/>
+            <span>{ fileName }</span>
+            <Box className="monaco-count-badge" ml="auto" bgColor={ badgeBgColor }>{ data.matches.length }</Box>
+          </AccordionButton>
+          <AccordionPanel p={ 0 }>
+            { data.matches.map((match) => (
+              <CodeEditorSearchResultItem
+                key={ data.file_path + '_' + match.startLineNumber + '_' + match.startColumn }
+                filePath={ data.file_path }
+                onClick={ handleFileLineClick }
+                { ...match }
+              />
+            ),
+            ) }
+          </AccordionPanel>
+        </>
+      ) }
     </AccordionItem>
   );
 };

ui/shared/monaco/CodeEditorSideBar.tsx

@@ -24,9 +24,9 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
     fontSize: '11px',
     lineHeight: '35px',
     fontWeight: 500,
-    color: 'gray.600',
+    color: useColorModeValue('gray.600', 'gray.500'),
     _selected: {
-      color: 'black',
+      color: useColorModeValue('black', 'white'),
     },
     px: 0,
     letterSpacing: 0.3,
@@ -39,7 +39,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
   }, 100));
 
   return (
-    <Box w="250px" flexShrink={ 0 } bgColor={ bgColor } fontSize="13px" overflowY="scroll" onScroll={ handleScrollThrottled.current }>
+    <Box w="250px" flexShrink={ 0 } bgColor={ bgColor } fontSize="13px" overflowY="scroll" onScroll={ handleScrollThrottled.current } pb="22px">
       <Tabs isLazy lazyBehavior="keepMounted" variant="unstyled" size="13px">
         <TabList
           columnGap={ 3 }
@@ -50,7 +50,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
           zIndex="1"
           px={ 2 }
           boxShadow={ isStuck ? 'md' : 'none' }
-          borderTopRadius="md"
+          borderTopRightRadius="md"
         >
           <Tab { ...tabProps }>Explorer</Tab>
           <Tab { ...tabProps }>Search</Tab>
@@ -61,7 +61,7 @@ const CodeEditorSideBar = ({ onFileSelect, data, monaco }: Props) => {
             <CodeEditorFileExplorer data={ data } onFileSelect={ onFileSelect }/>
           </TabPanel>
           <TabPanel p={ 0 }>
-            <CodeEditorSearch data={ data } onFileSelect={ onFileSelect } monaco={ monaco }/>
+            <CodeEditorSearch data={ data } onFileSelect={ onFileSelect } monaco={ monaco } isInputStuck={ isStuck }/>
           </TabPanel>
         </TabPanels>
       </Tabs>

ui/shared/monaco/CoderEditorCollapseButton.tsx

-import { Tooltip, Box } from '@chakra-ui/react';
+import { Tooltip, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
@@ -9,18 +9,25 @@ interface Props {
 }
 
 const CoderEditorCollapseButton = ({ onClick, label, isDisabled, isCollapsed }: Props) => {
+  const hoverBgColor = useColorModeValue('rgba(184, 184, 184, 0.31)', 'rgba(90, 93, 94, 0.31)');
   return (
     <Tooltip label={ label } isDisabled={ isDisabled }>
       <Box
         position="absolute"
-        right={ 3 }
-        top={ 2 }
+        right="12px"
+        top="8px"
         zIndex="sticky1"
         className={ isCollapsed ? 'codicon codicon-search-expand-results' : 'codicon codicon-collapse-all' }
         opacity={ isDisabled ? 0.6 : 1 }
+        boxSize="20px"
+        p="2px"
+        borderRadius="sm"
         _before={{
           content: isCollapsed ? '"\\eb95"' : '"\\eac5"',
         }}
+        _hover={{
+          bgColor: hoverBgColor,
+        }}
         onClick={ onClick }
         cursor="pointer"
       />