SearchBox: Redesign

zbycz · Jul 30, 2024 · fbe19f8 · fbe19f8
1 parent f60b499
commit fbe19f8
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 33 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -70,7 +70,7 @@ const useUpdateViewFromHash = () => {
 
 const IndexWithProviders = () => {
   const isMobileMode = useMobileMode();
-  const { feature, featureShown } = useFeatureContext();
+  const { feature, featureShown, homepageShown } = useFeatureContext();
   const router = useRouter();
   useUpdateViewFromFeature();
   usePersistMapView();
@@ -81,10 +81,20 @@ const IndexWithProviders = () => {
   const isClimbingDialogShown = router.query.all?.[2] === 'climbing';
   const photo = router.query.all?.[3];
 
+  const isMyTicksVisible = router.pathname === '/my-ticks';
+  const isInstallVisible = router.pathname === '/install';
+
+  const isSearchInPanelVisible =
+    (!featureShown &&
+      !isMyTicksVisible &&
+      !isInstallVisible &&
+      !homepageShown) ||
+    isMobileMode;
+
   return (
     <>
       <Loading />
-      <SearchBox />
+
       {featureShown && !isMobileMode && <FeaturePanel />}
       {featureShown && isMobileMode && <FeaturePanelInDrawer />}
       {isClimbingDialogShown && (
@@ -93,10 +103,11 @@ const IndexWithProviders = () => {
         </ClimbingContextProvider>
       )}
       <HomepagePanel />
-      {router.pathname === '/my-ticks' && <MyTicksPanel />}
-      {router.pathname === '/install' && <InstallDialog />}
+      {isMyTicksVisible && <MyTicksPanel />}
+      {isInstallVisible && <InstallDialog />}
       <Map />
       <TitleAndMetaTags />
+      <SearchBox isSearchInPanelVisible={isSearchInPanelVisible} />
     </>
   );
 };

diff --git a/src/components/FeaturePanel/FeaturePanel.tsx b/src/components/FeaturePanel/FeaturePanel.tsx
@@ -4,11 +4,9 @@ import { PanelScrollbars, PanelWrapper } from '../utils/PanelHelpers';
 import { FeaturePanelInner } from './FeaturePanelInner';
 
 export const FeaturePanel = () => (
-  <>
-    <PanelWrapper>
-      <PanelScrollbars>
-        <FeaturePanelInner />
-      </PanelScrollbars>
-    </PanelWrapper>
-  </>
+  <PanelWrapper>
+    <PanelScrollbars>
+      <FeaturePanelInner />
+    </PanelScrollbars>
+  </PanelWrapper>
 );
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -1,13 +1,13 @@
 import React, { useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import SearchIcon from '@mui/icons-material/Search';
 import { CircularProgress, IconButton, Paper } from '@mui/material';
 import Router from 'next/router';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { AutocompleteInput } from './AutocompleteInput';
 import { t } from '../../services/intl';
 import { ClosePanelButton } from '../utils/ClosePanelButton';
-import { isDesktop, useMobileMode } from '../helpers';
+import { isDesktop, isDesktopResolution, useMobileMode } from '../helpers';
 import { SEARCH_BOX_HEIGHT } from './consts';
 import { useInputValueState } from './options/geocoder';
 import { useOptions } from './useOptions';
@@ -17,31 +17,36 @@ import { UserMenu } from '../Map/TopMenu/UserMenu';
 const TopPanel = styled.div<{ $isMobileMode: boolean }>`
   position: absolute;
   height: ${SEARCH_BOX_HEIGHT}px;
-  ${({ $isMobileMode }) =>
-    !$isMobileMode &&
-    css`
-      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
-      background-color: ${({ theme }) => theme.palette.background.searchBox};
-    `}
-
   padding: 8px;
   box-sizing: border-box;
 
-  z-index: 1;
+  top: 0;
+  z-index: 10;
+  @media ${isDesktopResolution} {
+    z-index: 1100;
+  }
 
   width: 100%;
   @media ${isDesktop} {
     width: 410px;
   }
 `;
 
-const StyledPaper = styled(Paper)`
+const StyledPaper = styled(Paper)<{ $isSearchInPanelVisible: boolean }>`
   padding: 2px 4px;
   display: flex;
   align-items: center;
-  background-color: ${({ theme }) => theme.palette.background.searchInput};
+  background-color: ${({ $isSearchInPanelVisible, theme }) =>
+    $isSearchInPanelVisible
+      ? theme.palette.background.searchInput
+      : theme.palette.background.searchInputPanel};
   -webkit-backdrop-filter: blur(35px);
   backdrop-filter: blur(35px);
+  transition: box-shadow 0s !important;
+  box-shadow: ${({ $isSearchInPanelVisible }) =>
+    $isSearchInPanelVisible
+      ? '0 0 20px rgba(0, 0, 0, 0.4)'
+      : 'none'} !important;
 
   .MuiAutocomplete-root {
     flex: 1;
@@ -71,7 +76,7 @@ const useOnClosePanel = () => {
   };
 };
 
-const SearchBox = () => {
+const SearchBox = ({ isSearchInPanelVisible = false }) => {
   const isMobileMode = useMobileMode();
   const { featureShown } = useFeatureContext();
   const { inputValue, setInputValue } = useInputValueState();
@@ -84,7 +89,11 @@ const SearchBox = () => {
 
   return (
     <TopPanel $isMobileMode={isMobileMode}>
-      <StyledPaper elevation={1} ref={autocompleteRef}>
+      <StyledPaper
+        $isSearchInPanelVisible={isSearchInPanelVisible}
+        elevation={1}
+        ref={autocompleteRef}
+      >
         <SearchIconButton disabled aria-label={t('searchbox.placeholder')}>
           <SearchIcon />
         </SearchIconButton>

diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx
@@ -9,19 +9,27 @@ import { SEARCH_BOX_HEIGHT } from '../SearchBox/consts';
 // custom scrollbar
 // better: https://github.com/rommguy/react-custom-scroll
 // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger)
-export const PanelWrapper = styled.div`
+const Columns = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const SearchBoxBackground = styled.div`
+  height: ${SEARCH_BOX_HEIGHT}px;
+  background-color: ${({ theme }) => theme.palette.background.searchBox};
+  position: relative;
+  z-index: 1;
+`;
+const Container = styled.div`
   position: absolute;
   left: 0;
-  top: ${SEARCH_BOX_HEIGHT}px;
+  top: 0;
   bottom: 0;
   background: ${({ theme }) => theme.palette.background.paper};
   color: ${({ theme }) => theme.palette.text.primary};
   overflow: hidden;
   z-index: 1100;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-
-  display: flex;
-  flex-direction: column;
 
   width: 100%;
   @media ${isDesktop} {
@@ -36,6 +44,13 @@ export const PanelWrapper = styled.div`
   }
 `;
 
+export const PanelWrapper = ({ children }) => (
+  <Container>
+    <SearchBoxBackground />
+    <Columns>{children}</Columns>
+  </Container>
+);
+
 export const PanelScrollbars = ({ children }) => {
   const theme = useTheme();
 

diff --git a/src/helpers/theme.tsx b/src/helpers/theme.tsx
@@ -27,7 +27,8 @@ const lightTheme = createTheme({
       paper: '#fafafa',
       hover: '#f2f3f2',
       searchBox: '#eb5757',
-      searchInput: 'rgba(255,255,255,0.7)',
+      searchInput: 'rgba(255,255,255,0.6)',
+      searchInputPanel: 'rgba(255,255,255,0.8)',
     },
     invertFilter: 'invert(0)',
     climbing: {
@@ -67,7 +68,8 @@ const darkTheme = createTheme({
       paper: '#424242',
       hover: grey['700'],
       searchBox: '#963838',
-      searchInput: 'rgba(0,0,0,0.6)',
+      searchInput: 'rgba(0,0,0,0.5)',
+      searchInputPanel: 'rgba(0,0,0,0.7)',
     },
     invertFilter: 'invert(1)',
     climbing: {

diff --git a/types.d.ts b/types.d.ts
@@ -40,6 +40,7 @@ declare module '@mui/material/styles' {
     hover?: string;
     searchBox?: string;
     searchInput?: string;
+    searchInputPanel?: string;
   }
 
   interface Theme {