From 9c2df3a345d6815800f91aee2911a3eb48bc86fe Mon Sep 17 00:00:00 2001 From: CasperL1218 Date: Mon, 2 Dec 2024 20:18:44 -0500 Subject: [PATCH 1/5] Implemented Search Bar Suggestion Re-Design - Implemented label icon - Implemented bottom border for each menu item - Removed excessive top padding for menu list --- frontend/src/assets/search-landlord.svg | 6 +++ frontend/src/assets/search-property.svg | 8 +++ frontend/src/components/Home/Autocomplete.tsx | 50 +++++++++++++------ 3 files changed, 50 insertions(+), 14 deletions(-) create mode 100644 frontend/src/assets/search-landlord.svg create mode 100644 frontend/src/assets/search-property.svg diff --git a/frontend/src/assets/search-landlord.svg b/frontend/src/assets/search-landlord.svg new file mode 100644 index 00000000..81eae63c --- /dev/null +++ b/frontend/src/assets/search-landlord.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/assets/search-property.svg b/frontend/src/assets/search-property.svg new file mode 100644 index 00000000..f87e59bf --- /dev/null +++ b/frontend/src/assets/search-property.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx index 019751d8..0d4820aa 100644 --- a/frontend/src/components/Home/Autocomplete.tsx +++ b/frontend/src/components/Home/Autocomplete.tsx @@ -18,6 +18,8 @@ import { makeStyles } from '@material-ui/core/styles'; import { colors } from '../../colors'; import { useHistory } from 'react-router-dom'; import { Link as RouterLink } from 'react-router-dom'; +import searchPropertyIcon from '../../assets/search-property.svg'; +import searchLandlordIcon from '../../assets/search-landlord.svg'; type Props = { drawerOpen: boolean; @@ -32,6 +34,12 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { maxHeight: 200, overflow: 'auto', boxShadow: '1px 8px rgba(49, 49, 49, 0.35)', + borderRadius: '8px', + padding: '2px', + }, + menuItem: { + borderBottom: '1px solid #E5E5E5', + height: '53px', }, text: { backgroundColor: colors.white, @@ -39,8 +47,10 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { addressText: { color: colors.gray2, + fontSize: '12px', }, buildingText: { + fontSize: '16px', color: colors.black, }, homeSearchIcon: { @@ -66,7 +76,11 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { justifyContent: 'center', alignItems: 'center', }, - resultChip: { cursor: 'pointer' }, + searchLabelIcon: { + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + }, field: { '&.Mui-focused': { '& .MuiOutlinedInput-notchedOutline': { @@ -81,10 +95,11 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { searchIcon, homeSearchIcon, searchIconBackground, + searchLabelIcon, field, menuList, - resultChip, - addressText, + menuItem, + addressText: subText, buildingText, } = useStyles(); const inputRef = useRef(document.createElement('div')); @@ -166,20 +181,27 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { component: RouterLink, }} > - setOpen(false)}> - - + setOpen(false)} + className={menuItem} + > + + + search icon + + {name} - + {address !== name && address} - - - + + {label === 'LANDLORD' && 'landlord'} + From 96edc865f8f202a37d77d07d99435ccccd908662 Mon Sep 17 00:00:00 2001 From: Kea-Roy Ong <146872846+kea-roy@users.noreply.github.com> Date: Mon, 2 Dec 2024 21:35:06 -0500 Subject: [PATCH 2/5] fix extra padding and remove imports --- frontend/src/components/Home/Autocomplete.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx index 0d4820aa..8615e6a2 100644 --- a/frontend/src/components/Home/Autocomplete.tsx +++ b/frontend/src/components/Home/Autocomplete.tsx @@ -1,7 +1,6 @@ import React, { ReactElement, useEffect, useState, useRef } from 'react'; import { useLocation } from 'react-router-dom'; import { - Chip, CircularProgress, ClickAwayListener, Grid, @@ -35,7 +34,8 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { overflow: 'auto', boxShadow: '1px 8px rgba(49, 49, 49, 0.35)', borderRadius: '8px', - padding: '2px', + paddingTop: '2px', + paddingBottom: '2px', }, menuItem: { borderBottom: '1px solid #E5E5E5', @@ -61,7 +61,6 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { alignItems: 'center', justifyContent: 'center', color: 'white', - // fontSize: isMobile ? 17 : 22 height: '62%', width: '62%', }, From 94c0e44c92ff771c951fa9be1a7e91d448768215 Mon Sep 17 00:00:00 2001 From: CasperL1218 Date: Tue, 3 Dec 2024 19:33:15 -0500 Subject: [PATCH 3/5] design fix --- frontend/src/components/Home/Autocomplete.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx index 8615e6a2..b07c52fc 100644 --- a/frontend/src/components/Home/Autocomplete.tsx +++ b/frontend/src/components/Home/Autocomplete.tsx @@ -34,8 +34,9 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { overflow: 'auto', boxShadow: '1px 8px rgba(49, 49, 49, 0.35)', borderRadius: '8px', - paddingTop: '2px', - paddingBottom: '2px', + padding: 0, + boxSizing: 'border-box', + border: '2px solid white', }, menuItem: { borderBottom: '1px solid #E5E5E5', @@ -185,6 +186,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { key={index} onClick={() => setOpen(false)} className={menuItem} + style={index === options.length - 1 ? { borderBottom: 'none' } : {}} > From 43386e4540fc41b25e327e82bef5fcaf5f9dac8b Mon Sep 17 00:00:00 2001 From: CasperL1218 Date: Wed, 4 Dec 2024 00:14:49 -0500 Subject: [PATCH 4/5] Fixed Design - Fixed home search bar border radius - Implemented screen-size/mobile adapatable text overflow ellipsis - Removed top box-shadow --- frontend/src/components/Home/Autocomplete.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx index b07c52fc..4061334c 100644 --- a/frontend/src/components/Home/Autocomplete.tsx +++ b/frontend/src/components/Home/Autocomplete.tsx @@ -32,7 +32,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { backgroundColor: colors.white, maxHeight: 200, overflow: 'auto', - boxShadow: '1px 8px rgba(49, 49, 49, 0.35)', + boxShadow: '0px 4px 8px -1px rgba(0, 0, 0, 0.25)', borderRadius: '8px', padding: 0, boxSizing: 'border-box', @@ -46,13 +46,19 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { backgroundColor: colors.white, }, - addressText: { + subText: { color: colors.gray2, fontSize: '12px', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, buildingText: { fontSize: '16px', color: colors.black, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, homeSearchIcon: { paddingRight: '10px', @@ -82,9 +88,11 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { alignItems: 'center', }, field: { + borderRadius: '10px', '&.Mui-focused': { '& .MuiOutlinedInput-notchedOutline': { border: `1px solid ${colors.red1}`, + borderRadius: '10px', }, }, height: isMobile ? '35px' : '45px', @@ -99,7 +107,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { field, menuList, menuItem, - addressText: subText, + subText, buildingText, } = useStyles(); const inputRef = useRef(document.createElement('div')); @@ -195,7 +203,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { alt="search icon" /> - + {name} {address !== name && address} @@ -279,7 +287,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { }; } else { return { - style: { height: isMobile ? '35px' : '45px', borderRadius: '10px' }, + style: { height: isMobile ? '35px' : '45px' }, endAdornment: ( {loading ? : null} From 247556cd2fa380c77167e75f2702aa2fd8521c71 Mon Sep 17 00:00:00 2001 From: Grace Sawatyanon Date: Sat, 7 Dec 2024 00:57:51 -0500 Subject: [PATCH 5/5] Fixed capitalization mistake --- frontend/src/components/Home/Autocomplete.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Home/Autocomplete.tsx b/frontend/src/components/Home/Autocomplete.tsx index 4061334c..435764ac 100644 --- a/frontend/src/components/Home/Autocomplete.tsx +++ b/frontend/src/components/Home/Autocomplete.tsx @@ -209,7 +209,7 @@ const Autocomplete = ({ drawerOpen }: Props): ReactElement => { {address !== name && address} - {label === 'LANDLORD' && 'landlord'} + {label === 'LANDLORD' && 'Landlord'}