diff --git a/src/components/Search/SearchBar/index.tsx b/src/components/Search/SearchBar/index.tsx
index 9c900e1b6..1e12ee197 100644
--- a/src/components/Search/SearchBar/index.tsx
+++ b/src/components/Search/SearchBar/index.tsx
@@ -1,5 +1,5 @@
-import { SearchButton } from './searchButton';
-import React, { useState } from 'react';
+import { SearchBarMobile } from './searchBarMobile';
+import React from 'react';
import { Collection } from 'types/collection';
import { EnteFile } from 'types/file';
@@ -8,23 +8,31 @@ import SearchInput from './searchInput';
import { UpdateSearch } from 'types/search';
interface Props {
- isFirstFetch: boolean;
updateSearch: UpdateSearch;
collections: Collection[];
setActiveCollection: (id: number) => void;
files: EnteFile[];
+ isInSearchMode: boolean;
+ setIsInSearchMode: (v: boolean) => void;
}
-export default function SearchBar({ isFirstFetch, ...props }: Props) {
- const [isOpen, setIsOpen] = useState(false);
- const showSearchInput = () => setIsOpen(true);
+
+export default function SearchBar({
+ setIsInSearchMode,
+ isInSearchMode,
+ ...props
+}: Props) {
+ const showSearchInput = () => setIsInSearchMode(true);
return (
-
-
+
);
diff --git a/src/components/Search/SearchBar/searchBarMobile.tsx b/src/components/Search/SearchBar/searchBarMobile.tsx
new file mode 100644
index 000000000..acc372d48
--- /dev/null
+++ b/src/components/Search/SearchBar/searchBarMobile.tsx
@@ -0,0 +1,22 @@
+import { IconButton } from '@mui/material';
+import { FluidContainer } from 'components/Container';
+import { EnteLogo } from 'components/EnteLogo';
+import React from 'react';
+import { SearchMobileBox } from './styledComponents';
+import SearchIcon from '@mui/icons-material/Search';
+
+export function SearchBarMobile({ show, showSearchInput }) {
+ if (!show) {
+ return <>>;
+ }
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Search/SearchBar/searchButton.tsx b/src/components/Search/SearchBar/searchButton.tsx
deleted file mode 100644
index 25f8d4459..000000000
--- a/src/components/Search/SearchBar/searchButton.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import SearchIcon from '@mui/icons-material/Search';
-import { IconButton } from '@mui/material';
-import React from 'react';
-import { SearchButtonWrapper } from './styledComponents';
-
-export function SearchButton({ isFirstFetch, show, openSearchInput }) {
- if (!show) {
- return <>>;
- }
- return (
-
- !isFirstFetch && openSearchInput()}>
-
-
-
- );
-}
diff --git a/src/components/Search/SearchBar/searchInput/index.tsx b/src/components/Search/SearchBar/searchInput/index.tsx
index 3c4eb10ff..a3ec32e9a 100644
--- a/src/components/Search/SearchBar/searchInput/index.tsx
+++ b/src/components/Search/SearchBar/searchInput/index.tsx
@@ -12,7 +12,6 @@ import {
} from 'types/search';
import constants from 'utils/strings/constants';
import { ValueContainerWithIcon } from './valueContainerWithIcon';
-import { SearchInputWrapper } from './styledComponents';
import { SelectStyles } from '../../../../styles/search';
import AsyncSelect from 'react-select/async';
import CloseIcon from '@mui/icons-material/Close';
@@ -20,11 +19,12 @@ import { UpdateSearch } from 'types/search';
import { EnteFile } from 'types/file';
import { Collection } from 'types/collection';
import { OptionWithInfo } from './optionWithInfo';
+import { SearchInputWrapper } from '../styledComponents';
interface Iprops {
isOpen: boolean;
updateSearch: UpdateSearch;
- setOpen: (value: boolean) => void;
+ setIsOpen: (value: boolean) => void;
files: EnteFile[];
collections: Collection[];
setActiveCollection: (id: number) => void;
@@ -46,7 +46,7 @@ export default function SearchInput(props: Iprops) {
setTimeout(() => {
appContext.finishLoading();
}, 10);
- props.setOpen(false);
+ props.setIsOpen(false);
setValue(null);
}
};
@@ -66,13 +66,13 @@ export default function SearchInput(props: Iprops) {
search = {
date: selectedOption.value as DateValue,
};
- props.setOpen(true);
+ props.setIsOpen(true);
break;
case SuggestionType.LOCATION:
search = {
location: selectedOption.value as Bbox,
};
- props.setOpen(true);
+ props.setIsOpen(true);
break;
case SuggestionType.COLLECTION:
search = { collection: selectedOption.value as number };
diff --git a/src/components/Search/SearchBar/searchInput/styledComponents.tsx b/src/components/Search/SearchBar/searchInput/styledComponents.tsx
deleted file mode 100644
index f581f501d..000000000
--- a/src/components/Search/SearchBar/searchInput/styledComponents.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CenteredFlex } from 'components/Container';
-import { css, styled } from '@mui/material';
-
-export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
- max-width: 484px;
- margin: auto;
- ${(props) =>
- !props.isOpen &&
- css`
- @media (max-width: 624px) {
- display: none;
- }
- `}
-`;
diff --git a/src/components/Search/SearchBar/styledComponents.tsx b/src/components/Search/SearchBar/styledComponents.tsx
index 664a07949..7e9949e55 100644
--- a/src/components/Search/SearchBar/styledComponents.tsx
+++ b/src/components/Search/SearchBar/styledComponents.tsx
@@ -1,18 +1,33 @@
-import { FlexWrapper, FluidContainer } from 'components/Container';
-import { styled } from '@mui/material';
+import {
+ CenteredFlex,
+ FlexWrapper,
+ FluidContainer,
+} from 'components/Container';
+import { css, styled } from '@mui/material';
import { SpecialPadding } from 'styles/SpecialPadding';
export const SearchBarWrapper = styled(FlexWrapper)`
${SpecialPadding}
`;
-export const SearchButtonWrapper = styled(FluidContainer)`
+export const SearchMobileBox = styled(FluidContainer)`
display: flex;
cursor: pointer;
align-items: center;
justify-content: flex-end;
- min-height: 64px;
- @media (min-width: 624px) {
+ @media (min-width: 625px) {
display: none;
}
`;
+
+export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
+ max-width: 484px;
+ margin: auto;
+ ${(props) =>
+ !props.isOpen &&
+ css`
+ @media (max-width: 624px) {
+ display: none;
+ }
+ `}
+`;
diff --git a/src/components/pages/gallery/Navbar.tsx b/src/components/pages/gallery/Navbar.tsx
index 1e83db503..916835786 100644
--- a/src/components/pages/gallery/Navbar.tsx
+++ b/src/components/pages/gallery/Navbar.tsx
@@ -15,6 +15,7 @@ interface Iprops {
isFirstFetch: boolean;
openUploader: () => void;
isInSearchMode: boolean;
+ setIsInSearchMode: (v: boolean) => void;
collections: Collection[];
files: EnteFile[];
setActiveCollection: (id: number) => void;
@@ -29,6 +30,7 @@ export function GalleryNavbar({
files,
setActiveCollection,
updateSearch,
+ setIsInSearchMode,
}: Iprops) {
return (
@@ -40,7 +42,8 @@ export function GalleryNavbar({
) : (