more colors for dark mode fixes

theme/components/Table.ts

@@ -11,7 +11,7 @@ const variantSimple: PartsStyleFunction<typeof parts> = (props) => {
   return {
     th: {
       border: 0,
-      color: mode('gray.600', 'gray.50')(props),
+      color: mode('gray.600', 'whiteAlpha.700')(props),
       ...transitionProps,
     },
     thead: {

theme/utils/getOutlinedFieldStyles.ts

@@ -5,14 +5,14 @@ import getDefaultFormColors from './getDefaultFormColors';
 import getDefaultTransitionProps from './getDefaultTransitionProps';
 
 export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
-  const { theme } = props;
+  const { theme, borderColor } = props;
   const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
   const transitionProps = getDefaultTransitionProps();
 
   return {
     border: '2px solid',
-    bg: 'inherit',
     // filled input
+    backgroundColor: 'transparent',
     borderColor: mode('gray.300', 'gray.600')(props),
     ...transitionProps,
     _hover: {
@@ -24,7 +24,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
     },
     _disabled: {
       opacity: 1,
-      background: mode('gray.200', 'whiteAlpha.400')(props),
+      backgroundColor: mode('gray.200', 'whiteAlpha.200')(props),
       border: 'none',
       cursor: 'not-allowed',
     },
@@ -41,7 +41,7 @@ export default function getOutlinedFieldStyles(props: StyleFunctionProps) {
       color: mode('blackAlpha.600', 'whiteAlpha.600')(props),
     },
     // not filled input
-    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: mode('gray.100', 'gray.700')(props) },
+    ':placeholder-shown:not(:focus-visible):not(:hover)': { borderColor: borderColor || mode('gray.100', 'gray.700')(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/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -29,7 +29,7 @@ const NAME_MAX_LENGTH = 100;
 const ApiKeyForm: React.FC<Props> = ({ data, onClose }) => {
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
   const queryClient = useQueryClient();
-  const formBackgroundColor = useColorModeValue('white', 'gray.800');
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   useEffect(() => {
     setValue('token', data?.api_key || '');

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -48,7 +48,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose }) => {
     return fetch(`/api/account/custom-abis/${ data.id }`, { method: 'PUT', body });
   };
 
-  const formBackgroundColor = useColorModeValue('white', 'gray.800');
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   const mutation = useMutation(customAbiKey, {
     onSuccess: async(data) => {

ui/header/SearchBar.tsx

@@ -30,6 +30,7 @@ const SearchBar = () => {
           placeholder="Search by addresses / transactions / block / token... "
           ml="1px"
           onChange={ handleChange }
+          borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
         />
       </InputGroup>
     </form>

ui/navigation/networkMenu/NetworkMenu.tsx

@@ -19,7 +19,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
             as={ networksIcon }
             width="16px"
             height="16px"
-            color={ useColorModeValue('gray.500', 'white') }
+            color={ useColorModeValue('gray.500', 'gray.400') }
             _hover={{ color: 'blue.400' }}
             marginLeft={ isCollapsed ? '0px' : '27px' }
             cursor="pointer"

ui/privateTags/AddressModal/AddressForm.tsx

@@ -29,7 +29,7 @@ type Inputs = {
 const AddressForm: React.FC<Props> = ({ data, onClose }) => {
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
-  const formBackgroundColor = useColorModeValue('white', 'gray.800');
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   useEffect(() => {
     setValue('address', data?.address_hash || '');

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -29,7 +29,7 @@ type Inputs = {
 const TransactionForm: React.FC<Props> = ({ data, onClose }) => {
   const [ pending, setPending ] = useState(false);
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
-  const formBackgroundColor = useColorModeValue('white', 'gray.800');
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   useEffect(() => {
     setValue('transaction', data?.transaction_hash || '');

ui/watchlist/AddressModal/AddressForm.tsx

@@ -31,7 +31,7 @@ type Inputs = {
 
 const AddressForm: React.FC<Props> = ({ data }) => {
   const { control, handleSubmit, formState: { errors }, setValue } = useForm<Inputs>();
-  const formBackgroundColor = useColorModeValue('white', 'gray.800');
+  const formBackgroundColor = useColorModeValue('white', 'gray.900');
 
   useEffect(() => {
     setValue('address', data?.address || '');