From 3f2317a67c7211593477224e879322a8d2c66e1c Mon Sep 17 00:00:00 2001
From: Indraneel Purohit <indraneel.purohit@twosigma.com>
Date: Tue, 9 Jul 2024 15:13:23 -0400
Subject: [PATCH 1/4] add search box to home page

---
 web-app/src/app/screens/Home.tsx | 56 +++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/web-app/src/app/screens/Home.tsx b/web-app/src/app/screens/Home.tsx
index 8d1ee0282..a80d97091 100644
--- a/web-app/src/app/screens/Home.tsx
+++ b/web-app/src/app/screens/Home.tsx
@@ -4,12 +4,20 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import '../styles/SignUp.css';
-import { Button, Grid } from '@mui/material';
+import {
+  Button,
+  Divider,
+  Grid,
+  InputAdornment,
+  TextField,
+} from '@mui/material';
 import {
   Search,
   CheckCircleOutlineOutlined,
   PowerOutlined,
 } from '@mui/icons-material';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 interface ActionBoxProps {
   IconComponent: React.ElementType;
@@ -41,32 +49,34 @@ const ActionBox = ({
 );
 
 export default function Home(): React.ReactElement {
-  // const [searchInputValue, setSearchInputValue] = useState('');
-  // const navigate = useNavigate();
+  const [searchInputValue, setSearchInputValue] = useState('');
+  const navigate = useNavigate();
 
-  // const handleSearch = (): void => {
-  //   if (searchInputValue.trim().length > 0) {
-  //     navigate(`/feeds?q=${encodeURIComponent(searchInputValue)}`);
-  //   }
-  // };
+  const handleSearch = (): void => {
+    if (searchInputValue.trim().length > 0) {
+      navigate(`/feeds?q=${encodeURIComponent(searchInputValue)}`);
+    }
+  };
 
-  // const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-  //   if (event.key === 'Enter') {
-  //     handleSearch();
-  //   }
-  // };
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+  ): void => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
 
   return (
-    <Container component='main' sx={{ width: '100vw', m: 0 }}>
+    <Container component='main'>
       <CssBaseline />
       <Box
         sx={{
           mt: 12,
-          px: 6,
           display: 'flex',
           flexDirection: 'column',
-          width: '100vw',
         }}
+        margin={{ xs: '80px 20px', m: '80px auto' }}
+        maxWidth={{ xs: '100%', m: '1600px' }}
       >
         <Typography
           sx={{
@@ -94,7 +104,7 @@ export default function Home(): React.ReactElement {
           GTFS feeds from <span style={{ color: '#3859FA' }}>70</span>{' '}
           countries.
         </Typography>
-        {/* <Box
+        <Box
           sx={{
             display: 'flex',
             justifyContent: 'center',
@@ -132,7 +142,7 @@ export default function Home(): React.ReactElement {
           >
             Search
           </Button>
-        </Box> */}
+        </Box>
         <Box
           sx={{
             display: 'flex',
@@ -141,7 +151,7 @@ export default function Home(): React.ReactElement {
             position: 'relative',
           }}
         >
-          {/* <Divider
+          <Divider
             sx={{
               flexGrow: 1,
               backgroundColor: 'text.primary',
@@ -153,20 +163,20 @@ export default function Home(): React.ReactElement {
             variant='body1'
           >
             or
-          </Typography> */}
-          {/* <Divider
+          </Typography>
+          <Divider
             sx={{
               flexGrow: 1,
               backgroundColor: 'text.primary',
               mx: '16',
             }}
             variant='middle'
-          /> */}
+          />
         </Box>
         <Box
           sx={{
             display: 'flex',
-            justifyContent: 'center',
+            justifyContent: 'space-around',
           }}
         >
           <ActionBox

From 2f6b4ab2b4a34cfc4927bfcd712cf16b04649c51 Mon Sep 17 00:00:00 2001
From: Indraneel Purohit <indraneel.purohit@twosigma.com>
Date: Wed, 10 Jul 2024 10:32:45 -0400
Subject: [PATCH 2/4] empty search should return all results

---
 web-app/src/app/screens/Home.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/web-app/src/app/screens/Home.tsx b/web-app/src/app/screens/Home.tsx
index a80d97091..f578a775f 100644
--- a/web-app/src/app/screens/Home.tsx
+++ b/web-app/src/app/screens/Home.tsx
@@ -53,9 +53,7 @@ export default function Home(): React.ReactElement {
   const navigate = useNavigate();
 
   const handleSearch = (): void => {
-    if (searchInputValue.trim().length > 0) {
-      navigate(`/feeds?q=${encodeURIComponent(searchInputValue)}`);
-    }
+    navigate(`/feeds?q=${encodeURIComponent(searchInputValue)}`);
   };
 
   const handleKeyDown = (

From 672b39ab8669f934dbd960d4575382975358c089 Mon Sep 17 00:00:00 2001
From: Indraneel Purohit <indraneel.purohit@twosigma.com>
Date: Wed, 10 Jul 2024 10:33:00 -0400
Subject: [PATCH 3/4] fix search button styling

- make it taller (55px)
- remove drop shadow
---
 web-app/src/app/screens/Home.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web-app/src/app/screens/Home.tsx b/web-app/src/app/screens/Home.tsx
index f578a775f..fb0e836ad 100644
--- a/web-app/src/app/screens/Home.tsx
+++ b/web-app/src/app/screens/Home.tsx
@@ -133,6 +133,8 @@ export default function Home(): React.ReactElement {
               mt: 6,
               py: 1.5,
               ml: 1,
+              height: 55,
+              boxShadow: 0,
             }}
             variant='contained'
             color='primary'

From a68b5a98e25e459fda3d794d453a3965e6a369ee Mon Sep 17 00:00:00 2001
From: Indraneel Purohit <indraneel.purohit@twosigma.com>
Date: Wed, 10 Jul 2024 10:41:52 -0400
Subject: [PATCH 4/4] change search placeholder text

---
 web-app/src/app/screens/Home.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/src/app/screens/Home.tsx b/web-app/src/app/screens/Home.tsx
index fb0e836ad..0c1486779 100644
--- a/web-app/src/app/screens/Home.tsx
+++ b/web-app/src/app/screens/Home.tsx
@@ -119,7 +119,7 @@ export default function Home(): React.ReactElement {
               setSearchInputValue(e.target.value);
             }}
             onKeyDown={handleKeyDown}
-            placeholder='ex. Boston'
+            placeholder='e.g. "New York" or "Carris Metropolitana"'
             InputProps={{
               startAdornment: (
                 <InputAdornment position={'start'}>