Merge pull request #203 from bettersg/feature/169-map-header-button-u…

…pdate feature/169 update map header item styles
bettersg · Oct 31, 2023 · 4e0fae5 · 4e0fae5
2 parents 6891eec + 07b6dff
commit 4e0fae5
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 168 deletions.
diff --git a/client/components/home/UserInput/Location/index.tsx b/client/components/home/UserInput/Location/index.tsx
@@ -1,4 +1,4 @@
-import { Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 import { fetchAddresses } from "api/onemap";
 import { useUserInputs } from "hooks/useUserSelection";
 import debounce from "lodash/debounce";
@@ -10,9 +10,10 @@ import { AddressOption } from "app-context/UserSelectionContext/types";
 interface LocationProps {
 	handleBlur?: () => void;
 	showText: boolean;
+	containerStyle?: React.CSSProperties;
 }
 
-export const Location = ({ handleBlur, showText }: LocationProps) => {
+export const Location = ({ handleBlur, showText, containerStyle = {} }: LocationProps) => {
 	const [showEmptyWarning, setShowEmptyWarning] = useState(false);
 	const { address, setAddress } = useUserInputs();
 	const { value: addressValue } = address;
@@ -46,7 +47,7 @@ export const Location = ({ handleBlur, showText }: LocationProps) => {
 	}, [addressValue]);
 
 	return (
-		<div style={{ flex: 1 }}>
+		<Box flex={1} minWidth={0}>
 			{showText && (
 				<Text fontWeight={500} fontSize="md" mb="8px">
 					Where are you at?
@@ -66,6 +67,10 @@ export const Location = ({ handleBlur, showText }: LocationProps) => {
 					setShowEmptyWarning(false);
 				}}
 				styles={{
+					container: (base) => ({
+						...base,
+						...containerStyle,
+					}),
 					control: (base) => ({
 						...base,
 						overflow: "hidden",
@@ -89,6 +94,6 @@ export const Location = ({ handleBlur, showText }: LocationProps) => {
 					handleShowError();
 				}}
 			/>
-		</div>
+		</Box>
 	);
 };
diff --git a/client/components/map/Buttons.tsx b/client/components/map/Buttons.tsx
@@ -1,22 +1,34 @@
-import { HamburgerIcon, Search2Icon, CloseIcon } from "@chakra-ui/icons";
+import { Search2Icon, CloseIcon } from "@chakra-ui/icons";
 import { MouseEventHandler } from "react";
-import { IconButton } from "@chakra-ui/react";
+import { Icon, IconButton } from "@chakra-ui/react";
 import { COLORS } from "theme";
 
 interface ButtonProps {
 	onClick: MouseEventHandler<HTMLButtonElement>;
+	height?: string;
 }
 
 // Button Design for the filter button
-export const FilterButton = ({ onClick }: ButtonProps) => {
+export const FilterButton = ({ onClick, height }: ButtonProps) => {
 	return (
 		<IconButton
 			variant="solid"
 			color={COLORS.gray[700]}
-			background={COLORS.gray[100]}
+			background="white"
 			aria-label="add line"
-			icon={<HamburgerIcon />}
+			icon={
+				<Icon viewBox="0 0 24 24">
+					<path
+						d="M12.5263 11.5H22M12.5263 6.3H22M12.5263 16.7H22M5.93056 5V11.5V18M5.93056 18L2 14.1M5.93056 18L9.86111 14.1"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</Icon>
+			}
 			onClick={onClick}
+			height={height}
 		/>
 	);
 };