Hide footer search in mobile homepage

oasisprotocol · May 16, 2024 · f68eaf5 · f68eaf5
1 parent f45d139
commit f68eaf5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/app/components/AppendMobileSearch/index.tsx b/src/app/components/AppendMobileSearch/index.tsx
@@ -7,6 +7,7 @@ import { SearchScope } from '../../../types/searchScope'
 
 interface AppendMobileSearchProps {
   action?: ReactNode
+  enableMobileSearch: boolean
 }
 
 interface AppendMobileSearchLayoutProps {
@@ -41,6 +42,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
   scope,
   children,
   action,
+  enableMobileSearch,
 }) => {
   const { isMobile } = useScreenSize()
 
@@ -50,7 +52,7 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
 
       {action}
 
-      {isMobile && (
+      {isMobile && enableMobileSearch && (
         <SearchWrapper>
           <Search scope={scope} variant="expandable" />
         </SearchWrapper>

diff --git a/src/app/components/PageLayout/Footer.tsx b/src/app/components/PageLayout/Footer.tsx
@@ -12,11 +12,13 @@ import { SearchScope } from '../../../types/searchScope'
 import { api, github } from '../../utils/externalLinks'
 import { ReopenAnalyticsConsentButton } from 'app/components/AnalyticsConsent'
 
-const FooterBox = styled(Box)(({ theme }) => ({
+const FooterBox = styled(Box, {
+  shouldForwardProp: prop => prop !== 'enableMobileSearch',
+})<{ enableMobileSearch: boolean }>(({ theme, enableMobileSearch }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
-  padding: theme.spacing(5, 4),
+  padding: theme.spacing(5, enableMobileSearch ? 4 : 0),
   [theme.breakpoints.up('sm')]: {
     flex: '0 1 100%',
     padding: theme.spacing(5, 0),
@@ -44,9 +46,10 @@ const StyledTypography = styled(Typography)(() => ({
 interface FooterProps {
   scope?: SearchScope
   mobileSearchAction?: ReactNode
+  enableMobileSearch?: boolean
 }
 
-export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
+export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction, enableMobileSearch = true }) => {
   const theme = useTheme()
   const { t } = useTranslation()
   const { isMobile, isTablet } = useScreenSize()
@@ -56,9 +59,13 @@ export const Footer: FC<FooterProps> = ({ scope, mobileSearchAction }) => {
 
   return (
     <footer>
-      <FooterBox>
+      <FooterBox enableMobileSearch={enableMobileSearch}>
         {isTablet ? (
-          <AppendMobileSearch scope={scope} action={isMobile && mobileSearchAction}>
+          <AppendMobileSearch
+            scope={scope}
+            action={isMobile && mobileSearchAction}
+            enableMobileSearch={enableMobileSearch}
+          >
             <StyledTypography variant="footer">
               <Box sx={{ whiteSpace: 'nowrap' }}>{t('footer.mobileTitle')} |</Box>
               <Box sx={privacyPolicyLinkStyles}>

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -183,7 +183,7 @@ export const HomePage: FC = () => {
         </Content>
 
         <FooterStyled>
-          <Footer />
+          <Footer enableMobileSearch={false} />
         </FooterStyled>
       </HomepageLayout>
     </>