Dim out page to focus on a search (#1711)

* Dim out page to focus on a search

Fixes #1682

* add backdrop to search results page

* refactoring

configs/envs/.env.eth

@@ -46,6 +46,11 @@ NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 NEXT_PUBLIC_AD_BANNER_PROVIDER=hype
 NEXT_PUBLIC_SAFE_TX_SERVICE_URL=https://safe-transaction-mainnet.safe.global
 NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
+NEXT_PUBLIC_MARKETPLACE_ENABLED=true
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-categories/default.json
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
+NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true

ui/searchResults/SearchResultsInput.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import { getRecentSearchKeywords } from 'lib/recentSearchKeywords';
+import SearchBarBackdrop from 'ui/snippets/searchBar/SearchBarBackdrop';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import SearchBarRecentKeywords from 'ui/snippets/searchBar/SearchBarRecentKeywords';
 
@@ -66,9 +67,12 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
     };
   }, [ calculateMenuWidth ]);
 
+  const isSuggestOpen = isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0;
+
   return (
+    <>
       <Popover
-      isOpen={ isOpen && recentSearchKeywords.length > 0 && searchTerm.trim().length === 0 }
+        isOpen={ isSuggestOpen }
         autoFocus={ false }
         onClose={ onClose }
         placement="bottom-start"
@@ -85,6 +89,7 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
             onHide={ handelHide }
             onClear={ handleClear }
             value={ searchTerm }
+            isSuggestOpen={ isSuggestOpen }
           />
         </PopoverTrigger>
         <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
@@ -93,6 +98,8 @@ const SearchResultsInput = ({ searchTerm, handleSubmit, handleSearchTermChange }
           </PopoverBody>
         </PopoverContent>
       </Popover>
+      <SearchBarBackdrop isOpen={ isSuggestOpen }/>
+    </>
   );
 };
 

ui/snippets/searchBar/SearchBar.tsx

-import { Box, Portal, Popover, PopoverTrigger, PopoverContent, PopoverBody, useDisclosure, PopoverFooter, useOutsideClick } from '@chakra-ui/react';
+import {
+  Box,
+  Portal,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  PopoverFooter,
+  useDisclosure,
+  useOutsideClick,
+} from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
@@ -12,6 +22,7 @@ import * as mixpanel from 'lib/mixpanel/index';
 import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import LinkInternal from 'ui/shared/LinkInternal';
 
+import SearchBarBackdrop from './SearchBarBackdrop';
 import SearchBarInput from './SearchBarInput';
 import SearchBarRecentKeywords from './SearchBarRecentKeywords';
 import SearchBarSuggest from './SearchBarSuggest/SearchBarSuggest';
@@ -106,6 +117,7 @@ const SearchBar = ({ isHomepage }: Props) => {
   }, [ calculateMenuWidth ]);
 
   return (
+    <>
       <Popover
         isOpen={ isOpen && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
         autoFocus={ false }
@@ -124,6 +136,7 @@ const SearchBar = ({ isHomepage }: Props) => {
             onClear={ handleClear }
             isHomepage={ isHomepage }
             value={ searchTerm }
+            isSuggestOpen={ isOpen }
           />
         </PopoverTrigger>
         <Portal>
@@ -169,6 +182,8 @@ const SearchBar = ({ isHomepage }: Props) => {
           </PopoverContent>
         </Portal>
       </Popover>
+      <SearchBarBackdrop isOpen={ isOpen }/>
+    </>
   );
 };
 

ui/snippets/searchBar/SearchBarBackdrop.tsx

+import { Box, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  isOpen: boolean;
+}
+
+const SearchBarBackdrop = ({ isOpen }: Props) => {
+  const backdropBgColor = useColorModeValue('blackAlpha.400', 'blackAlpha.600');
+
+  return (
+    <Box
+      position="fixed"
+      top={ 0 }
+      left={ 0 }
+      w="100vw"
+      h="100vh"
+      bgColor={ backdropBgColor }
+      zIndex="overlay"
+      display={{ base: 'none', lg: isOpen ? 'block' : 'none' }}
+    />
+  );
+};
+
+export default React.memo(SearchBarBackdrop);

ui/snippets/searchBar/SearchBarInput.tsx

@@ -16,10 +16,14 @@ interface Props {
   onHide?: () => void;
   onClear: () => void;
   isHomepage?: boolean;
+  isSuggestOpen?: boolean;
   value: string;
 }
 
-const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHide, onClear, value }: Props, ref: React.ForwardedRef<HTMLFormElement>) => {
+const SearchBarInput = (
+  { onChange, onSubmit, isHomepage, isSuggestOpen, onFocus, onBlur, onHide, onClear, value }: Props,
+  ref: React.ForwardedRef<HTMLFormElement>,
+) => {
   const innerRef = React.useRef<HTMLFormElement>(null);
   React.useImperativeHandle(ref, () => innerRef.current as HTMLFormElement, []);
   const [ isSticky, setIsSticky ] = React.useState(false);
@@ -71,10 +75,10 @@ const SearchBarInput = ({ onChange, onSubmit, isHomepage, onFocus, onBlur, onHid
       w="100%"
       backgroundColor={ bgColor }
       borderRadius={{ base: isHomepage ? 'base' : 'none', lg: 'base' }}
-      position={{ base: isHomepage ? 'static' : 'absolute', lg: 'static' }}
+      position={{ base: isHomepage ? 'static' : 'absolute', lg: 'relative' }}
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
       left="0"
-      zIndex={{ base: isHomepage ? 'auto' : '-1', lg: 'auto' }}
+      zIndex={{ base: isHomepage ? 'auto' : '-1', lg: isSuggestOpen ? 'popover' : 'auto' }}
       paddingX={{ base: isHomepage ? 0 : 4, lg: 0 }}
       paddingTop={{ base: isHomepage ? 0 : 1, lg: 0 }}
       paddingBottom={{ base: isHomepage ? 0 : 2, lg: 0 }}