search bar styles

theme/components/Input.ts

@@ -8,6 +8,14 @@ import getDefaultTransitionProps from '../utils/getDefaultTransitionProps';
 import getOutlinedFieldStyles from '../utils/getOutlinedFieldStyles';
 
 const sizes: Record<string, SystemStyleObject> = {
+  sm: {
+    fontSize: 'md',
+    lineHeight: '24px',
+    px: '8px',
+    py: '12px',
+    h: '40px',
+    borderRadius: 'base',
+  },
   md: {
     fontSize: 'md',
     lineHeight: '20px',
@@ -43,6 +51,10 @@ const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
 
 const Input: ComponentStyleConfig = {
   sizes: {
+    sm: {
+      field: sizes.sm,
+      addon: sizes.sm,
+    },
     md: {
       field: sizes.md,
       addon: sizes.md,

ui/header/Header.tsx

-import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
+import { HStack, VStack, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -7,7 +7,7 @@ import NetworkLogo from 'ui/navigation/NetworkLogo';
 import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 import ProfileMenu from './ProfileMenu';
-import SearchBar from './SearchBar';
+import SearchBar from './searchBar/SearchBar';
 
 const Header = () => {
   const isMobile = useIsMobile();
@@ -15,22 +15,27 @@ const Header = () => {
 
   if (isMobile) {
     return (
-      <Flex
+      <VStack
         as="header"
-        width="100%"
-        alignItems="center"
-        justifyContent="space-between"
         position="fixed"
-        bgColor={ bgColor }
         top={ 0 }
         left={ 0 }
         paddingX={ 4 }
-        paddingTop={ 2 }
+        paddingY={ 2 }
+        bgColor={ bgColor }
+        width="100%"
       >
-        <Burger/>
-        <NetworkLogo/>
-        <ProfileMenu/>
-      </Flex>
+        <Flex
+          width="100%"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Burger/>
+          <NetworkLogo/>
+          <ProfileMenu/>
+        </Flex>
+        <SearchBar/>
+      </VStack>
     );
   }
 

ui/header/SearchBar.tsx → ui/header/searchBar/SearchBar.tsx

-import { SearchIcon } from '@chakra-ui/icons';
-import { InputGroup, Input, InputLeftAddon, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent, FormEvent } from 'react';
 import React from 'react';
 
 import useBasePath from 'lib/hooks/useBasePath';
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+import SearchBarDesktop from './SearchBarDesktop';
+import SearchBarMobile from './SearchBarMobile';
 
 const SearchBar = () => {
   const [ value, setValue ] = React.useState('');
   const basePath = useBasePath();
+  const isMobile = useIsMobile();
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -18,21 +21,17 @@ const SearchBar = () => {
     window.location.assign(`https://blockscout.com${ basePath }/search-results?q=${ value }`);
   }, [ value, basePath ]);
 
+  if (isMobile) {
+    return (
+      <form noValidate onSubmit={ handleSubmit }>
+        <SearchBarMobile onChange={ handleChange }/>
+      </form>
+    );
+  }
+
   return (
     <form noValidate onSubmit={ handleSubmit }>
-      <InputGroup>
-        <InputLeftAddon w="111px">All filters</InputLeftAddon>
-        <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
-          <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
-        </InputLeftElement>
-        <Input
-          paddingInlineStart="50px"
-          placeholder="Search by addresses / transactions / block / token... "
-          ml="1px"
-          onChange={ handleChange }
-          borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
-        />
-      </InputGroup>
+      <SearchBarDesktop onChange={ handleChange }/>
     </form>
   );
 };

ui/header/searchBar/SearchBarDesktop.tsx

+import { SearchIcon } from '@chakra-ui/icons';
+import { InputGroup, Input, InputLeftAddon, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { ChangeEvent } from 'react';
+
+interface Props {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const SearchBarDesktop = ({ onChange }: Props) => {
+  return (
+    <InputGroup>
+      <InputLeftAddon w="111px">All filters</InputLeftAddon>
+      <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
+        <SearchIcon w={ 5 } h={ 5 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+      </InputLeftElement>
+      <Input
+        paddingInlineStart="50px"
+        placeholder="Search by addresses / transactions / block / token... "
+        ml="1px"
+        onChange={ onChange }
+        borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+      />
+    </InputGroup>
+  );
+};
+
+export default React.memo(SearchBarDesktop);

ui/header/searchBar/SearchBarMobile.tsx

+import { SearchIcon } from '@chakra-ui/icons';
+import { InputGroup, Input, InputLeftElement, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+import type { ChangeEvent } from 'react';
+
+interface Props {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const SearchBarMobile = ({ onChange }: Props) => {
+  return (
+    <InputGroup size="sm">
+      <InputLeftElement >
+        <SearchIcon w={ 4 } h={ 4 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
+      </InputLeftElement>
+      <Input
+        paddingInlineStart="38px"
+        placeholder="Search by addresses / ... "
+        ml="1px"
+        onChange={ onChange }
+        borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
+      />
+    </InputGroup>
+  );
+};
+
+export default React.memo(SearchBarMobile);

ui/shared/Page/Page.tsx

@@ -19,7 +19,7 @@ const Page = ({ children }: Props) => {
       alignItems="stretch"
     >
       <Navigation/>
-      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? 12 : 9 }>
+      <VStack width="100%" paddingX={ isMobile ? 4 : 8 } paddingTop={ isMobile ? '104px' : 9 }>
         <Header/>
         <Box
           as="main"