From c00c10301de2a42cbd73fd30c6495f3812bf2bfe Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Tue, 10 Sep 2024 14:43:02 +0530
Subject: [PATCH] MBox

---
 web/apps/photos/src/components/SearchBar.tsx | 38 +++++++-------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/web/apps/photos/src/components/SearchBar.tsx b/web/apps/photos/src/components/SearchBar.tsx
index 5f9a7b7177..b6d9638455 100644
--- a/web/apps/photos/src/components/SearchBar.tsx
+++ b/web/apps/photos/src/components/SearchBar.tsx
@@ -21,7 +21,6 @@ import { EnteFile } from "@/new/photos/types/file";
 import {
     CenteredFlex,
     FlexWrapper,
-    FluidContainer,
     FreeFlowText,
     Row,
     SpaceBetweenFlex,
@@ -96,6 +95,19 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     );
 };
 
+interface MobileSearchAreaProps {
+    /** Called when the user presses the search button. */
+    onSearch: () => void;
+}
+
+const MobileSearchArea: React.FC<MobileSearchAreaProps> = ({ onSearch }) => (
+    <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
+        <IconButton onClick={onSearch}>
+            <SearchIcon />
+        </IconButton>
+    </Box>
+);
+
 interface SearchInputProps {
     isOpen: boolean;
     setIsOpen: (value: boolean) => void;
@@ -483,27 +495,3 @@ const Caption = styled("span")`
 const VisibleInput = (props) => (
     <components.Input {...props} isHidden={false} />
 );
-
-interface MobileSearchAreaProps {
-    /** Called when the user presses the search button. */
-    onSearch: () => void;
-}
-
-const MobileSearchArea: React.FC<MobileSearchAreaProps> = ({ onSearch }) => {
-    return (
-        <SearchMobileBox>
-            <FluidContainer justifyContent="flex-end" ml={1.5}>
-                <IconButton onClick={onSearch}>
-                    <SearchIcon />
-                </IconButton>
-            </FluidContainer>
-        </SearchMobileBox>
-    );
-};
-
-const SearchMobileBox = styled(FluidContainer)`
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    justify-content: flex-end;
-`;