search bar and table tweaks

theme/components/Input.ts

@@ -33,8 +33,9 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
     field: getOutlinedFieldStyles(props),
     addon: {
       border: '2px solid',
-      borderColor: mode('gray.100', 'whiteAlpha.200')(props),
-      bg: mode('gray.100', 'whiteAlpha.200')(props),
+      borderColor: 'transparent',
+      bg: mode('blackAlpha.100', 'whiteAlpha.200')(props),
+      color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
       ...transitionProps,
     },
   };

theme/components/Table.ts

@@ -11,15 +11,15 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
   return {
     th: {
       border: 0,
-      color: mode('gray.500', 'gray.50')(props),
+      color: mode('gray.600', 'gray.50')(props),
       ...transitionProps,
     },
     thead: {
-      backgroundColor: mode('gray.50', 'whiteAlpha.200')(props),
+      backgroundColor: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
     td: {
-      borderColor: mode('gray.200', 'whiteAlpha.200')(props),
+      borderColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
   };

theme/utils/getOutlinedFieldStyles.ts

@@ -36,7 +36,10 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       borderColor: getColor(theme, fc),
       boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
     },
-    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('gray.100', 'whiteAlpha.200')(props) },
+    _placeholder: {
+      color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
+    },
+    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('blackAlpha.100', 'whiteAlpha.200')(props) },
     ':-webkit-autofill': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:hover': { transition: 'background-color 5000s ease-in-out 0s' },
     ':-webkit-autofill:focus': { transition: 'background-color 5000s ease-in-out 0s' },

ui/header/Header.tsx

@@ -20,9 +20,9 @@ const Header = () => {
       <InputGroup>
         <InputLeftAddon w="111px">All filters</InputLeftAddon>
         <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
-          <SearchIcon w={ 5 } h={ 5 } color="gray.500"/>
+          <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
-        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions / block / token... "/>
+        <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions / block / token... " ml="1px"/>
       </InputGroup>
       <ColorModeToggler/>
       <Center minWidth="50px" width="50px" height="50px" bg={ useColorModeValue('blackAlpha.100', 'white') } borderRadius="50%" overflow="hidden">