diff --git a/client/api/onemap/index.ts b/client/api/onemap/index.ts index 14a4049..a5cf9b0 100644 --- a/client/api/onemap/index.ts +++ b/client/api/onemap/index.ts @@ -3,7 +3,7 @@ import { OneMapResponse } from "./types"; export const fetchAddresses = async (searchValue: string): Promise => { try { - const url = `https://developers.onemap.sg/commonapi/search?searchVal=${searchValue}&returnGeom=Y&getAddrDetails=Y&pageNum=1`; + const url = `https://www.onemap.gov.sg/api/common/elastic/search?searchVal=${searchValue}&returnGeom=Y&getAddrDetails=Y&pageNum=1`; const res = await axios.get(url, { headers: { Accept: "application/json", diff --git a/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx b/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx index 40cd7fd..5c2e7fe 100644 --- a/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx +++ b/client/components/instructions/InstructionsAccordion/DisplayAccordion.tsx @@ -10,32 +10,64 @@ import { useSheetyData } from "hooks/useSheetyData"; import { AccordionDisplayProps } from "."; import InstructionsCarousel from "./InstructionsCarousel"; import { InstructionsTag } from "./InstructionsTag"; +import { useState } from "react"; -const DisplayAccordion = ({ items, handleAccordionClick, recyclable }: AccordionDisplayProps) => { +const DisplayAccordion = ({ items, recyclable }: AccordionDisplayProps) => { const { getItemCategory } = useSheetyData(); const lastIndex = items.length - 1; + // Use an array of state variables to track hover and expanded state for each accordion + const [accordionStates, setAccordionStates] = useState( + items.map(() => ({ isHovered: false, isExpanded: false })), + ); + // Function to handle accordion hover + const handleAccordionHover = (index: number, isHovered: boolean, isExpanded: boolean) => { + setAccordionStates((prevState) => + prevState.map((state, i) => ({ + ...state, + isHovered: i === index ? isHovered : state.isHovered, + isExpanded: i === index ? isExpanded : state.isExpanded, + })), + ); + }; + return ( - + {items.map((item, index) => { const category = getItemCategory(item.title); + const { isHovered, isExpanded } = accordionStates[index]; return (

handleAccordionClick(index)} + onClick={() => { + handleAccordionHover(index, true, !isExpanded); + }} _hover={{ bg: "teal", color: "white" }} + onMouseEnter={() => handleAccordionHover(index, true, isExpanded)} + onMouseLeave={() => handleAccordionHover(index, false, isExpanded)} + style={{ + boxShadow: + index === 0 && index !== lastIndex + ? "0px -5px 6px -6px rgba(0, 0, 0, 0.25), -5px 0px 6px -6px rgba(0, 0, 0, 0.25), 5px 0px 6px -6px rgba(0, 0, 0, 0.25)" + : "1px 2px 6px 0px rgb(0,0,0, 0.25)", + }} > {`Icon @@ -47,25 +79,28 @@ const DisplayAccordion = ({ items, handleAccordionClick, recyclable }: Accordion

- {recyclable ? ( - item.contents && ( - - + + {recyclable ? ( + item.contents && + ) : ( + + Why cannot recycle? + {item.reason} + How to dispose properly? + {item.suggestion} - ) - ) : ( - - Why cannot recycle? - {item.reason} - How to dispose properly? - {item.suggestion} - - )} + )} + ); diff --git a/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx b/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx index c349606..692e162 100644 --- a/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx +++ b/client/components/instructions/InstructionsAccordion/InstructionsCarousel.tsx @@ -1,7 +1,10 @@ import { Box, Button, Center, Flex, Text } from "@chakra-ui/react"; import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons"; import { useState } from "react"; - +import { Carousel } from "react-responsive-carousel"; +import "react-responsive-carousel/lib/styles/carousel.min.css"; +import styles from "components/pickup/carousel.module.css"; +import { SLIDES_INTERVAL_TIME } from "components/pickup/PickupCarousel"; const InstructionsCarousel = ({ items }: { items: string[] }) => { const [currentIndex, setCurrentIndex] = useState(0); @@ -14,24 +17,40 @@ const InstructionsCarousel = ({ items }: { items: string[] }) => { }; return ( - <> - - - - Step {items.indexOf(items[currentIndex]) + 1} of {items.length} - - {items[currentIndex]} - - -
- - -
- + { + return ( +
  • + ); + }} + > + {items.map((item, idx) => { + return ( + + + + + Step {idx + 1} of {items.length} + + + + {item} + + + ); + })} + ); }; diff --git a/client/components/instructions/InstructionsAccordion/index.tsx b/client/components/instructions/InstructionsAccordion/index.tsx index 33c912f..7b80915 100644 --- a/client/components/instructions/InstructionsAccordion/index.tsx +++ b/client/components/instructions/InstructionsAccordion/index.tsx @@ -5,7 +5,6 @@ import DisplayAccordion from "./DisplayAccordion"; export type AccordionDisplayProps = { items: AccordionProps[]; - handleAccordionClick: (index: number) => void; recyclable: boolean; }; @@ -22,12 +21,6 @@ export type AccordionsProps = { }; export const AccordionComp: React.FC = ({ items }) => { - const [activeIndex, setActiveIndex] = useState(null); - - const handleAccordionClick = (index: number) => { - setActiveIndex((prevIndex) => (prevIndex === index ? null : index)); - }; - const unrecyclableItems = [] as AccordionProps[]; const recyclableItems = items.filter((item) => { if (item.method === Methods.THROW) { @@ -46,11 +39,7 @@ export const AccordionComp: React.FC = ({ items }) => { {/* Non-recyclable accordion */} - + )} {recyclableItems.length > 0 && ( @@ -60,11 +49,7 @@ export const AccordionComp: React.FC = ({ items }) => { {/* Recyclable accordion */} - + )} diff --git a/client/components/instructions/InstructionsHeader.tsx b/client/components/instructions/InstructionsHeader.tsx index f75478c..ff57085 100644 --- a/client/components/instructions/InstructionsHeader.tsx +++ b/client/components/instructions/InstructionsHeader.tsx @@ -11,21 +11,13 @@ export const InstructionsHeader = ({ setPage }: Props) => { - ); diff --git a/client/components/map/FilterPanel.tsx b/client/components/map/FilterPanel.tsx index 4c326a9..8a850f3 100644 --- a/client/components/map/FilterPanel.tsx +++ b/client/components/map/FilterPanel.tsx @@ -26,6 +26,7 @@ import { TItemSelection, TEmptyItem } from "app-context/SheetyContext/types"; import { OptionType } from "spa-pages"; import React, { ChangeEvent, PropsWithChildren } from "react"; import { Methods } from "api/sheety/enums"; +import { useSheetyData } from "hooks/useSheetyData"; type FilterProps = { isOpen: boolean; @@ -79,9 +80,10 @@ export const FilterPanel = ({ /> - + {/* Implementation still in consideration... */} + {/* - + */} @@ -176,7 +178,9 @@ const ChipCheckbox = (props: CheckboxProps) => { return ( - {props.value} + + {props.value} + ); }; @@ -219,15 +223,18 @@ const ChipRadio = (props: PropsWithChildren) => { }; const Chip = ({ + value, children, isChecked, darkBackground, -}: React.PropsWithChildren<{ isChecked: boolean; darkBackground?: boolean }>) => { +}: React.PropsWithChildren<{ isChecked: boolean; darkBackground?: boolean; value?: string }>) => { const selectedColor = darkBackground ? "teal.500" : "teal.50"; const selectedTextColor = darkBackground ? "white" : "black"; - + const { getItemCategory } = useSheetyData(); + const category = getItemCategory(value as string); return ( - - {children} - + {category && ( + {`${category} + )} + {children} + ); }; diff --git a/client/components/map/Marker/MarkerIconWrapper.tsx b/client/components/map/Marker/MarkerIconWrapper.tsx index a637ea1..043d851 100644 --- a/client/components/map/Marker/MarkerIconWrapper.tsx +++ b/client/components/map/Marker/MarkerIconWrapper.tsx @@ -33,11 +33,18 @@ const MarkerIconWrapper = ({ {label && {label}} {category && ( - {`${category} + <> + Circle behind category icon + {`${category} + )} ); diff --git a/client/components/map/Marker/icons/ClusterIcon.tsx b/client/components/map/Marker/icons/ClusterIcon.tsx index ed7ad1f..fd6548d 100644 --- a/client/components/map/Marker/icons/ClusterIcon.tsx +++ b/client/components/map/Marker/icons/ClusterIcon.tsx @@ -1,43 +1,47 @@ import { Icon } from "@chakra-ui/react"; const ClusterIcon = (props: any) => ( - - - - - - - - - - - + + + + + + + + + + + + + + + + ); diff --git a/client/components/map/Marker/icons/GeneralIcon.tsx b/client/components/map/Marker/icons/GeneralIcon.tsx index d11a952..29fa674 100644 --- a/client/components/map/Marker/icons/GeneralIcon.tsx +++ b/client/components/map/Marker/icons/GeneralIcon.tsx @@ -2,13 +2,47 @@ import { Icon } from "@chakra-ui/react"; // Map Icon (placeholder for testing) const GeneralIcon = (props: any) => ( - - - - + + + + + + + + + + + + + + + + ); diff --git a/client/components/map/Marker/icons/UserIcon.tsx b/client/components/map/Marker/icons/UserIcon.tsx index 8a5a5b5..d8c9e1a 100644 --- a/client/components/map/Marker/icons/UserIcon.tsx +++ b/client/components/map/Marker/icons/UserIcon.tsx @@ -1,19 +1,52 @@ -import { Icon } from "@chakra-ui/react"; +import { Icon, Box } from "@chakra-ui/react"; // Map Icon (placeholder for testing) const UserIcon = (props: any) => ( - - - - - + + + + + + + + + + + + + + + + + + + // ); export default UserIcon; diff --git a/client/components/map/Marker/index.tsx b/client/components/map/Marker/index.tsx index 39d1699..b149405 100644 --- a/client/components/map/Marker/index.tsx +++ b/client/components/map/Marker/index.tsx @@ -2,6 +2,7 @@ import { Marker } from "react-leaflet"; import useLeafletDivIcon from "hooks/useLeafletDivIcon"; import MarkerIconWrapper, { CustomMarkerProps } from "./MarkerIconWrapper"; +import "leaflet/dist/leaflet.css"; // Import Leaflet CSS export const CustomMarker: React.FC<{ position: CustomMarkerProps["position"]; @@ -12,21 +13,22 @@ export const CustomMarker: React.FC<{ isSelected?: boolean; }> = ({ position, icon, color, handleOnClick, category, isSelected }) => { const { divIcon } = useLeafletDivIcon(); - return ( - - ), - })} - eventHandlers={{ click: handleOnClick }} - /> + <> + + ), + })} + eventHandlers={{ click: handleOnClick }} + />{" "} + ); }; diff --git a/client/components/pickup/PickupCarousel.tsx b/client/components/pickup/PickupCarousel.tsx index ee08284..cf3affb 100644 --- a/client/components/pickup/PickupCarousel.tsx +++ b/client/components/pickup/PickupCarousel.tsx @@ -6,9 +6,15 @@ import styles from "components/pickup/carousel.module.css"; import { Image } from "@chakra-ui/react"; import * as csstype from "csstype"; -const SLIDES_INTERVAL_TIME = 5000; +export const SLIDES_INTERVAL_TIME = 5000; -const PickupCarousel = ({ minDist, numPickupServices }: { minDist: number, numPickupServices: number }) => { +const PickupCarousel = ({ + minDist, + numPickupServices, +}: { + minDist: number; + numPickupServices: number; +}) => { const slides = [ { url: useBreakpointValue({ diff --git a/client/components/pickup/filterPopover.tsx b/client/components/pickup/filterPopover.tsx index 27e8b83..948f212 100644 --- a/client/components/pickup/filterPopover.tsx +++ b/client/components/pickup/filterPopover.tsx @@ -19,7 +19,7 @@ const FilterButton = ({ const initRef = useRef(null); // Specify the correct type for initRef const [priceValue, setPriceValue] = useState(100); - const [quantityValue, setQuantityValue] = useState(100); + const [quantityValue, setQuantityValue] = useState(0); const PriceManager = (val: number) => { setPriceValue(val); diff --git a/client/components/pickup/slider.tsx b/client/components/pickup/slider.tsx index c42b675..bcc7e8f 100644 --- a/client/components/pickup/slider.tsx +++ b/client/components/pickup/slider.tsx @@ -9,7 +9,7 @@ interface MarkedSliderProps { } const MarkedSlider: React.FC = ({ value, onSliderChange }) => { - const [sliderValue, setSliderValue] = useState(100); + const [sliderValue, setSliderValue] = useState(value); const labelStyles = { mt: "2", @@ -19,6 +19,7 @@ const MarkedSlider: React.FC = ({ value, onSliderChange }) => return ( setSliderValue(val)} colorScheme="teal" diff --git a/client/hooks/useLeafletDivIcon.tsx b/client/hooks/useLeafletDivIcon.tsx index 1ba0283..6ed0125 100644 --- a/client/hooks/useLeafletDivIcon.tsx +++ b/client/hooks/useLeafletDivIcon.tsx @@ -1,15 +1,17 @@ -import Leaflet from "leaflet"; +import Leaflet, { DivIcon } from "leaflet"; import { renderToString } from "react-dom/server"; interface divIconValues { source: JSX.Element; + className?: string; } const useLeafletDivIcon = () => { - const divIcon = ({ source }: divIconValues) => + const divIcon = ({ source, className }: divIconValues) => Leaflet?.divIcon({ html: renderToString(source), - }); + className, + }) as DivIcon; return { divIcon }; }; diff --git a/client/public/Marker.css b/client/public/Marker.css index 0b007c9..233938b 100644 --- a/client/public/Marker.css +++ b/client/public/Marker.css @@ -1,26 +1,42 @@ .leaflet-marker-icon { - background: transparent; - border: none; + background: transparent; + border: none; } .marker-icon-wrapper { - position: absolute; - bottom: 6px; - left: 6px; - transform: translateX(-50%); + position: absolute; + bottom: 6px; + left: 6px; + transform: translateX(-50%); +} +/* Apply styles to the custom shadow icon */ +.custom-shadow-icon { + /* Add your shadow styles here */ + position: relative; + bottom: 32px; + right: 12px; + width: 42px; + height: 42px; + background-color: black; + opacity: 0.5; + border-radius: 50%; + background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%); } .marker-icon-wrapper.selected { - transform-origin: bottom left; - scale: 2; + transform-origin: bottom left; + scale: 2; } .marker-text { - font-size: 9px; + font-size: 17px; + font-weight: 700; position: absolute; - right: 7px; - top: 0; - color: white; + right: 14px; + top: 6px; + background-clip: text; + color: transparent; + background-image: linear-gradient(90deg, #2b6cb0 0%, #2c5282 100%); } .marker-size { @@ -33,14 +49,25 @@ height: 42px !important; } +.marker-circle { + position: absolute; + width: 65% !important; + + /* center icon in marker */ + top: 17%; + + /* center icon based on percentage width */ + /* (100 - %width) / 2 * 100 / %width */ + transform: translateX(29%); +} .marker-image { position: absolute; - width: 36% !important; + width: 35% !important; - /* center icon in marker */ - top: 18%; + /* center icon in marker */ + top: 33%; - /* center icon based on percentage width */ - /* (100 - %width) / 2 * 100 / %width */ - transform: translateX(88.888%); + /* center icon based on percentage width */ + /* (100 - %width) / 2 * 100 / %width */ + transform: translateX(95%); } diff --git a/client/public/blueicons/BOOKS.png b/client/public/blueicons/BOOKS.png new file mode 100644 index 0000000..73ad988 Binary files /dev/null and b/client/public/blueicons/BOOKS.png differ diff --git a/client/public/blueicons/CLOTHING.png b/client/public/blueicons/CLOTHING.png new file mode 100644 index 0000000..18eb3c6 Binary files /dev/null and b/client/public/blueicons/CLOTHING.png differ diff --git a/client/public/blueicons/FOOD.png b/client/public/blueicons/FOOD.png new file mode 100644 index 0000000..9b5bc24 Binary files /dev/null and b/client/public/blueicons/FOOD.png differ diff --git a/client/public/blueicons/FURNITURE.png b/client/public/blueicons/FURNITURE.png new file mode 100644 index 0000000..388ccbb Binary files /dev/null and b/client/public/blueicons/FURNITURE.png differ diff --git a/client/public/blueicons/INKS_AND_TONER_CARTRIDGES.png b/client/public/blueicons/INKS_AND_TONER_CARTRIDGES.png new file mode 100644 index 0000000..b91b04e Binary files /dev/null and b/client/public/blueicons/INKS_AND_TONER_CARTRIDGES.png differ diff --git a/client/public/blueicons/LAMPS.png b/client/public/blueicons/LAMPS.png new file mode 100644 index 0000000..d4c7850 Binary files /dev/null and b/client/public/blueicons/LAMPS.png differ diff --git a/client/public/blueicons/RECYCLABLE.png b/client/public/blueicons/RECYCLABLE.png new file mode 100644 index 0000000..8e58e5e Binary files /dev/null and b/client/public/blueicons/RECYCLABLE.png differ diff --git a/client/public/blueicons/SHOES.png b/client/public/blueicons/SHOES.png new file mode 100644 index 0000000..d799493 Binary files /dev/null and b/client/public/blueicons/SHOES.png differ diff --git a/client/public/blueicons/STATIONERY.png b/client/public/blueicons/STATIONERY.png new file mode 100644 index 0000000..d0b1b03 Binary files /dev/null and b/client/public/blueicons/STATIONERY.png differ diff --git a/client/public/blueicons/Toys.png b/client/public/blueicons/Toys.png new file mode 100644 index 0000000..91688f9 Binary files /dev/null and b/client/public/blueicons/Toys.png differ diff --git a/client/public/blueicons/baby_children_items.png b/client/public/blueicons/baby_children_items.png new file mode 100644 index 0000000..44c4c6f Binary files /dev/null and b/client/public/blueicons/baby_children_items.png differ diff --git a/client/public/blueicons/bags_and_accessories.png b/client/public/blueicons/bags_and_accessories.png new file mode 100644 index 0000000..e488d88 Binary files /dev/null and b/client/public/blueicons/bags_and_accessories.png differ diff --git a/client/public/blueicons/contact_lens.png b/client/public/blueicons/contact_lens.png new file mode 100644 index 0000000..ee76634 Binary files /dev/null and b/client/public/blueicons/contact_lens.png differ diff --git a/client/public/blueicons/content_container.png b/client/public/blueicons/content_container.png new file mode 100644 index 0000000..02c048d Binary files /dev/null and b/client/public/blueicons/content_container.png differ diff --git a/client/public/blueicons/food_drink_container.png b/client/public/blueicons/food_drink_container.png new file mode 100644 index 0000000..cb396da Binary files /dev/null and b/client/public/blueicons/food_drink_container.png differ diff --git a/client/public/blueicons/household_goods.png b/client/public/blueicons/household_goods.png new file mode 100644 index 0000000..e2fe1ba Binary files /dev/null and b/client/public/blueicons/household_goods.png differ diff --git a/client/public/blueicons/icon_circle.png b/client/public/blueicons/icon_circle.png new file mode 100644 index 0000000..146c86d Binary files /dev/null and b/client/public/blueicons/icon_circle.png differ diff --git a/client/public/blueicons/ict_equipment.png b/client/public/blueicons/ict_equipment.png new file mode 100644 index 0000000..759ef76 Binary files /dev/null and b/client/public/blueicons/ict_equipment.png differ diff --git a/client/public/blueicons/large_household_appliances.png b/client/public/blueicons/large_household_appliances.png new file mode 100644 index 0000000..d3373dd Binary files /dev/null and b/client/public/blueicons/large_household_appliances.png differ diff --git a/client/public/blueicons/nespresso.png b/client/public/blueicons/nespresso.png new file mode 100644 index 0000000..1b39174 Binary files /dev/null and b/client/public/blueicons/nespresso.png differ diff --git a/client/public/blueicons/other_electrical_appliances.png b/client/public/blueicons/other_electrical_appliances.png new file mode 100644 index 0000000..3ffc6ec Binary files /dev/null and b/client/public/blueicons/other_electrical_appliances.png differ diff --git a/client/public/blueicons/paper_and_cardboard.png b/client/public/blueicons/paper_and_cardboard.png new file mode 100644 index 0000000..cc9af62 Binary files /dev/null and b/client/public/blueicons/paper_and_cardboard.png differ diff --git a/client/public/blueicons/portable_batteries.png b/client/public/blueicons/portable_batteries.png new file mode 100644 index 0000000..2765b75 Binary files /dev/null and b/client/public/blueicons/portable_batteries.png differ diff --git a/client/public/icons/BABY_CHILDREN_ITEMS.png b/client/public/icons/BABY_CHILDREN_ITEMS.png index bb26a86..c1e71fd 100644 Binary files a/client/public/icons/BABY_CHILDREN_ITEMS.png and b/client/public/icons/BABY_CHILDREN_ITEMS.png differ diff --git a/client/public/icons/BAGS_AND_ACCESSORIES.png b/client/public/icons/BAGS_AND_ACCESSORIES.png index c545545..eb91975 100644 Binary files a/client/public/icons/BAGS_AND_ACCESSORIES.png and b/client/public/icons/BAGS_AND_ACCESSORIES.png differ diff --git a/client/public/icons/BOOKS.png b/client/public/icons/BOOKS.png index b32c5c8..f227a3f 100644 Binary files a/client/public/icons/BOOKS.png and b/client/public/icons/BOOKS.png differ diff --git a/client/public/icons/CLOTHING.png b/client/public/icons/CLOTHING.png index 02942a0..49df18c 100644 Binary files a/client/public/icons/CLOTHING.png and b/client/public/icons/CLOTHING.png differ diff --git a/client/public/icons/CONTENT_CONTAINER.png b/client/public/icons/CONTENT_CONTAINER.png index db1813f..7bb8261 100644 Binary files a/client/public/icons/CONTENT_CONTAINER.png and b/client/public/icons/CONTENT_CONTAINER.png differ diff --git a/client/public/icons/FOOD.png b/client/public/icons/FOOD.png index ea001a9..a9b9f74 100644 Binary files a/client/public/icons/FOOD.png and b/client/public/icons/FOOD.png differ diff --git a/client/public/icons/FOOD_DRINK_CONTAINER.png b/client/public/icons/FOOD_DRINK_CONTAINER.png index 3d37931..d18ccbc 100644 Binary files a/client/public/icons/FOOD_DRINK_CONTAINER.png and b/client/public/icons/FOOD_DRINK_CONTAINER.png differ diff --git a/client/public/icons/FURNITURE.png b/client/public/icons/FURNITURE.png index 3488250..82e48ad 100644 Binary files a/client/public/icons/FURNITURE.png and b/client/public/icons/FURNITURE.png differ diff --git a/client/public/icons/HOUSEHOLD_GOODS.png b/client/public/icons/HOUSEHOLD_GOODS.png index 9513965..04157e8 100644 Binary files a/client/public/icons/HOUSEHOLD_GOODS.png and b/client/public/icons/HOUSEHOLD_GOODS.png differ diff --git a/client/public/icons/ICT_EQUIPMENT.png b/client/public/icons/ICT_EQUIPMENT.png index cfc7ec2..3baa156 100644 Binary files a/client/public/icons/ICT_EQUIPMENT.png and b/client/public/icons/ICT_EQUIPMENT.png differ diff --git a/client/public/icons/INKS_AND_TONER_CARTRIDGES.png b/client/public/icons/INKS_AND_TONER_CARTRIDGES.png index e0c5238..66bb574 100644 Binary files a/client/public/icons/INKS_AND_TONER_CARTRIDGES.png and b/client/public/icons/INKS_AND_TONER_CARTRIDGES.png differ diff --git a/client/public/icons/LAMPS.png b/client/public/icons/LAMPS.png index 058936f..d56e936 100644 Binary files a/client/public/icons/LAMPS.png and b/client/public/icons/LAMPS.png differ diff --git a/client/public/icons/LARGE_HOUSEHOLD_APPLIANCES.png b/client/public/icons/LARGE_HOUSEHOLD_APPLIANCES.png index e63f291..715ee34 100644 Binary files a/client/public/icons/LARGE_HOUSEHOLD_APPLIANCES.png and b/client/public/icons/LARGE_HOUSEHOLD_APPLIANCES.png differ diff --git a/client/public/icons/OTHER_ELECTRICAL_APPLIANCES.png b/client/public/icons/OTHER_ELECTRICAL_APPLIANCES.png index 3bc5920..12abe98 100644 Binary files a/client/public/icons/OTHER_ELECTRICAL_APPLIANCES.png and b/client/public/icons/OTHER_ELECTRICAL_APPLIANCES.png differ diff --git a/client/public/icons/PAPER_AND_CARDBOARD.png b/client/public/icons/PAPER_AND_CARDBOARD.png index 454bf6c..6eb0db4 100644 Binary files a/client/public/icons/PAPER_AND_CARDBOARD.png and b/client/public/icons/PAPER_AND_CARDBOARD.png differ diff --git a/client/public/icons/RECYCLABLE.png b/client/public/icons/RECYCLABLE.png index 35352b8..ea1cacc 100644 Binary files a/client/public/icons/RECYCLABLE.png and b/client/public/icons/RECYCLABLE.png differ diff --git a/client/public/icons/SHOES.png b/client/public/icons/SHOES.png index 9c7a894..98770fc 100644 Binary files a/client/public/icons/SHOES.png and b/client/public/icons/SHOES.png differ diff --git a/client/public/icons/STATIONERY.png b/client/public/icons/STATIONERY.png index 9894fea..45c7d37 100644 Binary files a/client/public/icons/STATIONERY.png and b/client/public/icons/STATIONERY.png differ diff --git a/client/public/icons/TOYS.png b/client/public/icons/TOYS.png index a1e6c2e..467b622 100644 Binary files a/client/public/icons/TOYS.png and b/client/public/icons/TOYS.png differ diff --git a/client/public/icons/baby_children_items.png b/client/public/icons/baby_children_items.png index bb26a86..c1e71fd 100644 Binary files a/client/public/icons/baby_children_items.png and b/client/public/icons/baby_children_items.png differ diff --git a/client/public/icons/bags_and_accessories.png b/client/public/icons/bags_and_accessories.png index c545545..eb91975 100644 Binary files a/client/public/icons/bags_and_accessories.png and b/client/public/icons/bags_and_accessories.png differ diff --git a/client/public/icons/books.png b/client/public/icons/books.png index b32c5c8..f227a3f 100644 Binary files a/client/public/icons/books.png and b/client/public/icons/books.png differ diff --git a/client/public/icons/clothing.png b/client/public/icons/clothing.png index 02942a0..49df18c 100644 Binary files a/client/public/icons/clothing.png and b/client/public/icons/clothing.png differ diff --git a/client/public/icons/contact_lens.png b/client/public/icons/contact_lens.png new file mode 100644 index 0000000..6ae12a0 Binary files /dev/null and b/client/public/icons/contact_lens.png differ diff --git a/client/public/icons/content_container.png b/client/public/icons/content_container.png index db1813f..7bb8261 100644 Binary files a/client/public/icons/content_container.png and b/client/public/icons/content_container.png differ diff --git a/client/public/icons/food.png b/client/public/icons/food.png index ea001a9..a9b9f74 100644 Binary files a/client/public/icons/food.png and b/client/public/icons/food.png differ diff --git a/client/public/icons/food_drink_container.png b/client/public/icons/food_drink_container.png index 3d37931..d18ccbc 100644 Binary files a/client/public/icons/food_drink_container.png and b/client/public/icons/food_drink_container.png differ diff --git a/client/public/icons/furniture.png b/client/public/icons/furniture.png index 3488250..82e48ad 100644 Binary files a/client/public/icons/furniture.png and b/client/public/icons/furniture.png differ diff --git a/client/public/icons/household_goods.png b/client/public/icons/household_goods.png index 9513965..04157e8 100644 Binary files a/client/public/icons/household_goods.png and b/client/public/icons/household_goods.png differ diff --git a/client/public/icons/ict_equipment.png b/client/public/icons/ict_equipment.png index cfc7ec2..3baa156 100644 Binary files a/client/public/icons/ict_equipment.png and b/client/public/icons/ict_equipment.png differ diff --git a/client/public/icons/ink_and_toner_cartridges.png b/client/public/icons/ink_and_toner_cartridges.png deleted file mode 100644 index e0c5238..0000000 Binary files a/client/public/icons/ink_and_toner_cartridges.png and /dev/null differ diff --git a/client/public/icons/lamps.png b/client/public/icons/lamps.png index 058936f..d56e936 100644 Binary files a/client/public/icons/lamps.png and b/client/public/icons/lamps.png differ diff --git a/client/public/icons/large_household_appliances.png b/client/public/icons/large_household_appliances.png index e63f291..715ee34 100644 Binary files a/client/public/icons/large_household_appliances.png and b/client/public/icons/large_household_appliances.png differ diff --git a/client/public/icons/nespresso.png b/client/public/icons/nespresso.png new file mode 100644 index 0000000..e2430ee Binary files /dev/null and b/client/public/icons/nespresso.png differ diff --git a/client/public/icons/other_electrical_appliances.png b/client/public/icons/other_electrical_appliances.png index 3bc5920..12abe98 100644 Binary files a/client/public/icons/other_electrical_appliances.png and b/client/public/icons/other_electrical_appliances.png differ diff --git a/client/public/icons/paper_and_cardboard.png b/client/public/icons/paper_and_cardboard.png index 454bf6c..6eb0db4 100644 Binary files a/client/public/icons/paper_and_cardboard.png and b/client/public/icons/paper_and_cardboard.png differ diff --git a/client/public/icons/portable_batteries.png b/client/public/icons/portable_batteries.png index 06fceab..ec3de91 100644 Binary files a/client/public/icons/portable_batteries.png and b/client/public/icons/portable_batteries.png differ diff --git a/client/public/icons/recyclable.png b/client/public/icons/recyclable.png index 35352b8..ea1cacc 100644 Binary files a/client/public/icons/recyclable.png and b/client/public/icons/recyclable.png differ diff --git a/client/public/icons/shoes.png b/client/public/icons/shoes.png index 9c7a894..98770fc 100644 Binary files a/client/public/icons/shoes.png and b/client/public/icons/shoes.png differ diff --git a/client/public/icons/stationery.png b/client/public/icons/stationery.png index 9894fea..45c7d37 100644 Binary files a/client/public/icons/stationery.png and b/client/public/icons/stationery.png differ diff --git a/client/public/icons/toys.png b/client/public/icons/toys.png index a1e6c2e..467b622 100644 Binary files a/client/public/icons/toys.png and b/client/public/icons/toys.png differ diff --git a/client/public/whiteicons/BOOKS.png b/client/public/whiteicons/BOOKS.png new file mode 100644 index 0000000..1a5a754 Binary files /dev/null and b/client/public/whiteicons/BOOKS.png differ diff --git a/client/public/whiteicons/CLOTHING.png b/client/public/whiteicons/CLOTHING.png new file mode 100644 index 0000000..203a5a8 Binary files /dev/null and b/client/public/whiteicons/CLOTHING.png differ diff --git a/client/public/whiteicons/FOOD.png b/client/public/whiteicons/FOOD.png new file mode 100644 index 0000000..3d77266 Binary files /dev/null and b/client/public/whiteicons/FOOD.png differ diff --git a/client/public/whiteicons/FURNITURE.png b/client/public/whiteicons/FURNITURE.png new file mode 100644 index 0000000..a89a2f6 Binary files /dev/null and b/client/public/whiteicons/FURNITURE.png differ diff --git a/client/public/whiteicons/GENERAL_WASTE.png b/client/public/whiteicons/GENERAL_WASTE.png new file mode 100644 index 0000000..0ff05cb Binary files /dev/null and b/client/public/whiteicons/GENERAL_WASTE.png differ diff --git a/client/public/whiteicons/INKS_AND_TONER_CARTRIDGES.png b/client/public/whiteicons/INKS_AND_TONER_CARTRIDGES.png new file mode 100644 index 0000000..299d985 Binary files /dev/null and b/client/public/whiteicons/INKS_AND_TONER_CARTRIDGES.png differ diff --git a/client/public/whiteicons/LAMPS.png b/client/public/whiteicons/LAMPS.png new file mode 100644 index 0000000..8d267e0 Binary files /dev/null and b/client/public/whiteicons/LAMPS.png differ diff --git a/client/public/whiteicons/RECYCLABLE.png b/client/public/whiteicons/RECYCLABLE.png new file mode 100644 index 0000000..3348bf4 Binary files /dev/null and b/client/public/whiteicons/RECYCLABLE.png differ diff --git a/client/public/whiteicons/SHOES.png b/client/public/whiteicons/SHOES.png new file mode 100644 index 0000000..858692c Binary files /dev/null and b/client/public/whiteicons/SHOES.png differ diff --git a/client/public/whiteicons/STATIONERY.png b/client/public/whiteicons/STATIONERY.png new file mode 100644 index 0000000..25b9803 Binary files /dev/null and b/client/public/whiteicons/STATIONERY.png differ diff --git a/client/public/whiteicons/Toys.png b/client/public/whiteicons/Toys.png new file mode 100644 index 0000000..091d789 Binary files /dev/null and b/client/public/whiteicons/Toys.png differ diff --git a/client/public/whiteicons/baby_children_items.png b/client/public/whiteicons/baby_children_items.png new file mode 100644 index 0000000..b2cc2e4 Binary files /dev/null and b/client/public/whiteicons/baby_children_items.png differ diff --git a/client/public/whiteicons/bags_and_accessories.png b/client/public/whiteicons/bags_and_accessories.png new file mode 100644 index 0000000..159c0ab Binary files /dev/null and b/client/public/whiteicons/bags_and_accessories.png differ diff --git a/client/public/whiteicons/contact_lens.png b/client/public/whiteicons/contact_lens.png new file mode 100644 index 0000000..43b019a Binary files /dev/null and b/client/public/whiteicons/contact_lens.png differ diff --git a/client/public/whiteicons/content_container.png b/client/public/whiteicons/content_container.png new file mode 100644 index 0000000..5022841 Binary files /dev/null and b/client/public/whiteicons/content_container.png differ diff --git a/client/public/whiteicons/food_drink_container.png b/client/public/whiteicons/food_drink_container.png new file mode 100644 index 0000000..17b50c5 Binary files /dev/null and b/client/public/whiteicons/food_drink_container.png differ diff --git a/client/public/whiteicons/household_goods.png b/client/public/whiteicons/household_goods.png new file mode 100644 index 0000000..6273755 Binary files /dev/null and b/client/public/whiteicons/household_goods.png differ diff --git a/client/public/whiteicons/ict_equipment.png b/client/public/whiteicons/ict_equipment.png new file mode 100644 index 0000000..a0f05a8 Binary files /dev/null and b/client/public/whiteicons/ict_equipment.png differ diff --git a/client/public/whiteicons/large_household_appliances.png b/client/public/whiteicons/large_household_appliances.png new file mode 100644 index 0000000..e453bb2 Binary files /dev/null and b/client/public/whiteicons/large_household_appliances.png differ diff --git a/client/public/whiteicons/nespresso.png b/client/public/whiteicons/nespresso.png new file mode 100644 index 0000000..cd2a109 Binary files /dev/null and b/client/public/whiteicons/nespresso.png differ diff --git a/client/public/whiteicons/other_electrical_appliances.png b/client/public/whiteicons/other_electrical_appliances.png new file mode 100644 index 0000000..ac53d55 Binary files /dev/null and b/client/public/whiteicons/other_electrical_appliances.png differ diff --git a/client/public/whiteicons/paper_and_cardboard.png b/client/public/whiteicons/paper_and_cardboard.png new file mode 100644 index 0000000..daaf7f5 Binary files /dev/null and b/client/public/whiteicons/paper_and_cardboard.png differ diff --git a/client/public/whiteicons/portable_batteries.png b/client/public/whiteicons/portable_batteries.png new file mode 100644 index 0000000..6f069cc Binary files /dev/null and b/client/public/whiteicons/portable_batteries.png differ diff --git a/client/spa-pages/components/MapPage.tsx b/client/spa-pages/components/MapPage.tsx index 0895c56..7cd1085 100644 --- a/client/spa-pages/components/MapPage.tsx +++ b/client/spa-pages/components/MapPage.tsx @@ -1,6 +1,6 @@ // General Imports import { BasePage } from "layouts/BasePage"; -import { Flex, VStack, Box, IconButton, useDisclosure } from "@chakra-ui/react"; +import { Flex, VStack, Box, IconButton, useDisclosure, Image } from "@chakra-ui/react"; import { ComponentProps, Dispatch, SetStateAction, useState } from "react"; import { Pages } from "spa-pages/pageEnums"; import { useUserInputs } from "hooks/useUserSelection"; @@ -9,7 +9,7 @@ import { useSheetyData } from "hooks/useSheetyData"; import { MAX_DISTANCE_KM, getNearbyFacilities } from "utils"; import { TItemSelection, TEmptyItem } from "app-context/SheetyContext/types"; import { FacilityType } from "app-context/UserSelectionContext/types"; -import Select from "react-select"; +import Select, { components } from "react-select"; import { ActionMeta, MultiValue } from "react-select"; import { Methods } from "api/sheety/enums"; import { ChangeEvent } from "react"; @@ -506,6 +506,9 @@ export function SelectedItemChips({ value={selectedOptions} onChange={onMultiSelectChange} options={selectOptions} + components={{ + MultiValueLabel: CustomMultiValueLabel, + }} styles={{ container: (base) => ({ ...base, @@ -550,4 +553,21 @@ export function SelectedItemChips({ ); } +const CustomMultiValueLabel = (props: any) => { + const { getItemCategory } = useSheetyData(); + const category = getItemCategory(props.data.value); + return ( + + + {`${category} + {props.children} + + + ); +}; + export default MapPage;